From cfdab9bc5bf6d8ad6c64d28104e9932067e83953 Mon Sep 17 00:00:00 2001
From: Jesse Naidoo <jessenaidoo24@gmail.com>
Date: Wed, 25 Oct 2023 15:39:00 +0200
Subject: [PATCH] Fixed Fancy data layout

---
 .../FancyData/EnviromentImpact.razor          | 14 ++++----
 .../Dashboard/FancyData/FancyData.razor       | 18 +++++-----
 src/apps/blazor-app/wwwroot/css/app.css       | 33 ++++++++++++++++---
 3 files changed, 45 insertions(+), 20 deletions(-)

diff --git a/src/apps/blazor-app/Components/Dashboard/FancyData/EnviromentImpact.razor b/src/apps/blazor-app/Components/Dashboard/FancyData/EnviromentImpact.razor
index 0ef8e6f9..b4d40d88 100644
--- a/src/apps/blazor-app/Components/Dashboard/FancyData/EnviromentImpact.razor
+++ b/src/apps/blazor-app/Components/Dashboard/FancyData/EnviromentImpact.razor
@@ -2,15 +2,15 @@
 @inject BlazorApp.Data.TooltipService tooltipService
 @namespace BlazorApp.EnviromentImpact
 
-<Card css="w-full gap-10 flex flex-col">
-    <h1 class="text-primary-950 font-semibold text-start text-xl">Enviroment Impact Over 10 Years</h1>
+<Card css="w-full gap-10 flex flex-col text-sm md:text-xl">
+    <h1 class="text-primary-950 font-semibold text-start">Enviroment Impact Over 10 Years</h1>
     <div class="w-full grid grid-cols-2 gap-2">
 
         <div class="flex w-full gap-4 has-tooltip">
             <Tooltip>
                 <p>@tooltipService.SetCustomTooltip("Total power generated")</p>
             </Tooltip>
-            <Image ImageName="Bolt-Circle.svg" css="w-8 h-8" alt="Bolt"/>
+            <Image ImageName="Bolt-Circle.svg" css="w-5 h-5 md:w-8 md:h-8 " alt="Bolt"/>
             <p class="my-auto">@totalPowerSaved kW</p>
         </div>
 
@@ -18,7 +18,7 @@
             <Tooltip>
                 <p>@tooltipService.SetCustomTooltip("Total Carbon not emmitted ")</p>
             </Tooltip>
-            <Image ImageName="CO2.svg" css="w-8 h-8" alt="CO2"/>
+            <Image ImageName="CO2.svg" css="w-5 h-5 md:w-8 md:h-8 " alt="CO2"/>
             <p class="my-auto">@totalCO2Saved kg</p>
         </div>
 
@@ -26,7 +26,7 @@
              <Tooltip>
                 <p>@tooltipService.SetCustomTooltip("Total water saved")</p>
             </Tooltip>
-            <Image ImageName="Waterdrops.svg" css="w-8 h-8" alt="Waterdrops"/>
+            <Image ImageName="Waterdrops.svg" css="w-5 h-5 md:w-8 md:h-8 " alt="Waterdrops"/>
             <p class="my-auto">@totalWaterSaved L</p>
         </div>
 
@@ -34,7 +34,7 @@
              <Tooltip>
                 <p>@tooltipService.SetCustomTooltip("Total coal not burnt")</p>
             </Tooltip>
-            <Image ImageName="Coal.svg" css="w-8 h-8" alt="Coal"/>
+            <Image ImageName="Coal.svg" css="w-5 h-5 md:w-8 md:h-8 " alt="Coal"/>
             <p class="my-auto">@totalCoalNotBurnt kg</p>
         </div>
         
@@ -42,7 +42,7 @@
              <Tooltip>
                 <p>@tooltipService.SetCustomTooltip("Total trees not cut down")</p>
             </Tooltip>
-            <Image ImageName="Tree.svg" css="w-8 h-8" alt="Tree"/>
+            <Image ImageName="Tree.svg" css="w-5 h-5 md:w-8 md:h-8 " alt="Tree"/>
             <p class="my-auto">@totalTreesPlanted</p>
         </div>
 
diff --git a/src/apps/blazor-app/Components/Dashboard/FancyData/FancyData.razor b/src/apps/blazor-app/Components/Dashboard/FancyData/FancyData.razor
index 29a3d399..52f287b6 100644
--- a/src/apps/blazor-app/Components/Dashboard/FancyData/FancyData.razor
+++ b/src/apps/blazor-app/Components/Dashboard/FancyData/FancyData.razor
@@ -34,7 +34,7 @@
         <div class="w-full md:flex justify-center items-center md:px-4 md:gap-2">
             @if (annualFluxDataReceived)
             {
-            <div class="flex md:w-1/2 flex-col gap-4 p-20">
+            <div class="flex md:w-1/2 flex-col gap-4 md:p-20">
                     <h1 class="text-primary-800 font-semibold text-center text-xl">Annual Flux Map</h1>
                     <p class="text-lg text-center text-gray-500">Visual representation of the annual sunlight exposure on your rooftop.</p>
                     <Image ImageName="@satteliteImageSrc" css="w-full sm:w-3/4 mx-auto md:w-full" alt="sattelite Image" />
@@ -53,13 +53,13 @@
                 <AnnualFluxSkeleton />
             }
 
-            <div class="flex flex-col gap-4 justify-center md:w-1/2">
+            <div class="flex flex-col gap-4 justify-center md:w-1/2 text-sm md:text-xl">
             @if (solarPanelsDataReceived)
             {
                 <EnviromentImpact annualKWGenerated="@annualKWGenerated" />
                 @if(solarPanelsData != null){
                     <Card css="w-full flex flex-col gap-10">
-                        <h1 class="text-primary-950 font-semibold text-start text-xl">Rooftop Stats</h1>
+                        <h1 class="text-primary-950 font-semibold text-start">Rooftop Stats</h1>
                         <div class="grid grid-cols-2 justify-center items-center gap-2">
                             @{
                                 double squaredArea = Math.Round(wholeroofstats!.areaMeters2);
@@ -72,7 +72,7 @@
                                 <Tooltip>
                                     <p>@tooltipService.SetCustomTooltip("Rooftop area")</p>
                                 </Tooltip>
-                                <Image ImageName="Home.svg" alt="Home Icon" css="w-8 h-8" />
+                                <Image ImageName="Home.svg" alt="Home Icon" css="w-5 h-5 md:w-8 md:h-8" />
                                 <p class="my-auto">@squaredArea m&sup2;</p>
                             </div>
 
@@ -80,7 +80,7 @@
                                 <Tooltip>
                                     <p>@tooltipService.SetCustomTooltip("Max solar panels that will fit")</p>
                                 </Tooltip>
-                                <Image ImageName="SolarPanels.svg" alt="Solar Panels Icon" css="w-8 h-8" />
+                                <Image ImageName="SolarPanels.svg" alt="Solar Panels Icon" css="w-5 h-5 md:w-8 md:h-8" />
                                 <p class="my-auto">@solarPanelsData!.solarPotential!.maxArrayPanelsCount</p>
                             </div>
 
@@ -88,7 +88,7 @@
                                 <Tooltip>
                                     <p>@tooltipService.SetCustomTooltip("Area of the roof, suitable for solar panels")</p>
                                 </Tooltip>
-                                <Image ImageName="Area.svg" alt="Area Icon" css="w-8 h-8" />
+                                <Image ImageName="Area.svg" alt="Area Icon" css="w-5 h-5 md:w-8 md:h-8" />
                                 <p class="my-auto">@maxArraArea m&sup2;</p>
                             </div>
 
@@ -96,7 +96,7 @@
                                 <Tooltip>
                                     <p>@tooltipService.SetCustomTooltip("Total usable sunlight times per day")</p>
                                 </Tooltip>
-                                <Image ImageName="Sun-outline.svg" alt="Sun Icon" css="w-8 h-8" />
+                                <Image ImageName="Sun-outline.svg" alt="Sun Icon" css="w-5 h-5 md:w-8 md:h-8" />
                                 <p class="my-auto">@maxHoursSunlightPerDay h</p>
                             </div>
                         </div>
@@ -113,7 +113,7 @@
             }
         </div>
     </div>
-        <div class="w-full lg:flex justify-center items-center px-4 gap-4 mt-5">
+        <div class="w-full lg:flex justify-center items-center md:px-4 gap-4 mt-5">
             @if (monthlyFluxDataReceived)
             {
                 <div class="flex md:w-1/2 md:mx-auto lg:w-1/3 flex-col justify-center items-center gap-3">
@@ -142,7 +142,7 @@
             } else {
                 <MonthlyFluxSkeleton />
             }
-            <div class="lg:w-2/3">
+            <div class="w-full sm:w-auto lg:w-2/3">
                     <h1 class="text-center text-primary-800 font-semibold text-xl">Solar Irradiance Per Month</h1>
                     <SolarIrradiationPerMonth currentMonth="@currentImageIndex" monthlySolarRadiation="@solarRadiationPerMonth" animated="false" />
             </div>
diff --git a/src/apps/blazor-app/wwwroot/css/app.css b/src/apps/blazor-app/wwwroot/css/app.css
index 50fa62c2..6407e983 100644
--- a/src/apps/blazor-app/wwwroot/css/app.css
+++ b/src/apps/blazor-app/wwwroot/css/app.css
@@ -1220,10 +1220,6 @@ video {
   margin-top: 2.5rem;
 }
 
-.mt-12 {
-  margin-top: 3rem;
-}
-
 .mt-14 {
   margin-top: 3.5rem;
 }
@@ -1481,6 +1477,10 @@ video {
   height: 100vh;
 }
 
+.h-44 {
+  height: 11rem;
+}
+
 .max-h-96 {
   max-height: 24rem;
 }
@@ -4194,10 +4194,18 @@ html {
     height: 400px;
   }
 
+  .sm\:h-auto {
+    height: auto;
+  }
+
   .sm\:w-3\/4 {
     width: 75%;
   }
 
+  .sm\:w-auto {
+    width: auto;
+  }
+
   .sm\:max-w-sm {
     max-width: 24rem;
   }
@@ -4413,6 +4421,10 @@ html {
     height: 18rem;
   }
 
+  .md\:h-8 {
+    height: 2rem;
+  }
+
   .md\:h-80 {
     height: 20rem;
   }
@@ -4446,6 +4458,10 @@ html {
     width: 40%;
   }
 
+  .md\:w-8 {
+    width: 2rem;
+  }
+
   .md\:w-\[45\%\] {
     width: 45%;
   }
@@ -4529,6 +4545,10 @@ html {
     margin-bottom: calc(0px * var(--tw-space-y-reverse));
   }
 
+  .md\:p-20 {
+    padding: 5rem;
+  }
+
   .md\:px-20 {
     padding-left: 5rem;
     padding-right: 5rem;
@@ -4561,6 +4581,11 @@ html {
     font-size: 3rem;
     line-height: 1;
   }
+
+  .md\:text-xl {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
 }
 
 @media (min-width: 1024px) {