style: updated main layout (no mobile support yet)

This commit is contained in:
Mia Rose Winter 2024-01-11 16:48:11 +01:00
parent 45fca3253b
commit ae0f9c6796
Signed by: miawinter
GPG key ID: 4B6F6A83178F595E
8 changed files with 107 additions and 89 deletions

View file

@ -1,17 +1,16 @@
@inherits LayoutComponentBase @inherits LayoutComponentBase
<div class="page"> <div class="flex flex-col h-screen">
<div class="sidebar"> <NavMenu />
<NavMenu />
</div>
<main> <main class="flex-1 container mx-auto px-12 py-8">
<div class="top-row px-4"> @Body
<a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a> </main>
</div>
<footer class="footer footer-center p-4 bg-base-300 text-base-content">
<article class="content px-4"> <span class="block">
@Body Powered by
</article> <a class="link link-primary" target="_blank" href="https://github.com/miawinter98/Wave">Wave</a>
</main> </span>
</footer>
</div> </div>

View file

@ -2,85 +2,69 @@
@inject NavigationManager NavigationManager @inject NavigationManager NavigationManager
<div class="top-row ps-3 navbar navbar-dark"> <header>
<div class="container-fluid"> <div class="navbar bg-base-200">
<a class="navbar-brand" href="">Wave</a> <div class="navbar-start">
</div> <picture class="h-12">
</div> <source type="image/jxl" srcset="img/logo.jxl" />
<source type="image/webp" srcset="img/logo.webp" />
<input type="checkbox" title="Navigation menu" class="navbar-toggler" /> <source type="image/svg+xml" scrset="img/logo.svg" />
<img class="max-h-full object-contain object-left" src="img/logo.png" alt="Wave" />
<div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()"> </picture>
<nav class="flex-column"> </div>
<div class="nav-item px-3"> <div class="navbar-center"></div>
<NavLink class="nav-link" href="" Match="NavLinkMatch.All"> <div class="navbar-end">
<span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home <ul class="menu menu-horizontal">
</NavLink> <AuthorizeView>
</div> <Authorized>
<li>
<div class="nav-item px-3"> <NavLink ActiveClass="tab-active" class="tab" href="Account/Manage">@context.User.Identity?.Name</NavLink>
<NavLink class="nav-link" href="weather"> </li>
<span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Weather <li>
</NavLink> <form action="Account/Logout" method="post">
</div> <AntiforgeryToken />
<input type="hidden" name="ReturnUrl" value="@_currentUrl" />
<div class="nav-item px-3"> <button type="submit" class="">Logout</button>
<NavLink class="nav-link" href="auth"> </form>
<span class="bi bi-lock-nav-menu" aria-hidden="true"></span> Auth Required </li>
</NavLink> </Authorized>
</div> <NotAuthorized>
<li>
<AuthorizeView> <NavLink href="Account/Login">Login</NavLink>
<Authorized> </li>
<div class="nav-item px-3"> <li>
<NavLink class="nav-link" href="Account/Manage"> <NavLink href="Account/Register">Register</NavLink>
<span class="bi bi-person-fill-nav-menu" aria-hidden="true"></span> @context.User.Identity?.Name </li>
</NavLink> </NotAuthorized>
</div> </AuthorizeView>
<div class="nav-item px-3"> </ul>
<form action="Account/Logout" method="post"> </div>
<AntiforgeryToken /> </div>
<input type="hidden" name="ReturnUrl" value="@currentUrl" /> <div class="flex justify-center bg-base-300">
<button type="submit" class="nav-link"> <nav class="tabs tabs-bordered">
<span class="bi bi-arrow-bar-left-nav-menu" aria-hidden="true"></span> Logout <NavLink ActiveClass="tab-active" class="tab" href="" Match="NavLinkMatch.All">Home</NavLink>
</button> <NavLink ActiveClass="tab-active" class="tab" href="weather">Weather</NavLink>
</form> <NavLink ActiveClass="tab-active" class="tab" href="auth">Auth Required</NavLink>
</div> </nav>
</Authorized> </div>
<NotAuthorized> </header>
<div class="nav-item px-3">
<NavLink class="nav-link" href="Account/Register">
<span class="bi bi-person-nav-menu" aria-hidden="true"></span> Register
</NavLink>
</div>
<div class="nav-item px-3">
<NavLink class="nav-link" href="Account/Login">
<span class="bi bi-person-badge-nav-menu" aria-hidden="true"></span> Login
</NavLink>
</div>
</NotAuthorized>
</AuthorizeView>
</nav>
</div>
@code { @code {
private string? currentUrl; private string? _currentUrl;
protected override void OnInitialized() protected override void OnInitialized() {
{ _currentUrl = NavigationManager.ToBaseRelativePath(NavigationManager.Uri);
currentUrl = NavigationManager.ToBaseRelativePath(NavigationManager.Uri); NavigationManager.LocationChanged += OnLocationChanged;
NavigationManager.LocationChanged += OnLocationChanged; }
}
private void OnLocationChanged(object? sender, LocationChangedEventArgs e) private void OnLocationChanged(object? sender, LocationChangedEventArgs e) {
{ _currentUrl = NavigationManager.ToBaseRelativePath(e.Location);
currentUrl = NavigationManager.ToBaseRelativePath(e.Location); StateHasChanged();
StateHasChanged(); }
}
public void Dispose() {
NavigationManager.LocationChanged -= OnLocationChanged;
}
public void Dispose()
{
NavigationManager.LocationChanged -= OnLocationChanged;
}
} }

View file

@ -16,4 +16,8 @@
<PackageReference Include="Microsoft.VisualStudio.Azure.Containers.Tools.Targets" Version="1.19.6" /> <PackageReference Include="Microsoft.VisualStudio.Azure.Containers.Tools.Targets" Version="1.19.6" />
</ItemGroup> </ItemGroup>
<ItemGroup>
<Folder Include="wwwroot\img\" />
</ItemGroup>
</Project> </Project>

File diff suppressed because one or more lines are too long

BIN
Wave/wwwroot/img/logo.jxl Normal file

Binary file not shown.

BIN
Wave/wwwroot/img/logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

31
Wave/wwwroot/img/logo.svg Normal file
View file

@ -0,0 +1,31 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 1000 400" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g id="Icon">
<rect x="39.887" y="40" width="320.113" height="320" style="fill:#fff132;"/>
<rect x="40" y="40" width="320.113" height="320" style="fill:none;"/>
<clipPath id="_clip1">
<rect x="40" y="40" width="320.113" height="320"/>
</clipPath>
<g clip-path="url(#_clip1)">
<path d="M360.113,360L40.113,360L40.113,239.079C40.113,239.079 73.055,257.202 102.556,232.914C129.983,279.98 302.014,274.502 360.113,275.084L360.113,360Z" style="fill:#d4f5ff;"/>
<path d="M168.807,349.41C102.256,337.863 51.582,279.774 51.582,209.943C51.582,131.817 115.01,68.389 193.136,68.389C261.346,68.389 318.352,116.738 331.724,181.006C311.113,163.066 284.188,152.199 254.745,152.199C189.981,152.199 137.401,204.779 137.401,269.542C137.401,300.381 149.324,328.458 168.807,349.41Z" style="fill:#75deff;"/>
<clipPath id="_clip2">
<path d="M168.807,349.41C102.256,337.863 51.582,279.774 51.582,209.943C51.582,131.817 115.01,68.389 193.136,68.389C261.346,68.389 318.352,116.738 331.724,181.006C311.113,163.066 284.188,152.199 254.745,152.199C189.981,152.199 137.401,204.779 137.401,269.542C137.401,300.381 149.324,328.458 168.807,349.41Z"/>
</clipPath>
<g clip-path="url(#_clip2)">
<path d="M203.197,416.753C136.647,405.205 85.972,347.117 85.972,277.285C85.972,199.16 149.4,135.731 227.526,135.731C295.736,135.731 352.743,184.081 366.114,248.348C345.503,230.409 318.578,219.541 289.135,219.541C224.371,219.541 171.792,272.121 171.792,336.885C171.792,367.724 183.714,395.801 203.197,416.753Z" style="fill:#d4f5ff;"/>
<path d="M150.362,301.351C83.811,289.803 33.137,231.714 33.137,161.883C33.137,83.757 96.565,20.329 174.691,20.329C242.901,20.329 299.907,68.679 313.279,132.946C292.668,115.007 265.743,104.139 236.3,104.139C171.536,104.139 118.956,156.719 118.956,221.482C118.956,252.322 130.879,280.398 150.362,301.351Z" style="fill:#00bdf8;"/>
</g>
<path d="M360.113,391.226L40.113,391.226L40.113,270.305C40.113,270.305 86.866,257.202 116.367,232.914C143.793,279.98 302.014,293.452 360.113,294.034L360.113,391.226Z" style="fill:#75deff;"/>
<path d="M360.113,430.613L40.113,430.613L40,228.822C40,228.822 88.912,253.11 118.413,228.822C122.708,252.422 128.813,264.451 154.793,278.798C213.771,311.366 319.781,311.666 360.113,312.07L360.113,430.613Z" style="fill:#00bdf8;"/>
</g>
<path d="M360.113,40L360.113,360L40,360L40,40L360.113,40ZM340.509,59.604L59.717,59.604L59.717,340.396L340.509,340.396L340.509,59.604Z" style="fill:#fa769d;"/>
</g>
<g>
<path d="M481.055,302.509L396.856,108.35L424.662,108.35L495.927,277.998L489.868,277.998L543.196,108.35L572.865,108.35L625.642,278.274L620.409,278.274L691.785,108.35L718.654,108.35L634.455,302.509L612.698,302.509L556.24,138.369L559.545,138.369L502.261,302.509L481.055,302.509Z" style="fill:#fff132;fill-rule:nonzero;"/>
<path d="M643.287,302.509L702.626,167.562L716.982,167.562L776.32,302.509L759.284,302.509L742.823,264.035L750.862,268.82L668.554,268.82L676.593,264.035L660.131,302.509L643.287,302.509ZM709.516,186.512L678.89,258.484L674.296,254.847L745.12,254.847L740.526,258.484L710.091,186.512L709.516,186.512Z" style="fill:#00bdf8;fill-rule:nonzero;"/>
<path d="M786.631,302.509L728.058,167.562L745.668,167.562L796.202,286.239L792.374,286.239L842.716,167.562L859.943,167.562L801.37,302.509L786.631,302.509Z" style="fill:#fa769d;fill-rule:nonzero;"/>
<path d="M863.006,302.509L863.006,167.562L949.717,167.562L949.717,181.535L879.276,181.535L879.276,227.092L945.697,227.092L945.697,241.065L879.276,241.065L879.276,288.536L949.717,288.536L949.717,302.509L863.006,302.509Z" style="fill:#75deff;fill-rule:nonzero;"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 4.2 KiB

BIN
Wave/wwwroot/img/logo.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB