layout: styles finetuning

client/src/components/AddNewQuote.vue

@@ -20,7 +20,7 @@ export default {
 .add-new-quote {
   display: flex;
   width: 100%;
-  margin: 32px;
+  margin: 32px 0;
   flex-direction: column;
   align-items: center;
 

client/src/components/CollectQuotes.vue

@@ -1,9 +1,10 @@
 <template>
   <div>
-    <!-- <CollectQuotesExplain /> -->
+    <CollectQuotesExplain />
-    <AddNewQuote />
-    <QuoteListItem v-for="quote in quotes" :key="quote.id" :quote="quote" />
     <AddNewQuote v-if="quotes.length > 0"/>
+    <NoQuotesYet v-if="quotes.length == 0" />
+    <QuoteListItem v-for="quote in quotes" :key="quote.id" :quote="quote" />
+    <AddNewQuote />
     <CollectQuote v-if="showCollectQuoteDialog" :quote="collectQuote" />
   </div>
 </template>

client/src/components/CollectQuotesExplain.vue

@@ -14,12 +14,12 @@
         <div class="collect-quotes-explain__explain">
           <p>
             Das Spiel besteht aus zwei Phasen. In der ersten Phase werden von den
-            Mitspielenden Statements gesammelt. In der zweiten Phase versucht
+            Mitspielenden Aussagen gesammelt. In der zweiten Phase versucht
-            man, die Statements den richtigen Personen zuzuordnen. Wir befinden
+            man, die Aussagen den richtigen Personen zuzuordnen. Wir befinden
             uns in der ersten Phase.
           </p>
           <p>
-            Schreibe in 3-5 einzelnen Statements etwas über dich.
+            Schreibe in 3-5 einzelnen Aussagen etwas über dich.
           </p>
         </div>
         <div class="collect-quotes-explain__example">
@@ -50,9 +50,9 @@ export default {
         'Um mir mein Studium zu finanzieren habe ich den Taxischein gemacht. Ich bin jedoch nie gefahren.',
         'Ich mag jede Nudelsorte ausser Spaghetti, die kann ich nicht ausstehen.',
         'Etwa 5 Jahre lang habe ich Kontrabass im Jugendorchester gespielt.',
-        'Zuerst wollte ich Baugestaltung und Architekturgeschichte studieren. Der Studiengang war aber so voll, dass ich mich nach nur 3 Vorlesungen umentschieden und statt dessen Informatik studiert habe.',
+        'Zuerst wollte ich Baugestaltung und Architekturgeschichte studieren. Der Studiengang war aber so voll, dass ich mich nach nur drei Vorlesungen umentschieden und statt dessen Informatik studiert habe.',
         'Nach dem Abi habe ich fast ein Jahr lang in einer Tierarztpraxis gejobbt.',
-        'Ich habe drei Mal meinem/meiner Partner:in zuliebe angefangen, "Herr der Ringe" zu schauen und bin jedes Mal dabei dabei eingeschlafen.',
+        'Ich habe drei Mal meinem/meiner Partner:in zuliebe angefangen, "Herr der Ringe" zu schauen und bin jedes Mal dabei eingeschlafen.',
         'Ich habe vier Meerschweinchen: Tick, Trick, Track und Alfred.',
       ],
     }

client/src/components/Final.vue

@@ -22,7 +22,7 @@
 export default {
   computed: {
     title() {
-      return 'Team Banana Mania'
+      return 'Hall of Fame'
     },
     players() {
       var players = [...this.$store.state.players.players]

client/src/components/GameControls.vue

@@ -3,7 +3,7 @@
     <button @click="collectQuotes">Collect Quotes</button>
     <button @click="startGame">Start</button>
     <button @click="continueGame">Continue</button>
-    <button @click="resetGame">Reset Round</button>
+    <button @click="resetGame">Idle</button>
     <button @click="finishGame">Finish Game</button>
   </nav>
 </template>

client/src/components/NoQuotesYet.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="no-quotes-yet">
+    Klicke, um deine erste Aussage zu hinterlegen.
+  </div>
+</template>
+
+<style lang="scss">
+.no-quotes-yet {
+  width: 100%;
+  font-family: Dosis;
+  font-size: 18px;
+  text-align: center;
+  color: #ffffff;
+}
+</style>