From 5680f471827002b86a71de662733d6ccbe29990b Mon Sep 17 00:00:00 2001
From: Manuel Roth <manuelroth@hotmail.ch>
Date: Mon, 2 Oct 2023 10:48:20 +0200
Subject: [PATCH] Add rain bar

---
 client/src/lib/SingleDay.svelte       | 13 +++++++++++--
 client/src/lib/WeatherOverview.svelte |  2 +-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/client/src/lib/SingleDay.svelte b/client/src/lib/SingleDay.svelte
index a4d7505..db51964 100644
--- a/client/src/lib/SingleDay.svelte
+++ b/client/src/lib/SingleDay.svelte
@@ -8,6 +8,8 @@
   export let rainInMM;
   export let size;
 
+  rainInMM = 8;
+
   const isNow = currentTime === "Jetzt";
   const fontWeight = isNow ? "font-bold" : "font-light";
 </script>
@@ -15,8 +17,15 @@
 <div class="flex flex-col items-center">
   <div class={fontWeight}>{currentTime}</div>
   <WeatherIcons {symbol} {dimensions} />
-  <div>{dailyTemp}°</div>
+  <div class="mb-4">{dailyTemp}°</div>
   {#if size === "L"}
-    <div>{rainInMM}</div>
+    <div class="h-8 w-full flex flex-col-reverse items-center">
+      <div
+        class="bg-sky-500 w-1/2 max-h-8 relative flex flex-col items-center"
+        style={`height: ${rainInMM * 2.5}px;`}
+      >
+        <span class="absolute font-light">{rainInMM}</span>
+      </div>
+    </div>
   {/if}
 </div>
diff --git a/client/src/lib/WeatherOverview.svelte b/client/src/lib/WeatherOverview.svelte
index 01db645..cd59c5b 100644
--- a/client/src/lib/WeatherOverview.svelte
+++ b/client/src/lib/WeatherOverview.svelte
@@ -40,7 +40,7 @@
   </div>
   {#if ["L", "M"].includes(size.toUpperCase())}
     <div
-      class="flex flex-row h-20 ml-6 space-x-6 overflow-scroll text-xs font-bold scrollbar-hide"
+      class="flex flex-row ml-6 space-x-6 overflow-scroll text-xs font-bold scrollbar-hide"
     >
       {#each weatherData.hours as hours, index}
         {#if index >= currentIndex}