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

Improved main layout, now fully responsive

Browse source
This commit is contained in:
Mia Rose Winter 2024-01-16 16:08:00 +01:00
parent c63b60a7de
commit 97c4e1294e
Signed by: miawinter
GPG key ID: 4B6F6A83178F595E
4 changed files with 102 additions and 87 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,16 +1,39 @@
@inherits LayoutComponentBase @inherits LayoutComponentBase
<div class="flex flex-col h-screen"> <div class="drawer md:drawer-open drawer-end">
<NavMenu /> <input id="main-drawer" type="checkbox" class="drawer-toggle" />
<div class="drawer-content">
<main class="flex-1 container mx-auto px-12 py-8"> </div>
@Body <div class="drawer-content">
</main> <div class="flex flex-col h-screen overflow-x-auto">
<header class="md:hidden p-4 flex justify-between bg-base-200">
<footer class="footer footer-center p-4 bg-base-300 text-base-content"> <div class="h-12">
<span class="block"> <LogoPartial />
Powered by </div>
<a class="link link-primary" target="_blank" href="https://github.com/miawinter98/Wave">Wave</a> <label for="main-drawer" class="btn btn-square btn-ghost drawer-button" title="open navigation">
</span> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
</footer> <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
</label>
</header>
<main class="flex-1 container mx-auto px-12 py-8">
@Body
</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>
</div>
<div class="drawer-side">
<label for="main-drawer" aria-label="close sidebar" class="drawer-overlay"></label>
<div class="bg-base-200 p-4 h-full flex flex-col gap-4">
<NavMenu />
</div>
</div>
</div> </div>

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

@ -3,80 +3,66 @@
@inject NavigationManager NavigationManager @inject NavigationManager NavigationManager
<header> <header class="h-12 hidden md:block">
<div class="navbar bg-base-200"> <LogoPartial />
<div class="navbar-start"> </header>
<picture class="h-12"> <nav class="flex-1">
<source type="image/jxl" srcset="img/logo.jxl" /> <ul class="menu">
<source type="image/webp" srcset="img/logo.webp" /> <li><NavLink href="" Match="NavLinkMatch.All">Home</NavLink></li>
<source type="image/svg+xml" scrset="img/logo.svg" /> <li><NavLink href="weather">Weather</NavLink></li>
<img class="max-h-full object-contain object-left" src="img/logo.png" alt="Wave" /> <li><NavLink href="auth">Auth Required</NavLink></li>
</picture> <AuthorizeView Policy="ArticleEditPermissions">
</div> <Authorized>
<div class="navbar-center"></div> <li><NavLink href="article/new">New Article</NavLink></li>
<div class="navbar-end"> </Authorized>
<ul class="menu menu-horizontal gap-2"> </AuthorizeView>
<AuthorizeView> </ul>
<Authorized> </nav>
<li> <ul class="menu gap-2">
<NavLink ActiveClass="tab-active" href="Account/Manage"> <AuthorizeView>
@context.User.Identity?.Name <Authorized>
</NavLink> <li class="flex content-center gap-2">
</li> <NavLink href="Account/Manage">
<li> @context.User.Identity?.Name
<form action="Account/Logout" method="post"> @if (context.User.FindFirst(ClaimTypes.NameIdentifier)?.Value is { } id) {
<AntiforgeryToken /> <div class="w-8">
<input type="hidden" name="ReturnUrl" value="@_currentUrl" /> <ProfilePictureComponent ProfileId="@id" />
<button type="submit" class="flex gap-2"> </div>
Logout }
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5"> </NavLink>
<path fill-rule="evenodd" d="M3 4.25A2.25 2.25 0 0 1 5.25 2h5.5A2.25 2.25 0 0 1 13 4.25v2a.75.75 0 0 1-1.5 0v-2a.75.75 0 0 0-.75-.75h-5.5a.75.75 0 0 0-.75.75v11.5c0 .414.336.75.75.75h5.5a.75.75 0 0 0 .75-.75v-2a.75.75 0 0 1 1.5 0v2A2.25 2.25 0 0 1 10.75 18h-5.5A2.25 2.25 0 0 1 3 15.75V4.25Z" clip-rule="evenodd" /> </li>
<path fill-rule="evenodd" d="M6 10a.75.75 0 0 1 .75-.75h9.546l-1.048-.943a.75.75 0 1 1 1.004-1.114l2.5 2.25a.75.75 0 0 1 0 1.114l-2.5 2.25a.75.75 0 1 1-1.004-1.114l1.048-.943H6.75A.75.75 0 0 1 6 10Z" clip-rule="evenodd" /> <li>
</svg> <form action="Account/Logout" method="post">
</button> <AntiforgeryToken />
</form> <input type="hidden" name="ReturnUrl" value="@_currentUrl" />
</li> <button type="submit" class="flex gap-2">
</Authorized> Logout
<NotAuthorized> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
<li> <path fill-rule="evenodd" d="M3 4.25A2.25 2.25 0 0 1 5.25 2h5.5A2.25 2.25 0 0 1 13 4.25v2a.75.75 0 0 1-1.5 0v-2a.75.75 0 0 0-.75-.75h-5.5a.75.75 0 0 0-.75.75v11.5c0 .414.336.75.75.75h5.5a.75.75 0 0 0 .75-.75v-2a.75.75 0 0 1 1.5 0v2A2.25 2.25 0 0 1 10.75 18h-5.5A2.25 2.25 0 0 1 3 15.75V4.25Z" clip-rule="evenodd" />
<NavLink href="Account/Login"> <path fill-rule="evenodd" d="M6 10a.75.75 0 0 1 .75-.75h9.546l-1.048-.943a.75.75 0 1 1 1.004-1.114l2.5 2.25a.75.75 0 0 1 0 1.114l-2.5 2.25a.75.75 0 1 1-1.004-1.114l1.048-.943H6.75A.75.75 0 0 1 6 10Z" clip-rule="evenodd" />
Login </svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5"> </button>
<path fill-rule="evenodd" d="M17 4.25A2.25 2.25 0 0 0 14.75 2h-5.5A2.25 2.25 0 0 0 7 4.25v2a.75.75 0 0 0 1.5 0v-2a.75.75 0 0 1 .75-.75h5.5a.75.75 0 0 1 .75.75v11.5a.75.75 0 0 1-.75.75h-5.5a.75.75 0 0 1-.75-.75v-2a.75.75 0 0 0-1.5 0v2A2.25 2.25 0 0 0 9.25 18h5.5A2.25 2.25 0 0 0 17 15.75V4.25Z" clip-rule="evenodd" /> </form>
<path fill-rule="evenodd" d="M1 10a.75.75 0 0 1 .75-.75h9.546l-1.048-.943a.75.75 0 1 1 1.004-1.114l2.5 2.25a.75.75 0 0 1 0 1.114l-2.5 2.25a.75.75 0 1 1-1.004-1.114l1.048-.943H1.75A.75.75 0 0 1 1 10Z" clip-rule="evenodd" /> </li>
</svg> </Authorized>
</NavLink> <NotAuthorized>
</li> <li>
<li> <NavLink href="Account/Login">
<NavLink href="Account/Register"> Login
Register <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
</NavLink> <path fill-rule="evenodd" d="M17 4.25A2.25 2.25 0 0 0 14.75 2h-5.5A2.25 2.25 0 0 0 7 4.25v2a.75.75 0 0 0 1.5 0v-2a.75.75 0 0 1 .75-.75h5.5a.75.75 0 0 1 .75.75v11.5a.75.75 0 0 1-.75.75h-5.5a.75.75 0 0 1-.75-.75v-2a.75.75 0 0 0-1.5 0v2A2.25 2.25 0 0 0 9.25 18h5.5A2.25 2.25 0 0 0 17 15.75V4.25Z" clip-rule="evenodd" />
</li> <path fill-rule="evenodd" d="M1 10a.75.75 0 0 1 .75-.75h9.546l-1.048-.943a.75.75 0 1 1 1.004-1.114l2.5 2.25a.75.75 0 0 1 0 1.114l-2.5 2.25a.75.75 0 1 1-1.004-1.114l1.048-.943H1.75A.75.75 0 0 1 1 10Z" clip-rule="evenodd" />
</NotAuthorized> </svg>
</AuthorizeView> </NavLink>
</ul> </li>
<AuthorizeView> <li>
@if (context.User.FindFirst(ClaimTypes.NameIdentifier)?.Value is { } id) { <NavLink href="Account/Register">
<div class="w-8"> Register
<ProfilePictureComponent ProfileId="@id" /> </NavLink>
</div> </li>
} </NotAuthorized>
</AuthorizeView> </AuthorizeView>
</div> </ul>
</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>
<AuthorizeView Policy="ArticleEditPermissions">
<Authorized>
<NavLink ActiveClass="tab-active" class="tab" href="article/new">New Article</NavLink>
</Authorized>
</AuthorizeView>
</nav>
</div>
</header>
@code { @code {
private string? _currentUrl; private string? _currentUrl;

6
Wave/Components/LogoPartial.razor Normal file
View file

@ -0,0 +1,6 @@
<picture>
<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>

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

File diff suppressed because one or more lines are too long