summaryrefslogtreecommitdiff
path: root/Pages/Component
diff options
context:
space:
mode:
Diffstat (limited to 'Pages/Component')
-rw-r--r--Pages/Component/Dialog.razor.css2
-rw-r--r--Pages/Component/MediaTagTable.razor.css8
-rw-r--r--Pages/Component/MobileMenu.razor32
-rw-r--r--Pages/Component/MobileMenu.razor.css46
-rw-r--r--Pages/Component/TabContainer.razor.css14
-rw-r--r--Pages/Component/TagSelectDialog.razor.css6
-rw-r--r--Pages/Component/Titlebar.razor29
-rw-r--r--Pages/Component/Titlebar.razor.css28
8 files changed, 141 insertions, 24 deletions
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
+
+<div id="mobile-menu" class="hidden">
+ <a href="/">Home</a>
+ <a href="/TagDefinitions">Tags</a>
+ <a href="/Gallery?ingest=true">Ingest</a>
+ <a href="/Upload">Upload</a>
+ <div id="nsfw-switch">
+ <p id="nsfw-label">NSFW</p>
+ <NsfwSwitch/>
+ </div>
+ <a href="javascript:logout();">Logout</a>
+</div>
+
+<script suppress-error="BL9992">
+ function hideMobileMenu() {
+ document.getElementById('mobile-menu').classList.add('hidden');
+ }
+</script>
+
+@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 @@
<AuthorizeView>
<Authorized>
<div id="navbar">
- <a href="/">Home</a>
- <a href="/TagDefinitions">Tags</a>
- <a href="/Gallery?ingest=true">Ingest</a>
- <a href="/Upload">Upload</a>
- <a href="javascript:;" @onclick=@(() => aboutDialog.Show())>About</a>
+ <p class="mobile">HyperBooru</p>
+ <a class="mobile menu-button" href="javascript:toggleMobileMenu();">&#x2630</a>
- <p id="nsfw-label">NSFW</p>
- <div id="nsfw-switch">
- <NsfwSwitch/>
- </div>
- <form action="/Gallery" method="get">
- <input type="text" name="q" placeholder="Search"/>
- </form>
- <a href="javascript:logout();">Logout</a>
+ <a class="desktop" href="/">Home</a>
+ <a class="desktop" href="/TagDefinitions">Tags</a>
+ <a class="desktop" href="/Gallery?ingest=true">Ingest</a>
+ <a class="desktop" href="/Upload">Upload</a>
+ <a class="desktop" href="javascript:;" @onclick=@(() => aboutDialog.Show())>About</a>
+
+ <p class="desktop" id="nsfw-label">NSFW</p>
+ <div id="nsfw-switch" class="desktop">
+ <NsfwSwitch/>
+ </div>
+ <form action="/Gallery" method="get" class="desktop">
+ <input type="text" name="q" placeholder="Search"/>
+ </form>
+ <a class="desktop" href="javascript:logout();">Logout</a>
</div>
<AboutDialog @ref=aboutDialog/>
</Authorized>
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;
+ }
+}
generated by cgit v1.3 (git 2.53.0) at 2026-06-12 22:04:03 +0000