From c24c1214c907153a3f1320680a8cbea34a4cdf7f Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Thu, 19 Jan 2023 14:35:08 +0100
Subject: [PATCH] Use tailwind properties instead of custom css

---
 .../src/components/ui/HorizontalBarChart.vue  | 92 ++++---------------
 1 file changed, 19 insertions(+), 73 deletions(-)

diff --git a/client/src/components/ui/HorizontalBarChart.vue b/client/src/components/ui/HorizontalBarChart.vue
index 9da65876..3ed091e2 100644
--- a/client/src/components/ui/HorizontalBarChart.vue
+++ b/client/src/components/ui/HorizontalBarChart.vue
@@ -1,26 +1,32 @@
 <template>
-  <div class="horizontal-bar-chart overflow-hidden mb-10">
-    <div class="y-axis">
-      <span class="text-sm">100%</span>
-      <span class="text-sm">75%</span>
-      <span class="text-sm">50%</span>
-      <span class="text-sm">25%</span>
-      <span class="text-sm">0%</span>
+  <div
+    class="grid overflow-hidden mb-10 pt-[10px] grid-areas-horizontal-bar-chart grid-rows-horizontal-bar-chart grid-cols-horizontal-bar-chart"
+  >
+    <div class="grid-in-y-axis flex flex-col justify-between -mt-[10px] pb-[30px]">
+      <span
+        v-for="percentage in [100, 75, 50, 25, 0]"
+        :key="percentage"
+        class="text-sm"
+      >
+        {{ percentage }}%
+      </span>
     </div>
-    <div class="background"></div>
     <div
-      class="relative border-y border-gray-400 flex justify-around content-center items-end top-bottom-borders"
+      class="background border-y border-y-gray-400 w-full h-1/2 col-start-2 col-span-5 relative self-center row-start-1"
     ></div>
     <div
-      class="bg-red-500 inline-block relative negative-chart"
+      class="relative border-y border-gray-400 flex justify-around content-center items-end border-y-gray-400 w-full col-start-2 col-span-5 h-[200px] row-start-1"
+    ></div>
+    <div
+      class="bg-red-500 grid-in-left-chart relative self-end"
       :style="redStyle"
     ></div>
     <div
-      class="bg-green-500 inline-block relative positive-chart"
+      class="bg-green-500 grid-in-right-chart relative self-end"
       :style="greenStyle"
     ></div>
-    <div class="positive-legend">Nein</div>
-    <div class="negative-legend">Ja</div>
+    <div class="grid-in-left-label justify-self-center self-center font-bold">Nein</div>
+    <div class="grid-in-right-label justify-self-center self-center font-bold">Ja</div>
   </div>
 </template>
 
@@ -48,35 +54,6 @@ const greenStyle = {
 </script>
 
 <style lang="postcss">
-.background {
-  border-top: 1px theme(colors.gray.400) solid;
-  border-bottom: 1px theme(colors.gray.400) solid;
-  width: 100%;
-  height: 50%;
-  grid-column: 2 / span 5;
-  grid-row: 1;
-  align-self: center;
-  position: relative;
-}
-
-.y-axis {
-  display: flex;
-  flex-direction: column;
-  grid-area: y;
-  justify-content: space-between;
-  padding-bottom: 30px;
-  margin-top: -10px;
-}
-
-.top-bottom-borders {
-  grid-column: 2 / span 5;
-  grid-row: 1;
-  justify-self: center;
-  align-self: center;
-  height: 200px;
-  width: 100%;
-}
-
 .background::before {
   content: "";
   border-top: 1px theme(colors.gray.400) solid;
@@ -85,35 +62,4 @@ const greenStyle = {
   position: absolute;
   top: 50%;
 }
-
-.horizontal-bar-chart {
-  padding-top: 10px;
-  display: grid;
-  grid-template-columns: 50px 1fr 300px 4fr 300px 1fr;
-  grid-template-rows: 200px 40px;
-  grid-template-areas:
-    "y . n . p ."
-    "y . l . r .";
-}
-
-.positive-chart {
-  grid-area: p;
-  align-self: flex-end;
-  box-sizing: border-box;
-}
-.negative-chart {
-  grid-area: n;
-  align-self: flex-end;
-  padding-top: 10px;
-}
-.positive-legend {
-  grid-area: l;
-  justify-self: center;
-  align-self: center;
-}
-.negative-legend {
-  grid-area: r;
-  justify-self: center;
-  align-self: center;
-}
 </style>