From 23bc4d5d0e2e0e5172f539242e78cf86ddd05a92 Mon Sep 17 00:00:00 2001 From: Jake Mannens Date: Wed, 8 Apr 2026 03:58:07 +1000 Subject: v0.7a --- Pages/Component/Dialog.razor.css | 2 +- Pages/Component/MediaTagTable.razor.css | 8 +++++- Pages/Component/MobileMenu.razor | 32 +++++++++++++++++++++ Pages/Component/MobileMenu.razor.css | 46 +++++++++++++++++++++++++++++++ Pages/Component/TabContainer.razor.css | 14 ++++++++-- Pages/Component/TagSelectDialog.razor.css | 6 ++-- Pages/Component/Titlebar.razor | 29 ++++++++++--------- Pages/Component/Titlebar.razor.css | 28 ++++++++++++++++--- 8 files changed, 141 insertions(+), 24 deletions(-) create mode 100644 Pages/Component/MobileMenu.razor create mode 100644 Pages/Component/MobileMenu.razor.css (limited to 'Pages/Component') diff --git a/Pages/Component/Dialog.razor.css b/Pages/Component/Dialog.razor.css index 1447407..93680c5 100644 --- a/Pages/Component/Dialog.razor.css +++ b/Pages/Component/Dialog.razor.css @@ -10,7 +10,7 @@ top: 50%; transform: translate(-50%, -50%); transition: visibility 0.1s, opacity 0.1s linear; - width: 450px; + width: min(450px, 100%); z-index: 1000; } diff --git a/Pages/Component/MediaTagTable.razor.css b/Pages/Component/MediaTagTable.razor.css index dcf5e09..4dedb3f 100644 --- a/Pages/Component/MediaTagTable.razor.css +++ b/Pages/Component/MediaTagTable.razor.css @@ -1,3 +1,9 @@ -td { +th, td { font-size: 8pt; } + +@media (hover: none) and (pointer: coarse) { + th, td { + font-size: 7pt; + } +} diff --git a/Pages/Component/MobileMenu.razor b/Pages/Component/MobileMenu.razor new file mode 100644 index 0000000..6cb3281 --- /dev/null +++ b/Pages/Component/MobileMenu.razor @@ -0,0 +1,32 @@ +@inject NavigationManager navigationManager +@inject IJSRuntime jsRuntime +@implements IDisposable + + + + + +@code { + protected override void OnInitialized() => + navigationManager.LocationChanged += LocationChanged; + + public async void LocationChanged(object? sender, LocationChangedEventArgs e) => + await jsRuntime.InvokeVoidAsync("hideMobileMenu"); + + public void Dispose() => + navigationManager.LocationChanged -= LocationChanged; +} diff --git a/Pages/Component/MobileMenu.razor.css b/Pages/Component/MobileMenu.razor.css new file mode 100644 index 0000000..b60e07b --- /dev/null +++ b/Pages/Component/MobileMenu.razor.css @@ -0,0 +1,46 @@ +div#mobile-menu { + background: var(--col-bg); + display: flex; + flex-direction: column; + flex: 1 1 calc(100vh - 59px); + height: 100%; + overflow-y: auto; + position: relative; + width: 100%; +} + +div#mobile-menu.hidden { + display: none; +} + +div#mobile-menu > a { + color: #fff; + padding: 20px; +} + +div#mobile-menu > a:not(:last-of-type) { + border-bottom: 1px solid var(--col-hr); +} + +div#mobile-menu > a:hover { + background: var(--col-dialog-bg); + filter: none; +} + +div#mobile-menu > a:active { + background: #fff; + color: var(--col-bg); + filter: none; +} + +div#nsfw-switch { + align-items: center; + border-bottom: 1px solid var(--col-hr); + display: flex; + flex-direction: row; + padding: 5px 20px 5px 20px; +} + +div#nsfw-switch > p#nsfw-label { + margin-right: auto; +} diff --git a/Pages/Component/TabContainer.razor.css b/Pages/Component/TabContainer.razor.css index 6a56021..bfb5694 100644 --- a/Pages/Component/TabContainer.razor.css +++ b/Pages/Component/TabContainer.razor.css @@ -13,7 +13,15 @@ div.tabs > a.selected { padding-bottom: 5px; } -div.tabs > a:hover { - background: rgba(255, 255, 255, 0.4); - filter: none; +@media (hover: hover) { + div.tabs > a:hover { + background: rgba(255, 255, 255, 0.4); + filter: none; + } +} + +@media (hover: none) and (pointer: coarse) { + div.tabs > a { + font-size: 8pt; + } } diff --git a/Pages/Component/TagSelectDialog.razor.css b/Pages/Component/TagSelectDialog.razor.css index 7b50077..dadd0c4 100644 --- a/Pages/Component/TagSelectDialog.razor.css +++ b/Pages/Component/TagSelectDialog.razor.css @@ -14,8 +14,10 @@ div.tag-definitions label { transition: background 0.1s linear; } -div.tag-definitions label:hover { - background: #777; +@media(hover: hover) { + div.tag-definitions label:hover { + background: #777; + } } div.tag-definitions input:checked + label { diff --git a/Pages/Component/Titlebar.razor b/Pages/Component/Titlebar.razor index 8033413..a0b9eec 100644 --- a/Pages/Component/Titlebar.razor +++ b/Pages/Component/Titlebar.razor @@ -43,20 +43,23 @@ diff --git a/Pages/Component/Titlebar.razor.css b/Pages/Component/Titlebar.razor.css index ea10740..58a1c0c 100644 --- a/Pages/Component/Titlebar.razor.css +++ b/Pages/Component/Titlebar.razor.css @@ -11,17 +11,20 @@ div#navbar > h2 { margin-left: 20px; } -div#navbar > a { +div#navbar > a, div#navbar > p { align-items: center; color: white; display: flex; height: 100%; padding: 0 20px 0 20px; + user-select: none; } -div#navbar > a:hover { - background: rgba(255, 255, 255, 0.4); - filter: none; +@media (hover: hover) and (pointer: fine) { + div#navbar > a:hover { + background: rgba(255, 255, 255, 0.4); + filter: none; + } } div#navbar > a:active { @@ -29,6 +32,11 @@ div#navbar > a:active { color: var(--col-navbar-bg); } +div#navbar > a.menu-button { + font-size: 18pt; + margin-left: auto; +} + p#nsfw-label { align-self: center; font-size: 9pt; @@ -77,3 +85,15 @@ input[type="text"], input[type="password"] { input[type="password"] { margin-left: 20px; } + +@media (hover: none) and (pointer: coarse) { + .desktop { + display: none !important; + } +} + +@media (hover: hover) and (pointer: fine) { + .mobile { + display: none !important; + } +} -- cgit v1.3