Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feature responsive #147

Merged
merged 14 commits into from
Oct 22, 2023
Merged

Feature responsive #147

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
4b48493
Fixed Mobile Menubar
francoissmith Oct 10, 2023
b84a4b3
Minor changes to autocomplete, accordion and home page
francoissmith Oct 10, 2023
61e9753
More minor responsiveness changes
francoissmith Oct 10, 2023
41e6250
Changed Button implementation
francoissmith Oct 11, 2023
64c5d29
Fixed tutorial overlay
francoissmith Oct 21, 2023
af28c8d
Added Build Your Home Skeleton Loaders.
francoissmith Oct 21, 2023
2db7ea5
Fancy data is responsive
JNaid00 Oct 21, 2023
cdcac18
Update FancyData.razor
JNaid00 Oct 21, 2023
05490fc
Fixed some errors
francoissmith Oct 21, 2023
cded593
ready for demo
francoissmith Oct 21, 2023
91f0d98
Finally fixed slider size issue
francoissmith Oct 22, 2023
80e0b62
Calculations responsiveness done ready for variants
francoissmith Oct 22, 2023
0fa00e7
Fixed Finance Page
francoissmith Oct 22, 2023
0c6d61a
Merge branch 'development' into feature-responsive
francoissmith Oct 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions src/apps/blazor-app/Components/Admin/ApplianceEntry.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,12 +20,12 @@
<td class="px-6 py-4 flex gap-3">
<div onclick="@(() => toggleRecordState("save"))">
<Button style="pill">
<content>Save</content>
<p>Save</p>
</Button>
</div>
<div onclick="@(() => toggleRecordState())">
<Button style="pill-danger">
<content>Cancel</content>
<p>Cancel</p>
</Button>
</div>
</td>
Expand All @@ -42,7 +42,7 @@
</td>
<td onclick="@(() => toggleRecordState())" class="px-6 py-4 flex gap-3">
<Button style="pill">
<content>Edit</content>
<p>Edit</p>
</Button>
</td>
}
Expand Down
6 changes: 3 additions & 3 deletions src/apps/blazor-app/Components/Admin/KeyEntry.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,12 +41,12 @@
<td class="px-6 py-4 flex gap-3">
<div onclick="@(() => toggleRecordState("save"))">
<Button style="pill">
<content>Save</content>
<p>Save</p>
</Button>
</div>
<div onclick="@(() => toggleRecordState())">
<Button style="pill-danger">
<content>Cancel</content>
<p>Cancel</p>
</Button>
</div>
</td>
Expand Down Expand Up @@ -75,7 +75,7 @@
</td>
<td onclick="@(() => toggleRecordState())" class="px-6 py-4 flex gap-3">
<Button style="pill">
<content>Edit</content>
<p>Edit</p>
</Button>
</td>
}
Expand Down
6 changes: 3 additions & 3 deletions src/apps/blazor-app/Components/Admin/ProductEntry.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,12 +25,12 @@
<td class="px-6 py-4 flex gap-3">
<div onclick="@(() => toggleRecordState("save"))">
<Button style="pill">
<content>Save</content>
<p>Save</p>
</Button>
</div>
<div onclick="@(() => toggleRecordState())">
<Button style="pill-danger">
<content>Cancel</content>
<p>Cancel</p>
</Button>
</div>
</td>
Expand All @@ -50,7 +50,7 @@
</td>
<td onclick="@(() => toggleRecordState())" class="px-6 py-4 flex gap-3">
<Button style="pill">
<content>Edit</content>
<p>Edit</p>
</Button>
</td>
}
Expand Down
470 changes: 295 additions & 175 deletions src/apps/blazor-app/Components/Advanced/BuildYourHome.razor
View file
Open in desktop

Large diffs are not rendered by default.

19 changes: 14 additions & 5 deletions src/apps/blazor-app/Components/Advanced/Finanace.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,20 @@
<Subscript><p class="text-center">All calculations are derived from the monthly bill. Please keep in mind that these calculations are approximate, and costs may vary among different solar installers."</p></Subscript>
</Heading>

<div class="w-full flex justify-center">
<div class="flex flex-col gap-2 items-center justify-center p-4 w-11/12 rounded-3xl bg-gradient-to-tr from-primary-400 to-primary-500">
<p class="text-center text-white font-semibold">Select your monthly bill:</p>
<h1 class="text-center text-4xl font-black w-fit text-transparent bg-clip-text bg-gradient-to-l from-primary-100 to-primary-200">R @monthlyBill</h1>
<input type="range" class="accent-primary-800 cursor-pointer w-3/4" min="1000" max="7000" step="100" @bind="monthlyBill" @oninput="ResetTimer" />
<div class="w-full flex px-20">
<div class="flex flex-col gap-4 items-center justify-center p-4 w-full rounded-3xl bg-gradient-to-tr from-primary-400 to-primary-500">
<div class="flex justify-center items-center">
<div class="flex flex-col gap-2 items-center justify-center">
<p class="text-center text-white font-semibold">Select your monthly bill:</p>
<h1 class="text-center text-4xl font-black w-fit text-transparent bg-clip-text bg-gradient-to-l from-primary-100 to-primary-200">R @monthlyBill</h1>
</div>
<p class="text-2xl text-center text-primary-900 font-black self-center mx-4">OR</p>
<div class="flex flex-col gap-2 items-center justify-center">
<p class="text-center text-white font-semibold">Select your monthly electricity usage:</p>
<h1 class="text-center text-4xl font-black w-fit text-transparent bg-clip-text bg-gradient-to-l from-primary-100 to-primary-200">@monthlyUsage kWh</h1>
</div>
</div>
<input type="range" class="accent-primary-800 cursor-pointer w-3/4" min="1000" max="7000" step="100" @bind="monthlyBill" @oninput="HandleBillSliderChange" />
</div>
</div>

Expand Down
6 changes: 3 additions & 3 deletions src/apps/blazor-app/Components/Advanced/Results.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@
<div class="flex flex-row gap-4 justify-end">
<div @onclick="ModalPopupSolarScore.Dismiss">
<Button style="outline">
<content>Dismiss</content>
<p>Dismiss</p>
</Button>
</div>
</div>
Expand All @@ -106,7 +106,7 @@
<div class="flex flex-row gap-4 justify-end">
<div @onclick="ModalPopupHours.Dismiss">
<Button style="outline">
<content>Dismiss</content>
<p>Dismiss</p>
</Button>
</div>
</div>
Expand All @@ -117,7 +117,7 @@
<div class="flex flex-row gap-4 justify-end">
<div @onclick="ModalPopupAvg.Dismiss">
<Button style="outline">
<content>Dismiss</content>
<p>Dismiss</p>
</Button>
</div>
</div>
Expand Down
13 changes: 13 additions & 0 deletions src/apps/blazor-app/Components/Advanced/Skeletons/AppliancesSkeleton.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<div class="justify-center">
<div class="flex bg-gray-100 shadow-md rounded-3xl mx-auto p-3 w-[80px] h-[80px] animate-pulse">
<svg class="w-14 h-14 text-gray-200" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
viewBox="0 0 20 18">
<path
d="M18 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-5.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm4.376 10.481A1 1 0 0 1 16 15H4a1 1 0 0 1-.895-1.447l3.5-7A1 1 0 0 1 7.468 6a.965.965 0 0 1 .9.5l2.775 4.757 1.546-1.887a1 1 0 0 1 1.618.1l2.541 4a1 1 0 0 1 .028 1.011Z" />
</svg>
</div>
<div role="status" class="max-w-sm animate-pulse mt-3">
<div class="h-2 bg-gray-200 rounded-full w-[100px] mb-2.5"></div>
<span class="sr-only">Loading...</span>
</div>
</div>
53 changes: 53 additions & 0 deletions src/apps/blazor-app/Components/Advanced/Skeletons/BatterySkeleton.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
<div class="flex flex-col w-full -mt-16 justify-center items-center gap-4">
<div class="mb-2 w-full flex flex-col">
<div class="justify-center">
<div
class="flex bg-gray-100 shadow-md rounded-3xl mx-auto w-[80px] h-[80px] animate-pulse items-center justify-center mt-3">
<svg class="w-14 h-14 text-gray-200" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
fill="currentColor" viewBox="0 0 20 18">
<path
d="M18 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-5.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm4.376 10.481A1 1 0 0 1 16 15H4a1 1 0 0 1-.895-1.447l3.5-7A1 1 0 0 1 7.468 6a.965.965 0 0 1 .9.5l2.775 4.757 1.546-1.887a1 1 0 0 1 1.618.1l2.541 4a1 1 0 0 1 .028 1.011Z" />
</svg>
</div>
<div role="status" class="max-w-sm animate-pulse mt-3">
<div class="h-3 bg-gray-200 rounded-full w-[120px] mb-2 mx-auto"></div>
<span class="sr-only">Loading...</span>
</div>
</div>
<div class="h-2 bg-gray-200 rounded-full w-[325px] mb-2.5 mx-auto animate-pulse mt-2"></div>
</div>
<div class="justify-start items-start">
<div class="flex">
<div class="flex flex-col gap-2 justify-center items-center w-full">
<div
class="flex bg-gray-100 shadow-md rounded-3xl mx-auto w-[80px] h-[120px] animate-pulse items-center justify-center">
<svg class="self-center w-14 h-14 text-gray-200" aria-hidden="true"
xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 18">
<path
d="M18 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-5.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm4.376 10.481A1 1 0 0 1 16 15H4a1 1 0 0 1-.895-1.447l3.5-7A1 1 0 0 1 7.468 6a.965.965 0 0 1 .9.5l2.775 4.757 1.546-1.887a1 1 0 0 1 1.618.1l2.541 4a1 1 0 0 1 .028 1.011Z" />
</svg>
</div>
<div role="status" class="max-w-sm animate-pulse mt-3">
<div class="h-3 bg-gray-200 rounded-full w-[140px] mb-2.5"></div>
<span class="sr-only">Loading...</span>
</div>
</div>
<div class="mx-auto">
<div
class="flex bg-gray-100 shadow-md rounded-3xl mx-auto w-[80px] h-[80px] animate-pulse items-center justify-center">
<svg class="w-14 h-14 text-gray-200" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
fill="currentColor" viewBox="0 0 20 18">
<path
d="M18 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-5.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm4.376 10.481A1 1 0 0 1 16 15H4a1 1 0 0 1-.895-1.447l3.5-7A1 1 0 0 1 7.468 6a.965.965 0 0 1 .9.5l2.775 4.757 1.546-1.887a1 1 0 0 1 1.618.1l2.541 4a1 1 0 0 1 .028 1.011Z" />
</svg>
</div>
<div role="status" class="max-w-sm animate-pulse mt-3">
<div class="h-3 bg-gray-200 rounded-full w-[110px] mb-2.5 mx-auto"></div>
<div class="h-3 bg-gray-200 rounded-full w-[80px] mb-2 mx-auto"></div>
<span class="sr-only">Loading...</span>
</div>
</div>
</div>
<div class="h-2 bg-gray-200 rounded-full w-[325px] mt-2.5 animate-pulse"></div>
</div>
</div>
2 changes: 1 addition & 1 deletion src/apps/blazor-app/Components/Advanced/Skeletons/MapSkeleton.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="flex items-center justify-center w-80 h-80 bg-gray-300 rounded animate-pulse">
<div class="flex items-center justify-center w-full h-60 lg:w-80 lg:h-80 bg-gray-300 rounded animate-pulse">
<svg class="w-10 h-10 text-gray-200" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
viewBox="0 0 20 18">
<path
Expand Down
29 changes: 29 additions & 0 deletions src/apps/blazor-app/Components/Advanced/Skeletons/SystemSizeSkeleton.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<div class="flex space-x-9">
<div class="flex bg-gray-100 shadow-md rounded-3xl p-3 w-[65px] h-[65px] animate-pulse">
<svg class="w-9 h-9 text-gray-200" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
viewBox="0 0 20 18">
<path
d="M18 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-5.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm4.376 10.481A1 1 0 0 1 16 15H4a1 1 0 0 1-.895-1.447l3.5-7A1 1 0 0 1 7.468 6a.965.965 0 0 1 .9.5l2.775 4.757 1.546-1.887a1 1 0 0 1 1.618.1l2.541 4a1 1 0 0 1 .028 1.011Z" />
</svg>
</div>
<div class="flex bg-gray-100 shadow-md rounded-3xl p-3 w-[65px] h-[65px] animate-pulse">
<svg class="w-9 h-9 text-gray-200" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
viewBox="0 0 20 18">
<path
d="M18 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-5.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm4.376 10.481A1 1 0 0 1 16 15H4a1 1 0 0 1-.895-1.447l3.5-7A1 1 0 0 1 7.468 6a.965.965 0 0 1 .9.5l2.775 4.757 1.546-1.887a1 1 0 0 1 1.618.1l2.541 4a1 1 0 0 1 .028 1.011Z" />
</svg>
</div>
<div class="flex bg-gray-100 shadow-md rounded-3xl p-3 w-[65px] h-[65px] animate-pulse">
<svg class="w-9 h-9 text-gray-200" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
viewBox="0 0 20 18">
<path
d="M18 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-5.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm4.376 10.481A1 1 0 0 1 16 15H4a1 1 0 0 1-.895-1.447l3.5-7A1 1 0 0 1 7.468 6a.965.965 0 0 1 .9.5l2.775 4.757 1.546-1.887a1 1 0 0 1 1.618.1l2.541 4a1 1 0 0 1 .028 1.011Z" />
</svg>
</div>
</div>
<div class="flex justify-center h-24">
<div role="status" class="max-w-sm animate-pulse">
<div class="h-8 bg-gray-200 rounded-full w-[105px] mb-2.5"></div>
<span class="sr-only">Loading...</span>
</div>
</div>
2 changes: 0 additions & 2 deletions src/apps/blazor-app/Components/Advanced/Variants.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,9 +59,7 @@
</div>
<div class="my-auto translate-y-2" @onclick='@(() => AddVariant(value!, selectedAppliance, powerUsage ))'>
<Button style="pill">
<content>
<p>Add Variant</p>
</content>
</Button>
</div>
</div>
Expand Down
3 changes: 0 additions & 3 deletions src/apps/blazor-app/Components/Base/AccordionItem.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,6 @@
<p class="@(item.active ? "" : "-translate-y-20") slide-in-active transition-all duration-300 text-primary-800">@item.content</p>
}
</div>
@if (item.active) {
<p class="@(item.active ? "" : "-translate-y-20") slide-in-active transition-all duration-300 text-primary-800">@item.content</p>
}
break;
default:
<div class="p-4 w-full transition-all duration-300 @(item.active ? "h-fit sm:h-52 md:h-48" : "h-fit sm:h-24 md:h-20") rounded-xl border-1 border-primary-500 flex flex-col gap-4">
Expand Down
4 changes: 2 additions & 2 deletions src/apps/blazor-app/Components/Base/Button.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<div class="@css">
<button class="@GetDynamicClasses() h-full w-full hover:shadow-md hover:-translate-y-1 transition-all duration-300 ease-in-out">
@content
@ChildContent
</button>
</div>

Expand All @@ -9,7 +9,7 @@
public string? style { get; set; }

[Parameter]
public RenderFragment? content { get; set; }
public RenderFragment? ChildContent { get; set; }

[Parameter]
public string? css { get; set; }
Expand Down
4 changes: 1 addition & 3 deletions src/apps/blazor-app/Components/Chatbot/Chatbot.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,9 +58,7 @@
@onkeypress="HandleKeyPress" />
<div @onclick="SendMessage">
<Button style="pill">
<content>
<p class="text-sm font-semibold hover:text-white">Send</p>
</content>
<p class="text-sm font-semibold hover:text-white">Send</p>
</Button>
</div>

Expand Down
Loading
Loading