winter-software/Wave
winter-software/Wave
1
0
Fork 0
Code Issues Wiki Activity

style: updated main layout (no mobile support yet)

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

23
Wave/Components/Layout/MainLayout.razor
View file

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

134
Wave/Components/Layout/NavMenu.razor
View file

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

4
Wave/Wave.csproj
View file

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

2
Wave/wwwroot/css/main.min.css vendored
View file

File diff suppressed because one or more lines are too long

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

Binary file not shown.

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

Binary file not shown.
Side by side

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>
Side by side

After

Width:  |  Height:  |  Size: 4.2 KiB

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 18 KiB