daniel/deepdrft
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 13 Wiki Activity

feature: Mobile Menu & Style Polish

Browse Source
This commit is contained in:
daniel-c-harvey
2026-06-07 06:53:21 -04:00
parent 84a302ce24
commit 13adb144a6
7 changed files with 69 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files
DeepDrftPublic.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor.css
+3 -3
View File
@@ -46,8 +46,8 @@
/* Minimized floating dock — positioning + hover only; colour from MudFab */
.minimized-dock {
position: fixed;
bottom: 60px;
right: 60px;
bottom: 30px;
right: 30px;
z-index: 1300;
}
@@ -56,7 +56,7 @@
}
@media (max-width: 768px) {
::deep .minimized-dock {
.minimized-dock {
bottom: 15px;
right: 15px;
}
DeepDrftPublic.Client/Controls/PlayStateIcon.razor
+21 -20
View File
@@ -1,21 +1,22 @@
@namespace DeepDrftPublic.Client.Controls
@if (!RendererInfo.IsInteractive)
{
@* Interactive runtime (WASM, or Server on first visit) not attached yet — the prerendered
button has no wired click handler, so clicks would vanish. Show a spinner in its place
until the component hydrates, at which point it re-renders into the live button. *@
<MudProgressCircular Color="Color"
Size="Size"
Indeterminate="true"
Class="mud-icon-button" />
}
else
{
<MudIconButton Icon="@Icon"
Color="Color"
Size="Size"
Disabled="@Disabled"
OnClick="@OnToggle"
Class="xxxx"/>
}
<div class="icon-container">
@if (!RendererInfo.IsInteractive)
{
@* Interactive runtime (WASM, or Server on first visit) not attached yet — the prerendered
button has no wired click handler, so clicks would vanish. Show a spinner in its place
until the component hydrates, at which point it re-renders into the live button. *@
<MudProgressCircular Color="Color"
Size="Size"
Indeterminate="true"
Class="mud-icon-button" />
}
else
{
<MudIconButton Icon="@Icon"
Color="Color"
Size="Size"
Disabled="@Disabled"
OnClick="@OnToggle"/>
}
</div>
DeepDrftPublic.Client/Controls/PlayStateIcon.razor.css
+11 -4
View File
@@ -1,7 +1,14 @@
::deep .xxxx {
background-color: var(--deepdrft-muted)
.icon-container {
display: flex;
justify-content: center;
align-content: center;
background-color: var(--deepdrft-soft);
border-radius: 50%;
height: 60px;
width: 60px;
transition: background-color 1s ease-in-out;
}
::deep .xxxx:hover {
background-color: color-mix(var(--deepdrft-muted), var(--deepdrft-navy));
.icon-container:hover {
background-color: color-mix(var(--deepdrft-soft), var(--deepdrft-navy-mid) 25%);
}
DeepDrftPublic.Client/Layout/DeepDrftFooter.razor
+1 -4
View File
@@ -1,9 +1,6 @@
<footer class="deepdrft-footer">
<div class="deepdrft-footer-logo">Deep <span>DRFT</span></div>
<div class="deepdrft-footer-logo d-none d-sm-inline">Deep <span>DRFT</span></div>
<ul class="deepdrft-footer-links">
<li><a href="/tracks">Listen</a></li>
<li><a href="#">Sessions</a></li>
<li><a href="/tracks">Archive</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
DeepDrftPublic.Client/Layout/DeepDrftMenu.razor
+29 -49
View File
@@ -1,12 +1,11 @@
@using DeepDrftPublic.Client.Common
@using DeepDrftPublic.Client.Services
@implements IAsyncDisposable
<nav class="@NavClass">
<a class="dd-nav-brand" href="/">Deep DRFT</a>
@* Desktop Menu *@
<div class="d-none d-sm-flex">
<nav class="@NavClass">
<a class="dd-nav-brand" href="/">Deep DRFT</a>
@if (_isDesktop)
{
<ul class="dd-nav-links">
@foreach (var navPage in Pages.MenuPages)
{
@@ -18,25 +17,30 @@
<div class="dd-nav-actions">
<a href="/tracks" class="dd-nav-cta">Stream Now &#9654;</a>
<button type="button"
class="dd-nav-toggle"
aria-label="Toggle dark mode"
aria-pressed="@IsDarkMode.ToString().ToLowerInvariant()"
@onclick="DarkModeToggle">
@((MarkupString)DarkLightModeIconSvg)
</button>
@* <button type="button" *@
@* class="dd-nav-toggle" *@
@* aria-label="Toggle dark mode" *@
@* aria-pressed="@IsDarkMode.ToString().ToLowerInvariant()" *@
@* @onclick="DarkModeToggle"> *@
@* @((MarkupString)DarkLightModeIconSvg) *@
@* </button> *@
</div>
}
else
{
</nav>
</div>
@* Mobile Menu *@
<div class="d-flex d-sm-none">
<nav class="@NavClass">
<a class="dd-nav-brand" href="/">Deep DRFT</a>
<div class="dd-nav-actions">
<button type="button"
class="dd-nav-toggle"
aria-label="Toggle dark mode"
aria-pressed="@IsDarkMode.ToString().ToLowerInvariant()"
@onclick="DarkModeToggle">
@((MarkupString)DarkLightModeIconSvg)
</button>
@* <button type="button" *@
@* class="dd-nav-toggle" *@
@* aria-label="Toggle dark mode" *@
@* aria-pressed="@IsDarkMode.ToString().ToLowerInvariant()" *@
@* @onclick="DarkModeToggle"> *@
@* @((MarkupString)DarkLightModeIconSvg) *@
@* </button> *@
<button type="button"
class="dd-nav-hamburger"
aria-label="Toggle navigation"
@@ -60,11 +64,10 @@
</li>
</ul>
}
}
</nav>
</nav>
</div>
@code {
[Inject] public required IBrowserViewportService BrowserViewportService { get; set; }
[Inject] public required DarkModeCookieService DarkModeCookieService { get; set; }
// Elevation is vestigial under the frosted-glass design but kept on the parameter
@@ -72,10 +75,8 @@
[Parameter] public int Elevation { get; set; }
[Parameter] public required bool IsDarkMode { get; set; }
[Parameter] public required EventCallback<bool> IsDarkModeChanged { get; set; }
private bool _isDesktop = true;
private bool _mobileMenuOpen;
private Guid _viewportSubscriptionId;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
@@ -91,30 +92,9 @@
// parent so the menu's IsDarkMode parameter stays consistent with DarkModeSettings.
IsDarkMode = DarkModeCookieService.GetDarkMode();
await IsDarkModeChanged.InvokeAsync(IsDarkMode);
_viewportSubscriptionId = Guid.NewGuid();
await BrowserViewportService.SubscribeAsync(
_viewportSubscriptionId,
args =>
{
_isDesktop = args.Breakpoint >= Breakpoint.Sm;
if (_isDesktop)
{
_mobileMenuOpen = false;
}
InvokeAsync(StateHasChanged);
},
new ResizeOptions { NotifyOnBreakpointOnly = true },
fireImmediately: true);
}
}
public async ValueTask DisposeAsync()
{
if (_viewportSubscriptionId != Guid.Empty)
await BrowserViewportService.UnsubscribeAsync(_viewportSubscriptionId);
}
private string NavClass => IsDarkMode ? "dd-nav dd-nav-dark" : "dd-nav dd-nav-light";
private string DarkLightModeIconSvg => IsDarkMode ? DDIcons.GasLampLit : DDIcons.GasLamp;
DeepDrftPublic.Client/Layout/Pages.cs
+3 -4
View File
@@ -13,10 +13,9 @@ public static class Pages
{
public static readonly List<PageRoute> MenuPages =
[
new() { Name = "Listen", Route = "/tracks", Icon = Icons.Material.Filled.LibraryMusic },
new() { Name = "Sessions", Route = "#", Icon = Icons.Material.Filled.Album }, // TODO: placeholder until Sessions ships
new() { Name = "Archive", Route = "#", Icon = Icons.Material.Filled.FolderOpen }, // TODO: placeholder until Archive ships
new() { Name = "About", Route = "#", Icon = Icons.Material.Filled.Info }, // TODO: placeholder until About ships
new() { Name = "Releases", Route = "/tracks", Icon = Icons.Material.Filled.LibraryMusic },
new() { Name = "Sessions", Route = "#", Icon = Icons.Material.Filled.Piano }, // TODO: placeholder until Sessions ships
new() { Name = "Mixes", Route = "#", Icon = Icons.Material.Filled.Album }, // TODO: placeholder until Mixes ships
];
public static readonly List<PageRoute> AllPages =
DeepDrftShared.Client/wwwroot/styles/deepdrft-tokens.css
+1
View File
@@ -13,6 +13,7 @@
--deepdrft-green-accent: #3D7A68;
--deepdrft-green-interactive: #429d6a;
--deepdrft-muted: #8A9BB0;
--deepdrft-soft: #e3e7ec;
--deepdrft-white: #FAFAF8;
--deepdrft-border: rgba(13, 27, 42, 0.10);
--deepdrft-border-green: rgba(26, 60, 52, 0.20);