ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Add preliminary input field to modal

This commit is contained in:
Ramon Wenger 2018-09-05 17:54:01 +02:00
parent ed4616bd24
commit bdc9fc6cb0
2 changed files with 33 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
client/src/components/ContentBlockTitleInput.vue Normal file
View File

@ -0,0 +1,21 @@
<template>
<div class="content-block-title-input">
<input placeholder="Titel für Inhaltsblock erfassen" class="content-block-title-input__inputfield"/>
</div>
</template>
<style scoped lang="scss">
@import "@/styles/_variables.scss";
.content-block-title-input {
&__inputfield {
display: flex;
width: 100%;
padding: 16px;
box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.15);
border-radius: 4px;
box-sizing: border-box;
border: 1px solid $color-lightgrey;
}
}
</style>

14
client/src/components/Modal.vue
View File

@ -1,6 +1,9 @@
<template> <template>
<div class="modal__backdrop"> <div class="modal__backdrop">
<div class="modal"> <div class="modal">
<div class="modal__header">
<content-block-title-input></content-block-title-input>
</div>
<div class="modal__body"> <div class="modal__body">
<add-content-block-widget></add-content-block-widget> <add-content-block-widget></add-content-block-widget>
</div> </div>
@ -14,10 +17,12 @@
<script> <script>
import AddContentBlockWidget from '@/components/AddContentBlockWidget'; import AddContentBlockWidget from '@/components/AddContentBlockWidget';
import ContentBlockTitleInput from '@/components/ContentBlockTitleInput';
export default { export default {
components: { components: {
AddContentBlockWidget AddContentBlockWidget,
ContentBlockTitleInput
}, },
methods: { methods: {
@ -41,7 +46,7 @@
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15); box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
border: 1px solid $color-lightgrey; border: 1px solid $color-lightgrey;
display: grid; display: grid;
grid-template-rows: 1fr 65px; grid-template-rows: auto 1fr 65px;
&__backdrop { &__backdrop {
display: grid; display: grid;
@ -54,6 +59,11 @@
z-index: 90; z-index: 90;
} }
&__header {
padding: 10px 30px;
border-bottom: 1px solid $color-lightgrey;
}
&__body { &__body {
padding: 10px 34px; padding: 10px 34px;
} }