Skip to content

Commit

Permalink
Fixed Fancy data layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@JNaid00
JNaid00 committed Oct 25, 2023
1 parent 6aacfac commit cfdab9b
Show file tree
Hide file tree
Showing 3 changed files with 45 additions and 20 deletions.
14 changes: 7 additions & 7 deletions src/apps/blazor-app/Components/Dashboard/FancyData/EnviromentImpact.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,47 +2,47 @@
@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>

<div class="flex w-full gap-4 has-tooltip">
<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>

<div class="flex w-full gap-4 has-tooltip">
<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>

<div class="flex w-full gap-4 has-tooltip">
<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>

<div class="flex w-full gap-4 has-tooltip">
<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>

Expand Down
18 changes: 9 additions & 9 deletions src/apps/blazor-app/Components/Dashboard/FancyData/FancyData.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand All @@ -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);
Expand All @@ -72,31 +72,31 @@
<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>

<div class="flex w-full gap-4 has-tooltip">
<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>

<div class="flex w-full gap-4 has-tooltip">
<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>

<div class="flex w-full gap-4 has-tooltip">
<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>
Expand All @@ -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">
Expand Down Expand Up @@ -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>
Expand Down
33 changes: 29 additions & 4 deletions src/apps/blazor-app/wwwroot/css/app.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1220,10 +1220,6 @@ video {
margin-top: 2.5rem;
}

.mt-12 {
margin-top: 3rem;
}

.mt-14 {
margin-top: 3.5rem;
}
Expand Down Expand Up @@ -1481,6 +1477,10 @@ video {
height: 100vh;
}

.h-44 {
height: 11rem;
}

.max-h-96 {
max-height: 24rem;
}
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -4413,6 +4421,10 @@ html {
height: 18rem;
}

.md\:h-8 {
height: 2rem;
}

.md\:h-80 {
height: 20rem;
}
Expand Down Expand Up @@ -4446,6 +4458,10 @@ html {
width: 40%;
}

.md\:w-8 {
width: 2rem;
}

.md\:w-\[45\%\] {
width: 45%;
}
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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) {
Expand Down

0 comments on commit cfdab9b

Please sign in to comment.