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

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

@ -1,16 +1,39 @@
@inherits LayoutComponentBase
<div class="flex flex-col h-screen">
<NavMenu />
<div class="drawer md:drawer-open drawer-end">
<input id="main-drawer" type="checkbox" class="drawer-toggle" />
<div class="drawer-content">
<main class="flex-1 container mx-auto px-12 py-8">
@Body
</main>
</div>
<div class="drawer-content">
<div class="flex flex-col h-screen overflow-x-auto">
<header class="md:hidden p-4 flex justify-between bg-base-200">
<div class="h-12">
<LogoPartial />
</div>
<label for="main-drawer" class="btn btn-square btn-ghost drawer-button" title="open navigation">
<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">
<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>
<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 class="bg-base-200 p-4 h-full flex flex-col gap-4">
<NavMenu />
</div>
</div>
</div>

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

@ -3,80 +3,66 @@
@inject NavigationManager NavigationManager
<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 gap-2">
<AuthorizeView>
<Authorized>
<li>
<NavLink ActiveClass="tab-active" 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="flex gap-2">
Logout
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
<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" />
<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" />
</svg>
</button>
</form>
</li>
</Authorized>
<NotAuthorized>
<li>
<NavLink href="Account/Login">
Login
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
<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" />
<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" />
</svg>
</NavLink>
</li>
<li>
<NavLink href="Account/Register">
Register
</NavLink>
</li>
</NotAuthorized>
</AuthorizeView>
</ul>
<AuthorizeView>
@if (context.User.FindFirst(ClaimTypes.NameIdentifier)?.Value is { } id) {
<div class="w-8">
<ProfilePictureComponent ProfileId="@id" />
</div>
}
</AuthorizeView>
</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>
<AuthorizeView Policy="ArticleEditPermissions">
<Authorized>
<NavLink ActiveClass="tab-active" class="tab" href="article/new">New Article</NavLink>
</Authorized>
</AuthorizeView>
</nav>
</div>
<header class="h-12 hidden md:block">
<LogoPartial />
</header>
<nav class="flex-1">
<ul class="menu">
<li><NavLink href="" Match="NavLinkMatch.All">Home</NavLink></li>
<li><NavLink href="weather">Weather</NavLink></li>
<li><NavLink href="auth">Auth Required</NavLink></li>
<AuthorizeView Policy="ArticleEditPermissions">
<Authorized>
<li><NavLink href="article/new">New Article</NavLink></li>
</Authorized>
</AuthorizeView>
</ul>
</nav>
<ul class="menu gap-2">
<AuthorizeView>
<Authorized>
<li class="flex content-center gap-2">
<NavLink href="Account/Manage">
@context.User.Identity?.Name
@if (context.User.FindFirst(ClaimTypes.NameIdentifier)?.Value is { } id) {
<div class="w-8">
<ProfilePictureComponent ProfileId="@id" />
</div>
}
</NavLink>
</li>
<li>
<form action="Account/Logout" method="post">
<AntiforgeryToken />
<input type="hidden" name="ReturnUrl" value="@_currentUrl" />
<button type="submit" class="flex gap-2">
Logout
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
<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" />
<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" />
</svg>
</button>
</form>
</li>
</Authorized>
<NotAuthorized>
<li>
<NavLink href="Account/Login">
Login
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
<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" />
<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" />
</svg>
</NavLink>
</li>
<li>
<NavLink href="Account/Register">
Register
</NavLink>
</li>
</NotAuthorized>
</AuthorizeView>
</ul>
@code {
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