Add content add widget in modal
This commit is contained in:
Ramon Wenger
parent
9155b86451
commit
52d6d20194
|
|
@ -0,0 +1,96 @@
|
|||
<template>
|
||||
<div class="add-content-block-widget">
|
||||
<div class="add-content-block-widget__link">
|
||||
<link-icon class="add-content-block-widget__link-icon"></link-icon>
|
||||
<div class="add-content-block-widget__link-title">Link</div>
|
||||
</div>
|
||||
<div class="add-content-block-widget__link">
|
||||
<video-icon class="add-content-block-widget__link-icon"></video-icon>
|
||||
<div class="add-content-block-widget__link-title">Video</div>
|
||||
</div>
|
||||
<div class="add-content-block-widget__link">
|
||||
<image-icon class="add-content-block-widget__link-icon"></image-icon>
|
||||
<div class="add-content-block-widget__link-title">Bild</div>
|
||||
</div>
|
||||
<div class="add-content-block-widget__link">
|
||||
<text-icon class="add-content-block-widget__link-icon"></text-icon>
|
||||
<div class="add-content-block-widget__link-title">Text</div>
|
||||
</div>
|
||||
<div class="add-content-block-widget__link">
|
||||
<speech-bubble-icon class="add-content-block-widget__link-icon"></speech-bubble-icon>
|
||||
<div class="add-content-block-widget__link-title">Aufgabe & Ergebnis</div>
|
||||
</div>
|
||||
<div class="add-content-block-widget__link">
|
||||
<document-icon class="add-content-block-widget__link-icon"></document-icon>
|
||||
<div class="add-content-block-widget__link-title">Dokument</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LinkIcon from '@/components/images/LinkIcon';
|
||||
import VideoIcon from '@/components/images/VideoIcon';
|
||||
import ImageIcon from '@/components/images/ImageIcon';
|
||||
import TextIcon from '@/components/images/TextIcon';
|
||||
import SpeechBubbleIcon from '@/components/images/SpeechBubbleIcon';
|
||||
import DocumentIcon from '@/components/images/DocumentIcon';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
LinkIcon,
|
||||
VideoIcon,
|
||||
ImageIcon,
|
||||
TextIcon,
|
||||
SpeechBubbleIcon,
|
||||
DocumentIcon,
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/styles/_variables.scss";
|
||||
@import "@/styles/_functions.scss";
|
||||
|
||||
.add-content-block-widget {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
grid-column-gap: 0px;
|
||||
font-family: $sans-serif-font-family;
|
||||
text-align: center;
|
||||
border: 2px solid $color-grey;
|
||||
padding: 30px 5px;
|
||||
border-radius: 12px;
|
||||
margin-top: 20px;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid $color-grey;
|
||||
border-bottom: 0;
|
||||
border-right: 0;
|
||||
background-color: white;
|
||||
top: -12px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) rotate(45deg);
|
||||
}
|
||||
|
||||
&__link {
|
||||
padding: 0 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&__link-icon {
|
||||
width: 40px;
|
||||
height: auto;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
&__link-text {
|
||||
font-size: toRem(13px);
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,7 +1,9 @@
|
|||
<template>
|
||||
<div class="modal__backdrop">
|
||||
<div class="modal">
|
||||
<div class="modal__body"></div>
|
||||
<div class="modal__body">
|
||||
<add-content-block-widget></add-content-block-widget>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<a class="button button--active">Speichern</a>
|
||||
<a class="button" v-on:click="hideModal">Abbrechen</a>
|
||||
|
|
@ -11,7 +13,13 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import AddContentBlockWidget from '@/components/AddContentBlockWidget';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
AddContentBlockWidget
|
||||
},
|
||||
|
||||
methods: {
|
||||
hideModal() {
|
||||
this.$store.dispatch('hideModal');
|
||||
|
|
@ -46,7 +54,7 @@
|
|||
z-index: 90;
|
||||
}
|
||||
|
||||
&__content {
|
||||
&__body {
|
||||
padding: 10px 34px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,11 @@
|
|||
<template>
|
||||
<svg id="shape" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|
||||
<title>document</title>
|
||||
<path
|
||||
d="M22.64,5.3a8.38,8.38,0,0,0-8.37,8.37V86.33a8.38,8.38,0,0,0,8.37,8.37H77.36a8.38,8.38,0,0,0,8.37-8.37v-57L61.39,5.3ZM79.17,88.08a2.74,2.74,0,0,1-2.11.94H22.34a3,3,0,0,1-3-3V13.37a3,3,0,0,1,3-3H54V28.32a7.78,7.78,0,0,0,7.77,7.77H79.75V85.73A2.85,2.85,0,0,1,79.17,88.08ZM62.11,31a2.34,2.34,0,0,1-2.39-2.39V11.15L79.58,31Z"/>
|
||||
<path
|
||||
d="M61.81,36.1A7.78,7.78,0,0,1,54,28.32V10.38H22.34a3,3,0,0,0-3,3V86a3,3,0,0,0,3,3H77.06a2.74,2.74,0,0,0,2.11-.94,2.85,2.85,0,0,0,.59-2.35V36.1Z"
|
||||
style="fill:#fff"/>
|
||||
<path d="M59.72,28.62A2.34,2.34,0,0,0,62.11,31H79.58L59.72,11.15Z" style="fill:#fff"/>
|
||||
</svg>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<template>
|
||||
<svg id="shape" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><title>image</title>
|
||||
<path
|
||||
d="M93,14.2H7a2,2,0,0,0-2,2v67.5a2,2,0,0,0,2,2H93a2,2,0,0,0,2-2V16.25A2,2,0,0,0,93,14.2ZM42.27,54.37,57.73,69.83a2.09,2.09,0,0,0,2.89,0,2,2,0,0,0,0-2.89l-7-7L67,45.24,90,68.38a2,2,0,0,0,.87.46V81.7H12.18ZM65.36,41,50.7,57l-6.9-6.9A2.05,2.05,0,0,0,41,50L9.09,79V18.3H90.91V63.47L68.26,40.82a2,2,0,0,0-1.47-.53A2.06,2.06,0,0,0,65.36,41Z"/>
|
||||
<path
|
||||
d="M30.06,31.08a9.05,9.05,0,1,0,9.05,9.06A9.06,9.06,0,0,0,30.06,31.08Zm5,9.05a5,5,0,1,1-5-5A5,5,0,0,1,35,40.13Z"/>
|
||||
</svg>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<template>
|
||||
<svg id="shape" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><title>link</title>
|
||||
<path
|
||||
d="M85.13,14.88a19.12,19.12,0,0,0-27,0l-9.61,9.61a2.68,2.68,0,0,0,3.79,3.8l9.61-9.61A13.73,13.73,0,0,1,81.33,38.08L63.4,56A13.75,13.75,0,0,1,44,56a2.68,2.68,0,0,0-3.79,3.8,19.12,19.12,0,0,0,27,0L85.13,41.88a19.14,19.14,0,0,0,0-27Z"/>
|
||||
<path
|
||||
d="M46.61,72.81l-8.53,8.53A13.73,13.73,0,0,1,18.67,61.92L35.55,45A13.78,13.78,0,0,1,55,45a2.75,2.75,0,0,0,3.79,0,2.68,2.68,0,0,0,0-3.79,19.12,19.12,0,0,0-27,0L14.87,58.13a19.09,19.09,0,0,0,27,27L50.4,76.6a2.68,2.68,0,0,0-3.79-3.79Z"/>
|
||||
</svg>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
<template>
|
||||
<svg id="shape" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><title>q-a</title>
|
||||
<path
|
||||
d="M88.09,10h-38A12,12,0,0,0,38,21.88V33.11H12a12.07,12.07,0,0,0-12,12v22.4A12,12,0,0,0,12,79.39H47l10.87,10a2.5,2.5,0,0,0,1.67.67,2.38,2.38,0,0,0,1-.2A2.44,2.44,0,0,0,62,87.58V56.25H88.09a11.92,11.92,0,0,0,11.91-12V21.88A11.87,11.87,0,0,0,88.09,10ZM57,82l-7.41-6.83a2.49,2.49,0,0,0-1.65-.7H12A7,7,0,0,1,5,67.51V45.11a7.1,7.1,0,0,1,7.09-7H38V64.35a2.54,2.54,0,0,0,4.23,1.83l9.1-8.29L52,57.3c.49-.45,1-.92,1.21-1.05s.71,0,1.16,0H57ZM95,44.28a7,7,0,0,1-6.95,7H54.47c-3-.06-3.55.27-5.83,2.37-.19.17-.45.37-.68.58l-5,4.5V21.88a7.06,7.06,0,0,1,7.13-7h38a6.91,6.91,0,0,1,6.95,7Z"
|
||||
style="fill-rule:evenodd"/>
|
||||
</svg>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<template>
|
||||
<svg id="shape" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><title>text</title>
|
||||
<path
|
||||
d="M94.86,40.16a2.5,2.5,0,0,0-2.5,2.5v6.6a19.35,19.35,0,0,0-16.08-9.1c-11,0-19.92,9.95-19.92,22.17S65.29,84.5,76.28,84.5a19.35,19.35,0,0,0,16.08-9.1V82a2.5,2.5,0,0,0,5,0V42.66A2.5,2.5,0,0,0,94.86,40.16ZM76.28,79.5c-8.23,0-14.92-7.7-14.92-17.17s6.69-17.17,14.92-17.17S91.2,52.86,91.2,62.33,84.51,79.5,76.28,79.5Z"/>
|
||||
<path
|
||||
d="M30.6,17.15a2.5,2.5,0,0,0-4.7,0l-23.11,64a2.5,2.5,0,1,0,4.7,1.7l7.79-21.58H41.21L49,82.85a2.5,2.5,0,0,0,4.7-1.7ZM17.09,56.27,28.25,25.36,39.41,56.27Z"/>
|
||||
</svg>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
<template>
|
||||
<svg id="shape" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><title>video</title>
|
||||
<path
|
||||
d="M70.79,83.87H29.21C7.12,83.87,2.8,74.31,2.8,57.79V42.21c0-8.62,0-14.84,3.63-19.45s10.31-6.63,22.78-6.63H70.79c12.18,0,18.67,1.8,22.39,6.22h0c3.74,4.45,4,10.75,4,19.86V57.79c0,10.54-1.76,16.72-5.89,20.67S81.35,83.87,70.79,83.87ZM29.21,20.53c-10.81,0-16.59,1.48-19.33,4.95s-2.68,9-2.68,16.73V57.79c0,15,3.18,21.68,22,21.68H70.79c9.31,0,14.37-1.21,17.48-4.19S92.8,67,92.8,57.79V42.21c0-8.14-.21-13.72-3-17s-8.43-4.65-19-4.65Zm13.34,44a5.1,5.1,0,0,1-5.1-5.1V39.77a5.1,5.1,0,0,1,7.45-4.53L63.79,45a5.1,5.1,0,0,1,0,9.05L44.92,64A5.13,5.13,0,0,1,42.55,64.55Zm0-25.48a.7.7,0,0,0-.7.7V59.45a.7.7,0,0,0,1,.62L61.76,50.2a.7.7,0,0,0,0-1.25L42.88,39.15A.7.7,0,0,0,42.55,39.07Z"/>
|
||||
</svg>
|
||||
</template>
|
||||
Loading…
Reference in New Issue