collect quotes (WIP)

client/src/components/CollectQuote.vue

@@ -1,12 +1,20 @@
 <template>
   <div class="collect-quote">
-    <p>Sachen gibt's ...</p>
-    <form>
-      <input type="hidden" name="id" :value="quote.id" />
-      <input v-model="quote.quote" size="60" />
-    </form>
-    <button @click="save">Save</button>
-    <Quote :text="quote.quote" />
+    <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>
+          <input type="hidden" name="id" :value="quote.id" />
+          <textarea v-model="quote.quote" cols="60" rows="4" />
+        </form>
+        <button @click="save">Save</button>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -23,6 +31,47 @@ export default {
 
 <style lang="scss">
 .collect-quote {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
   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>

client/src/components/CollectQuotes.vue

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

client/src/components/Play.vue

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

client/src/components/Quote.vue

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

client/src/components/QuoteContainer.vue

@@ -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>