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

collect quotes (WIP)

Browse Source
This commit is contained in:
Settel 2021-11-07 23:31:04 +01:00
parent d5bde937b5
commit 9b3fa31189
5 changed files with 81 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,12 +1,20 @@
<template> <template>
<div class="collect-quote"> <div class="collect-quote">
<p>Sachen gibt's ...</p> <div class="collect-quote__container">
<div class="collect-quote__quote-container">
<h2>Preview:</h2>
<div class="collect-quote__quote">
<Quote :text="quote.quote" />
</div>
</div>
<div class="collect-quote__inputgroup">
<form> <form>
<input type="hidden" name="id" :value="quote.id" /> <input type="hidden" name="id" :value="quote.id" />
<input v-model="quote.quote" size="60" /> <textarea v-model="quote.quote" cols="60" rows="4" />
</form> </form>
<button @click="save">Save</button> <button @click="save">Save</button>
<Quote :text="quote.quote" /> </div>
</div>
</div> </div>
</template> </template>
@ -23,6 +31,47 @@ export default {
<style lang="scss"> <style lang="scss">
.collect-quote { .collect-quote {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
color: #ffffff; color: #ffffff;
&__container {
position: absolute;
display: flex;
left: 0;
top: 0;
width: 80%;
height: 50%;
margin: 0 10%;
background-color: #402080;
border: 1px solid #ffffff;
border-radius: 20px;
padding: 48px 0;
}
&__quote-container {
position: relative;
display: flex;
flex-direction: column;
left: 0;
top: 0;
width: 50%;
height: 100%;
border-right: 1px solid #ffffff;
padding: 0 48px;
}
&__quote {
align-self: center;
margin: 0 48px;
max-width: 400px;
}
&__inputgroup {
}
} }
</style> </style>

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

@ -3,7 +3,6 @@
<!-- <CollectQuotesExplain /> --> <!-- <CollectQuotesExplain /> -->
<QuoteListItem v-for="quote in quotes" :key="quote.id" :quote="quote" /> <QuoteListItem v-for="quote in quotes" :key="quote.id" :quote="quote" />
<CollectQuote v-if="showCollectQuoteDialog" :quote="collectQuote" /> <CollectQuote v-if="showCollectQuoteDialog" :quote="collectQuote" />
<p>{{ showCollectQuoteDialog }}</p>
</div> </div>
</template> </template>

2
client/src/components/Play.vue
View File

@ -2,7 +2,7 @@
<div class="play"> <div class="play">
<div :class="['play__layout', { 'play__layout__fade-out': fadeOut }]"> <div :class="['play__layout', { 'play__layout__fade-out': fadeOut }]">
<div class="play__layout-playground"> <div class="play__layout-playground">
<Quote :text="quote" /> <QuoteContainer :text="quote" />
<Sources :sources="sources" :selectable="selectable" /> <Sources :sources="sources" :selectable="selectable" />
</div> </div>
<div class="play__layout-right-column"> <div class="play__layout-right-column">

11
client/src/components/Quote.vue
View File

@ -1,9 +1,7 @@
<template> <template>
<div class="quote"> <div class="quote">
<div class="quote__container">
<div class="quote__quote">{{ text }}</div> <div class="quote__quote">{{ text }}</div>
</div> </div>
</div>
</template> </template>
<script> <script>
@ -14,15 +12,6 @@ export default {
<style lang="scss"> <style lang="scss">
.quote { .quote {
&__container {
display: flex;
position: absolute;
left: 35%;
top: 35%;
width: 30%;
height: 30%;
align-items: center;
}
&__quote { &__quote {
text-align: justify; text-align: justify;
font-family: Dosis; font-family: Dosis;

23
client/src/components/QuoteContainer.vue Normal file
View File

@ -0,0 +1,23 @@
<template>
<div class="quote-container">
<Quote :text="text" />
</div>
</template>
<script>
export default {
props: ['text'],
}
</script>
<style lang="scss">
.quote-container {
display: flex;
position: absolute;
left: 35%;
top: 35%;
width: 30%;
height: 30%;
align-items: center;
}
</style>