settel/knowyt
1
0
Fork 0
Code Issues Pull Requests Packages Releases Activity

collect quote styling

Browse Source
This commit is contained in:
Settel 2021-11-22 07:08:54 +01:00
parent 2eb4d73472
commit 15493e2551
2 changed files with 41 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
client/src/components/CollectQuote.vue
View File

@ -9,11 +9,14 @@
</div> </div>
</div> </div>
<div class="collect-quote__inputgroup"> <div class="collect-quote__inputgroup">
<button class="collect-quote__button-close" @click="close">X</button>
<form class="collect-quote__textinput-container"> <form class="collect-quote__textinput-container">
<input type="hidden" name="id" :value="quote.id" /> <input type="hidden" name="id" :value="quote.id" />
<textarea class="collect-quote__textinput" v-model="quote.quote" /> <textarea class="collect-quote__textinput" v-model="quote.quote" />
</form> </form>
<button class="collect-quote__cta" @click="save">Save</button> <div class="collect-quote__cta-container">
<button class="collect-quote__cta" @click="save">Save</button>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -25,7 +28,10 @@ export default {
methods: { methods: {
save() { save() {
this.$nuxt.$emit('save-quote', this.quote) this.$nuxt.$emit('save-quote', this.quote)
} },
close() {
this.$nuxt.$emit('close-quote')
},
}, },
} }
</script> </script>
@ -92,10 +98,37 @@ export default {
&__textinput { &__textinput {
width: 100%; width: 100%;
height: 8em;
}
&__button-close {
align-self: flex-end;
width: 48px;
height: 48px;
margin: 2px;
padding: 10px;
background: none;
border: 0;
font-size: 24px;
color: #ffffff;
cursor: pointer;
&:hover {
background-color: #6040a0;
border-radius: 16px;
}
}
&__cta-container {
position: relative;
width: 100%;
height: 100%;
} }
&__cta { &__cta {
align-self: flex-end; position: absolute;
right: 0;
bottom: 0;
margin: 48px; margin: 48px;
background-color: #40a020; background-color: #40a020;
width: 80px; width: 80px;
@ -105,6 +138,7 @@ export default {
color: #ffff80; color: #ffff80;
font-family: Dosis; font-family: Dosis;
font-size: 24px; font-size: 24px;
cursor: pointer;
&:hover { &:hover {
background-color: #60c040; background-color: #60c040;

4
client/src/components/CollectQuotes.vue
View File

@ -21,6 +21,10 @@ export default {
}, },
}, },
created() { created() {
this.$nuxt.$on('close-quote', () => {
this.showCollectQuoteDialog = false
})
this.$nuxt.$on('edit-quote', (quote) => { this.$nuxt.$on('edit-quote', (quote) => {
this.showCollectQuoteDialog = true this.showCollectQuoteDialog = true
this.collectQuote = { this.collectQuote = {