From 70b329c902a5b6f2ee1040dd36366c5b7039e9a3 Mon Sep 17 00:00:00 2001 From: ari melody Date: Tue, 21 Oct 2025 23:22:57 +0100 Subject: [PATCH] admin dashboard: mobile support! --- admin/releasehttp.go | 10 +-- admin/static/admin.css | 103 ++++++++++++++++++++++--- admin/static/admin.js | 8 ++ admin/static/artists.css | 4 + admin/static/edit-account.css | 13 +++- admin/static/edit-artist.css | 6 ++ admin/static/edit-release.css | 18 ++++- admin/static/logs.css | 9 +++ admin/static/releases.css | 7 ++ admin/templates/html/artists.html | 1 - admin/templates/html/edit-account.html | 2 +- admin/templates/html/index.html | 1 - admin/templates/html/layout.html | 6 +- admin/templates/html/login-totp.html | 11 ++- admin/templates/html/login.html | 11 ++- admin/templates/html/logs.html | 42 +++++----- admin/templates/html/releases.html | 2 - admin/templates/html/tracks.html | 2 - public/img/hamburger.svg | 1 + 19 files changed, 201 insertions(+), 56 deletions(-) create mode 100644 public/img/hamburger.svg diff --git a/admin/releasehttp.go b/admin/releasehttp.go index 028ad2f..7cca841 100644 --- a/admin/releasehttp.go +++ b/admin/releasehttp.go @@ -193,15 +193,9 @@ func serveEditTracks(release *model.Release) http.Handler { return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) { w.Header().Set("Content-Type", "text/html") - type editTracksData struct { - Release *model.Release - Add func(a int, b int) int - } + type editTracksData struct { Release *model.Release } - err := templates.EditTracksTemplate.Execute(w, editTracksData{ - Release: release, - Add: func(a, b int) int { return a + b }, - }) + err := templates.EditTracksTemplate.Execute(w, editTracksData{ Release: release }) if err != nil { fmt.Printf("WARN: Failed to serve edit tracks component for %s: %s\n", release.ID, err) http.Error(w, http.StatusText(http.StatusInternalServerError), http.StatusInternalServerError) diff --git a/admin/static/admin.css b/admin/static/admin.css index 60e06c2..27cd867 100644 --- a/admin/static/admin.css +++ b/admin/static/admin.css @@ -193,14 +193,44 @@ nav hr { border-bottom: 1px solid var(--fg-0); } nav .section-label { - margin: 8px 0 2px 15px; - font-size: 10px; + margin: .6em 0 .1em 1.6em; + font-size: .6em; text-transform: uppercase; font-weight: 600; } +#toggle-nav { + position: fixed; + top: 16px; + left: 16px; + padding: 8px; + width: 48px; + height: 48px; + display: none; + justify-content: center; + align-items: center; + z-index: 1; +} +#toggle-nav img { + width: 100%; + height: 100%; + object-fit: cover; + transform: translate(1px, 1px); +} +#toggle-nav img:hover { + filter: invert(.9); +} +@media (prefers-color-scheme: dark) { + #toggle-nav img { + filter: invert(.9); + } + #toggle-nav img:hover { + filter: none; + } +} main { - width: min(calc(100% - 16px), 720px); + width: 720px; + max-width: calc(100% - 2em); height: fit-content; min-height: calc(100vh - 2em); margin: 0 auto; @@ -213,6 +243,9 @@ main.dashboard { a { color: inherit; text-decoration: none; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; transition: color .1s ease-out, background-color .1s ease-out; } @@ -296,12 +329,6 @@ header :is(h1, h2, h3) small, gap: 1em; } -@media screen and (max-width: 520px) { - body { - font-size: 12px; - } -} - #message, @@ -387,9 +414,10 @@ form label { margin: 1rem 0 .5rem 0; display: block; } -form input { - min-width: 20rem; - max-width: calc(100% - 1em)); +form input[type="text"], +form input[type="password"] { + width: 16em; + max-width: 100%; margin: .5em 0; padding: .3em .5em; display: block; @@ -404,3 +432,54 @@ input[disabled] { opacity: .5; cursor: not-allowed; } + +@media screen and (max-width: 720px) { + main { + padding-top: 0; + } + + body { + width: 100%; + margin: 0; + font-size: 16px; + } + + nav { + width: 100%; + left: -100%; + font-size: 24px; + z-index: 1; + transition: transform .2s cubic-bezier(.2,0,.5,1); + } + nav.open { + transform: translateX(100%); + } + + #toggle-nav { + display: flex; + } + + main > h1:first-of-type { + margin-left: 68px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + main > header { + margin-left: 68px; + } + main > header h1 { + display: flex; + flex-direction: column; + font-size: 1.5em; + } + + .card { + flex-basis: 100%; + max-width: calc(100vw - 4em); + } + + .artists-group { + grid-template-columns: repeat(3, 1fr); + } +} diff --git a/admin/static/admin.js b/admin/static/admin.js index 140efe0..8bf2480 100644 --- a/admin/static/admin.js +++ b/admin/static/admin.js @@ -86,3 +86,11 @@ export function hijackClickEvent(container, link) { })); }); } + +document.addEventListener("readystatechange", () => { + const navbar = document.getElementById("navbar"); + document.getElementById("toggle-nav").addEventListener("click", event => { + event.preventDefault(); + navbar.classList.toggle("open"); + }) +}); diff --git a/admin/static/artists.css b/admin/static/artists.css index 3074874..516a998 100644 --- a/admin/static/artists.css +++ b/admin/static/artists.css @@ -21,3 +21,7 @@ object-fit: cover; border-radius: 8px; } + +.artist .artist-name { + display: block; +} diff --git a/admin/static/edit-account.css b/admin/static/edit-account.css index 9ca4f05..c43d6e9 100644 --- a/admin/static/edit-account.css +++ b/admin/static/edit-account.css @@ -13,7 +13,9 @@ label { } form#change-password input, form#delete-account input { - width: min(20rem, calc(100% - 1rem)); + width: 20em; + min-width: auto; + max-width: calc(100% - 1em - 2px); margin: .5rem 0; padding: .3rem .5rem; display: block; @@ -51,5 +53,12 @@ form#delete-account input { } .mfa-device form input { - display: none; + display: none !important; +} + +.mfa-actions { + display: flex; + flex-direction: row; + gap: .5em; + flex-wrap: wrap; } diff --git a/admin/static/edit-artist.css b/admin/static/edit-artist.css index 8693a1d..7bf146b 100644 --- a/admin/static/edit-artist.css +++ b/admin/static/edit-artist.css @@ -101,8 +101,14 @@ input[type="text"]:focus { border-radius: 4px; } +.credit-info { + overflow: hidden; +} .credit-info h3, .credit-info p { margin: 0; font-size: .9em; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } diff --git a/admin/static/edit-release.css b/admin/static/edit-release.css index 62dbda1..434b487 100644 --- a/admin/static/edit-release.css +++ b/admin/static/edit-release.css @@ -207,6 +207,18 @@ dialog div.dialog-actions { opacity: .66; } +#credits .credit .credit-info { + overflow: hidden; +} + +#credits .credit .credit-info :is(h3, p) { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + + + #editcredits ul { margin: 0; padding: 0; @@ -487,15 +499,17 @@ dialog div.dialog-actions { padding: .5em; display: flex; gap: .5em; + background-color: var(--bg-0); cursor: pointer; + transition: background-color .1s ease-out, color .1s ease-out; } #addtrack ul li.new-track:nth-child(even) { - background: #f0f0f0; + background: color-mix(in srgb, var(--bg-0) 95%, #fff); } #addtrack ul li.new-track:hover { - background: #e0e0e0; + background: color-mix(in srgb, var(--bg-0) 90%, #fff); } @media only screen and (max-width: 1105px) { diff --git a/admin/static/logs.css b/admin/static/logs.css index 4a66038..8da60d0 100644 --- a/admin/static/logs.css +++ b/admin/static/logs.css @@ -46,6 +46,15 @@ form #filters input { #logs { width: 100%; + overflow: scroll; +} +@media screen and (max-width: 720px) { + #logs { + font-size: 12px; + } +} + +#logs table{ border-collapse: collapse; } diff --git a/admin/static/releases.css b/admin/static/releases.css index 08dcd20..0694875 100644 --- a/admin/static/releases.css +++ b/admin/static/releases.css @@ -15,6 +15,9 @@ .release h3, .release p { margin: 0; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } .release .release-artwork { @@ -34,6 +37,10 @@ aspect-ratio: 1; } +.release .release-info { + max-width: calc(100% - 96px - 1em); +} + .release .release-title small { opacity: .75; } diff --git a/admin/templates/html/artists.html b/admin/templates/html/artists.html index 8364143..f4a6432 100644 --- a/admin/templates/html/artists.html +++ b/admin/templates/html/artists.html @@ -22,6 +22,5 @@ {{end}} - {{end}} diff --git a/admin/templates/html/edit-account.html b/admin/templates/html/edit-account.html index a4c8196..a63d37a 100644 --- a/admin/templates/html/edit-account.html +++ b/admin/templates/html/edit-account.html @@ -57,7 +57,7 @@

You have no MFA devices.

{{end}} -
+
Add TOTP Device
diff --git a/admin/templates/html/index.html b/admin/templates/html/index.html index 1e788d5..afb9471 100644 --- a/admin/templates/html/index.html +++ b/admin/templates/html/index.html @@ -56,7 +56,6 @@ - {{end}} diff --git a/admin/templates/html/layout.html b/admin/templates/html/layout.html index 0aaf9ca..bf1b542 100644 --- a/admin/templates/html/layout.html +++ b/admin/templates/html/layout.html @@ -10,12 +10,13 @@ {{block "head" .}}{{end}} +
-
{{end}} + {{block "content" .}}{{end}} diff --git a/admin/templates/html/login-totp.html b/admin/templates/html/login-totp.html index e2fa5ee..f03d11b 100644 --- a/admin/templates/html/login-totp.html +++ b/admin/templates/html/login-totp.html @@ -17,8 +17,15 @@ form button { margin-top: 1rem; } -input { - width: calc(100% - 1rem - 2px); +form input { + width: calc(100% - 1rem - 2px) !important; +} + +@media screen and (max-width: 720px) { + h1 { + margin-top: 3em; + text-align: center; + } } {{end}} diff --git a/admin/templates/html/login.html b/admin/templates/html/login.html index 2d7206b..aa77967 100644 --- a/admin/templates/html/login.html +++ b/admin/templates/html/login.html @@ -2,6 +2,13 @@ Login - ari melody 💫 {{end}} diff --git a/admin/templates/html/logs.html b/admin/templates/html/logs.html index 7ddaf9e..4f24c72 100644 --- a/admin/templates/html/logs.html +++ b/admin/templates/html/logs.html @@ -43,25 +43,27 @@
- - - - - - - - - - - {{range .Logs}} - - - - - - - {{end}} - -
TimeLevelTypeMessage
{{prettyTime .CreatedAt}}{{parseLevel .Level}}{{titleCase .Type}}{{.Content}}
+
+ + + + + + + + + + + {{range .Logs}} + + + + + + + {{end}} + +
TimeLevelTypeMessage
{{prettyTime .CreatedAt}}{{parseLevel .Level}}{{titleCase .Type}}{{.Content}}
+
{{end}} diff --git a/admin/templates/html/releases.html b/admin/templates/html/releases.html index 8e7d716..ed5aec6 100644 --- a/admin/templates/html/releases.html +++ b/admin/templates/html/releases.html @@ -21,6 +21,4 @@

There are no releases.

{{end}} - - {{end}} diff --git a/admin/templates/html/tracks.html b/admin/templates/html/tracks.html index 7fe9fd2..6bb6f18 100644 --- a/admin/templates/html/tracks.html +++ b/admin/templates/html/tracks.html @@ -31,6 +31,4 @@ {{end}} - - {{end}} diff --git a/public/img/hamburger.svg b/public/img/hamburger.svg new file mode 100644 index 0000000..f7e91a0 --- /dev/null +++ b/public/img/hamburger.svg @@ -0,0 +1 @@ + \ No newline at end of file