Add wrapper component for a question summary

Also add mobile version of the horizontal bar chart

client/src/components/ui/HorizontalBarChart.vue

@@ -1,39 +1,48 @@
 <template>
-  <div
+  <QuestionSummary :title="props.title" :text="props.text">
-    class="mb-10 grid grid-cols-horizontal-bar-chart grid-rows-horizontal-bar-chart overflow-hidden pt-[10px] grid-areas-horizontal-bar-chart"
+    <div
-  >
+      class="mb-10 grid grid-cols-horizontal-bar-chart-slim grid-rows-horizontal-bar-chart overflow-hidden pt-[10px] grid-areas-horizontal-bar-chart md:grid-cols-horizontal-bar-chart"
-    <div class="-mt-[10px] flex flex-col justify-between pb-[30px] grid-in-y-axis">
+    >
-      <span
+      <div class="-mt-[10px] flex flex-col justify-between pb-[30px] grid-in-y-axis">
-        v-for="percentage in [100, 75, 50, 25, 0]"
+        <span
-        :key="percentage"
+          v-for="percentage in [100, 75, 50, 25, 0]"
-        class="text-sm"
+          :key="percentage"
-      >
+          class="text-sm"
-        {{ percentage }}%
+        >
-      </span>
+          {{ percentage }}%
+        </span>
+      </div>
+      <div
+        class="background relative col-span-5 col-start-2 row-start-1 h-1/2 w-full self-center border-y border-y-gray-400"
+      ></div>
+      <div
+        class="relative col-span-5 col-start-2 row-start-1 flex h-[200px] w-full content-center items-end justify-around border-y border-gray-400 border-y-gray-400"
+      ></div>
+      <div
+        class="relative self-end bg-red-500 grid-in-left-chart"
+        :style="redStyle"
+      ></div>
+      <div
+        class="relative self-end bg-green-500 grid-in-right-chart"
+        :style="greenStyle"
+      ></div>
+      <div class="self-center justify-self-center font-bold grid-in-left-label">
+        Nein
+      </div>
+      <div class="self-center justify-self-center font-bold grid-in-right-label">
+        Ja
+      </div>
     </div>
-    <div
+  </QuestionSummary>
-      class="background relative col-span-5 col-start-2 row-start-1 h-1/2 w-full self-center border-y border-y-gray-400"
-    ></div>
-    <div
-      class="relative col-span-5 col-start-2 row-start-1 flex h-[200px] w-full content-center items-end justify-around border-y border-gray-400 border-y-gray-400"
-    ></div>
-    <div
-      class="relative self-end bg-red-500 grid-in-left-chart"
-      :style="redStyle"
-    ></div>
-    <div
-      class="relative self-end bg-green-500 grid-in-right-chart"
-      :style="greenStyle"
-    ></div>
-    <div class="self-center justify-self-center font-bold grid-in-left-label">Nein</div>
-    <div class="self-center justify-self-center font-bold grid-in-right-label">Ja</div>
-  </div>
 </template>
 
 <script setup lang="ts">
+import QuestionSummary from "@/components/ui/QuestionSummary.vue";
 import { computed } from "vue";
 const props = defineProps<{
   ratio: number;
+  title: string;
+  text: string;
 }>();
 
 const ratio = computed(() => {

client/src/components/ui/QuestionSummary.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="mb-8 p-6 md:p-8">
+    <h3 class="text-xl font-normal">{{ props.title }}</h3>
+    <h2 class="mb-6 text-xl font-bold">
+      {{ props.text }}
+    </h2>
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  title: string;
+  text: string;
+}>();
+</script>

client/src/components/ui/RatingScale.vue

@@ -1,11 +1,7 @@
 <template>
-  <div class="mb-8 p-8">
+  <QuestionSummary :title="props.title" :text="props.text">
-    <h3 class="text-xl font-normal">{{ props.title }}</h3>
-    <h2 class="mb-6 text-xl font-bold">
-      {{ props.text }}
-    </h2>
     <div class="inline-grid grid-cols-[140px_auto] grid-rows-2 gap-x-2">
-      <h4 class="text-xl">Durchschnitt:</h4>
+      <h4 class="text-xl font-bold">Durchschnitt:</h4>
       <span
         class="col-start-2 row-span-2 inline-flex h-9 w-11 items-center justify-center rounded text-xl"
         :style="ratingValueStyle"
@@ -26,15 +22,22 @@
         :class="`legend-${legend.index}`"
         class="legend"
       >
-        <div>{{ legend.index }}</div>
+        <div
+          :class="[{ hidden: legend.index === 3 || legend.index === 2 }, 'md:block']"
+        >
+          {{ legend.index }}
+        </div>
 
-        <p>{{ legend.label }}</p>
+        <p :class="[{ hidden: legend.index === 3 || legend.index === 2 }, 'md:block']">
+          {{ legend.label }}
+        </p>
       </div>
     </div>
-  </div>
+  </QuestionSummary>
 </template>
 
 <script setup lang="ts">
+import QuestionSummary from "@/components/ui/QuestionSummary.vue";
 import { computed } from "vue";
 
 type RGB = [number, number, number];

client/src/pages/StyleGuidePage.vue

@@ -481,11 +481,11 @@ function log(data: any) {
         title="Frage 9"
         text="Wie zufrieden bist du mit dem Kurs “Überbetriebliche Kurse” im Allgemeinen?"
       />
-      <HorizontalBarChart :ratio="0.5" />
+      <HorizontalBarChart title="Frage X" text="Fragentext" :ratio="0.5" />
-      <HorizontalBarChart :ratio="0.8" />
+      <HorizontalBarChart title="Frage X" text="Fragentext" :ratio="0.8" />
-      <HorizontalBarChart :ratio="0.2" />
+      <HorizontalBarChart title="Frage X" text="Fragentext" :ratio="0.2" />
-      <HorizontalBarChart :ratio="2" />
+      <HorizontalBarChart title="Frage X" text="Fragentext" :ratio="2" />
-      <HorizontalBarChart :ratio="0" />
+      <HorizontalBarChart title="Frage X" text="Fragentext" :ratio="0" />
     </div>
   </main>
 </template>

client/tailwind.config.js

@@ -45,6 +45,7 @@ module.exports = {
       },
       gridTemplateColumns: {
         "horizontal-bar-chart": "50px 1fr 300px 4fr 300px 1fr",
+        "horizontal-bar-chart-slim": "50px 1fr 78px 4fr 78px 1fr",
       },
       gridTemplateRows: {
         "horizontal-bar-chart": "200px 40px",