From a08be832838cc3e535c56f011f30aa8c60a9977a Mon Sep 17 00:00:00 2001
From: Ramon Wenger <donramonloco+github@gmail.com>
Date: Mon, 4 Feb 2019 18:09:51 +0100
Subject: [PATCH] Add styling to solution

---
 .../components/content-blocks/Solution.vue    | 32 +++++++++++++++++--
 client/src/pages/room.vue                     |  7 +++-
 server/core/management/commands/dummy_data.py |  2 +-
 3 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/client/src/components/content-blocks/Solution.vue b/client/src/components/content-blocks/Solution.vue
index 4dcfe3eb..d1281dce 100644
--- a/client/src/components/content-blocks/Solution.vue
+++ b/client/src/components/content-blocks/Solution.vue
@@ -1,7 +1,10 @@
 <template>
   <div class="solution" data-cy="solution">
-    <a data-cy="show-solution" @click="toggle">Lösung <span v-if="!visible">anzeigen</span><span v-if="visible">ausblenden</span></a>
-    <p class="solution-text" data-cy="solution-text" v-if="visible">
+    <a class="solution__toggle" data-cy="show-solution" @click="toggle">Lösung
+      <template v-if="!visible">anzeigen</template>
+      <template v-else>ausblenden</template>
+    </a>
+    <p class="solution__text" data-cy="solution-text" v-if="visible">
       {{value.text}}
     </p>
   </div>
@@ -24,3 +27,28 @@
     }
   }
 </script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+  @import "@/styles/_functions.scss";
+
+  .solution {
+    display: grid;
+    grid-auto-rows: auto;
+    grid-row-gap: 15px;
+
+    &__toggle {
+      font-family: $sans-serif-font-family;
+      color: $color-grey;
+      font-size: toRem(15px);
+      /*margin-bottom: 15px;*/
+      display: block;
+      cursor: pointer;
+    }
+
+    &__text {
+      font-size: toRem(18px);
+      color: $color-grey;
+    }
+  }
+</style>
diff --git a/client/src/pages/room.vue b/client/src/pages/room.vue
index fbd53463..d7d98c8c 100644
--- a/client/src/pages/room.vue
+++ b/client/src/pages/room.vue
@@ -11,7 +11,12 @@
       </div>
     </div>
     <div class="room__content">
-      <add-room-entry-button :parent="room" v-if="room.id"></add-room-entry-button>
+      <add-room-entry-button :parent="room" v-if="room.id">
+        <!--
+        the v-if is there for the case where the room hasn't loaded yet, but there is already an attempt to create
+        a new room entry. mainly happens during cypress testing, but could also happen on a very slow connection
+        -->
+      </add-room-entry-button>
       <room-entry v-for="entry in room.roomEntries" v-bind="entry" :key="entry.id"></room-entry>
     </div>
   </div>
diff --git a/server/core/management/commands/dummy_data.py b/server/core/management/commands/dummy_data.py
index c88f6cfa..3eb803ee 100644
--- a/server/core/management/commands/dummy_data.py
+++ b/server/core/management/commands/dummy_data.py
@@ -84,7 +84,7 @@ module_1_chapter_1 = {
                 {
                     'type': 'solution',
                     'value': {
-                        'text': 'Dies ist ein Lösungssatz'
+                        'text': 'Dies ist ein Lösungssatz. Dies ist ein weiterer Lösungssatz. Dies ist noch ein Lösungssatz. Dies ist sogar noch einmal ein Lösungssatz. '
                     }
                 }
             ]