From 2fed11784c0e3a0dfd860f822662dd21a14bbf97 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Mon, 23 Jan 2023 17:01:40 +0100
Subject: [PATCH] Fix mobile view for rating scale component

---
 client/src/components/ui/RatingScale.vue | 16 ++++++++++------
 client/tailwind.config.js                |  5 ++++-
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/client/src/components/ui/RatingScale.vue b/client/src/components/ui/RatingScale.vue
index 20ca6bf8..263d75b7 100644
--- a/client/src/components/ui/RatingScale.vue
+++ b/client/src/components/ui/RatingScale.vue
@@ -10,7 +10,9 @@
       </span>
       <h5 class="text-base">{{ props.answers }} Antworten</h5>
     </div>
-    <div class="relative grid grid-cols-8 pt-3 grid-areas-rating-scale">
+    <div
+      class="relative grid grid-cols-3 pt-3 grid-areas-rating-scale-slim md:grid-cols-8 md:grid-areas-rating-scale"
+    >
       <div
         class="gradient relative z-10 h-2 overflow-visible grid-in-bar"
         :style="gradientStyle"
@@ -26,12 +28,14 @@
         v-for="legend in legends"
         :key="legend.index"
         :class="{
-          'grid-in-fst': legend.index == 1,
-          'grid-in-snd': legend.index == 2,
-          'grid-in-trd': legend.index == 3,
-          'grid-in-fth': legend.index == 4,
+          'items-start grid-in-fst before:left-0 md:before:left-1/2': legend.index == 1,
+          'grid-in-mid before:left-0 md:grid-in-snd md:before:left-1/2':
+            legend.index == 2,
+          'hidden before:left-1/2 md:inline-flex md:grid-in-trd': legend.index == 3,
+          'items-end grid-in-fth before:right-0 after:left-0 after:absolute after:top-0 after:h-4 after:w-px after:bg-gray-500 md:before:left-1/2 md:before:right-auto md:after:hidden text-right':
+            legend.index == 4,
         }"
-        class="legend relative inline-flex flex-col items-center pt-4 before:absolute before:top-0 before:left-1/2 before:h-4 before:w-px before:bg-gray-500"
+        class="legend relative inline-flex flex-col pt-4 before:absolute before:top-0 before:h-4 before:w-px before:bg-gray-500 md:items-center"
       >
         <div
           :class="[{ hidden: legend.index === 3 || legend.index === 2 }, 'md:block']"
diff --git a/client/tailwind.config.js b/client/tailwind.config.js
index 0d1c96ea..a6caf9e0 100644
--- a/client/tailwind.config.js
+++ b/client/tailwind.config.js
@@ -44,7 +44,10 @@ module.exports = {
         ],
         "rating-scale": [
           '.   bar bar bar bar bar bar   .',
-          'fst fst snd snd trd trd fth fth']
+          'fst fst snd snd trd trd fth fth'],
+        "rating-scale-slim": [
+          'bar bar bar',
+          'fst mid fth']
       },
       gridTemplateColumns: {
         "horizontal-bar-chart": "50px 1fr 300px 4fr 300px 1fr",