Fancy data mobile viewport

COS301-SE-2023 · Oct 26, 2023 · 20da355 · 20da355
1 parent f40d298
commit 20da355
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 7 deletions.
diff --git a/src/apps/blazor-app/Components/Dashboard/FancyData/ElevationGraph.razor b/src/apps/blazor-app/Components/Dashboard/FancyData/ElevationGraph.razor
@@ -2,7 +2,7 @@
 
 @namespace BlazorApp.FancyData
 
-<div>
+<div class="w-full -ml-5">
     <Chart Config="lineConfig" />
 </div>
 
@@ -53,11 +53,12 @@
                             ScaleLabel = new ScaleLabel
                             {
                                 LabelString = "Height",
-                                Display = true,
+                                Display = false,
                             },
                             Ticks = new LinearCartesianTicks
                             {
                                 BeginAtZero = true,
+                                Display = false, 
                             }
                         }
                     },
@@ -235,7 +236,17 @@
                 {
                     Ticks = new LinearCartesianTicks
                     {
-                        Max = maxY 
+                        Max = maxY ,
+                        Display = false,
+                    },
+                    GridLines = new GridLines
+                    {
+                        Display = false,
+                    }, 
+                    ScaleLabel = new ScaleLabel
+                    {
+                        LabelString = "Height",
+                        Display = false,
                     },
                 }
             }, 

diff --git a/src/apps/blazor-app/Components/Dashboard/FancyData/FancyData.razor b/src/apps/blazor-app/Components/Dashboard/FancyData/FancyData.razor
@@ -52,7 +52,7 @@
                 <AnnualFluxSkeleton />
             }
 
-            <div class="flex flex-col gap-4 justify-center md:w-1/2 text-sm md:text-xl">
+            <div class="flex mt-8 md:mt-0 flex-col gap-4 justify-center md:w-1/2 text-sm md:text-xl">
             @if (solarPanelsDataReceived)
             {
                 <EnviromentImpact annualKWGenerated="@annualKWGenerated" />
@@ -153,7 +153,7 @@
             } else {
                 <MonthlyFluxSkeleton />
             }
-            <div class="w-full sm:w-auto lg:w-2/3">
+            <div class="w-full mt-8 md:mt-0 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>
@@ -167,7 +167,7 @@
                      The red dot in the center represents the address you typed in.</p>
                      <ElevationGraph elevationValues="@horisonElevationData" />
             </div>
-            <Card css="md:w-1/3 flex flex-col gap-10">
+            <Card css="md:w-1/3 mt-8 md:mt-0 mb-8 flex flex-col gap-10">
                 <div class="flex gap-3">
                     <div class="w-5 h-5 border border-primary-200 rounded-lg bg-red-accent-500 my-auto"></div>
                     <p class="text-base text-primary-800 my-auto">Your location</p>

diff --git a/src/apps/blazor-app/Pages/Dashboard.razor b/src/apps/blazor-app/Pages/Dashboard.razor
@@ -54,7 +54,10 @@
                                             }
                                         }
                                     }
-                                    <Card css="w-full mb-5">
+                                    <div css="w-full block md:hidden mb-5">
+                                        <FancyData @ref="fancyDataComponent" currentLocationData="currentLocationData"  numSolarPanels="@numSolarPanels" cancellationTokenSource="@cancellationTokenSource"/>
+                                    </div>
+                                    <Card css="w-full hidden md:block mb-5">
                                         <FancyData @ref="fancyDataComponent" currentLocationData="currentLocationData"  numSolarPanels="@numSolarPanels" cancellationTokenSource="@cancellationTokenSource"/>
                                     </Card>
                                 }

diff --git a/src/apps/blazor-app/wwwroot/css/app.css b/src/apps/blazor-app/wwwroot/css/app.css
@@ -1295,6 +1295,14 @@ video {
   margin-top: 20rem;
 }
 
+.-ml-8 {
+  margin-left: -2rem;
+}
+
+.-ml-5 {
+  margin-left: -1.25rem;
+}
+
 .block {
   display: block;
 }