admin dashboard: mobile support!

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 {
+        type editTracksData struct { Release *model.Release }
-            Release *model.Release
-            Add func(a int, b int) int
-        }
 
-        err := templates.EditTracksTemplate.Execute(w, editTracksData{
+        err := templates.EditTracksTemplate.Execute(w, editTracksData{ Release: release })
-            Release: release,
-            Add: func(a, b int) int { return a + b },
-        })
         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)

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;
+    margin: .6em 0 .1em 1.6em;
-    font-size: 10px;
+    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 {
+form input[type="text"],
-    min-width: 20rem;
+form input[type="password"] {
-    max-width: calc(100% - 1em));
+    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);
+    }
+}

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");
+    })
+});

admin/static/artists.css

@@ -21,3 +21,7 @@
     object-fit: cover;
     border-radius: 8px;
 }
+
+.artist .artist-name {
+    display: block;
+}

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;
 }

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;
 }

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) {

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;
 }
 

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;
 }

admin/templates/html/artists.html

@@ -22,6 +22,5 @@
     {{end}}
 </main>
 
-<script type="module" src="/admin/static/admin.js"></script>
 <script type="module" src="/admin/static/artists.js"></script>
 {{end}}

admin/templates/html/edit-account.html

@@ -57,7 +57,7 @@
         <p>You have no MFA devices.</p>
         {{end}}
 
-        <div>
+        <div class="mfa-actions">
             <button type="submit" class="save" id="enable-email" disabled>Enable Email TOTP</button>
             <a class="button new" id="add-totp-device" href="/admin/account/totp-setup">Add TOTP Device</a>
         </div>

admin/templates/html/index.html

@@ -56,7 +56,6 @@
 
 </main>
 
-<script type="module" src="/admin/static/admin.js"></script>
 <script type="module" src="/admin/static/artists.js"></script>
 <script type="module" src="/admin/static/index.js"></script>
 {{end}}

admin/templates/html/layout.html

@@ -10,12 +10,13 @@
         {{block "head" .}}{{end}}
 
         <link rel="stylesheet" href="/admin/static/admin.css">
+        <script type="module" src="/admin/static/admin.js"></script>
         <script type="module" src="/script/vendor/htmx.min.js"></script>
     </head>
 
     <body>
         <header>
-            <nav>
+            <nav id="navbar">
                 <a href="/" class="nav icon" aria-label="ari melody" title="Return to Home">
                     <img src="/img/favicon.png" alt="" width="64" height="64">
                 </a>
@@ -57,6 +58,9 @@
                 </div>
                 {{end}}
             </nav>
+            <button type="button" id="toggle-nav" aria-label="Navigation toggle">
+                <img src="/img/hamburger.svg" alt="">
+            </button>
         </header>
 
         {{block "content" .}}{{end}}

admin/templates/html/login-totp.html

@@ -17,8 +17,15 @@ form button {
     margin-top: 1rem;
 }
 
-input {
+form input {
-    width: calc(100% - 1rem - 2px);
+    width: calc(100% - 1rem - 2px) !important;
+}
+
+@media screen and (max-width: 720px) {
+    h1 {
+        margin-top: 3em;
+        text-align: center;
+    }
 }
 </style>
 {{end}}

admin/templates/html/login.html

@@ -2,6 +2,13 @@
 <title>Login - ari melody 💫</title>
 <link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon">
 <style>
+@media screen and (max-width: 720px) {
+    h1 {
+        margin-top: 3em;
+        text-align: center;
+    }
+}
+
 form#login {
     width: 100%;
     display: flex;
@@ -17,8 +24,8 @@ form button {
     margin-top: 1rem;
 }
 
-input {
+form input {
-    width: calc(100% - 1rem - 2px);
+    width: calc(100% - 1rem - 2px) !important;
 }
 </style>
 {{end}}

admin/templates/html/logs.html

@@ -43,25 +43,27 @@
     
     <hr>
 
-    <table id="logs">
+    <div id="logs">
-        <thead>
+        <table>
-            <tr>
+            <thead>
-                <th class="log-time">Time</th>
+                <tr>
-                <th class="log-level">Level</th>
+                    <th class="log-time">Time</th>
-                <th class="log-type">Type</th>
+                    <th class="log-level">Level</th>
-                <th class="log-content">Message</th>
+                    <th class="log-type">Type</th>
-            </tr>
+                    <th class="log-content">Message</th>
-        </thead>
+                </tr>
-        <tbody>
+            </thead>
-            {{range .Logs}}
+            <tbody>
-            <tr class="log {{toLower (parseLevel .Level)}}">
+                {{range .Logs}}
-                <td class="log-time">{{prettyTime .CreatedAt}}</td>
+                <tr class="log {{toLower (parseLevel .Level)}}">
-                <td class="log-level">{{parseLevel .Level}}</td>
+                    <td class="log-time">{{prettyTime .CreatedAt}}</td>
-                <td class="log-type">{{titleCase .Type}}</td>
+                    <td class="log-level">{{parseLevel .Level}}</td>
-                <td class="log-content">{{.Content}}</td>
+                    <td class="log-type">{{titleCase .Type}}</td>
-            </tr>
+                    <td class="log-content">{{.Content}}</td>
-            {{end}}
+                </tr>
-        </tbody>
+                {{end}}
-    </table>
+            </tbody>
+        </table>
+    </div>
 </main>
 {{end}}

admin/templates/html/releases.html

@@ -21,6 +21,4 @@
     <p>There are no releases.</p>
     {{end}}
 </main>
-
-<script type="module" src="/admin/static/admin.js"></script>
 {{end}}

admin/templates/html/tracks.html

@@ -31,6 +31,4 @@
         {{end}}
     </div>
 </main>
-
-<script type="module" src="/admin/static/admin.js"></script>
 {{end}}

public/img/hamburger.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><rect id="Artboard1" x="0" y="0" width="15.36" height="15.36" style="fill:none;"/><g id="Artboard11" serif:id="Artboard1"><path d="M13.44,7.68c0,0.53 -0.43,0.96 -0.96,0.96l-9.6,0c-0.53,0 -0.96,-0.43 -0.96,-0.96c-0,-0.53 0.43,-0.96 0.96,-0.96l9.6,-0c0.53,-0 0.96,0.43 0.96,0.96Z"/><path d="M13.44,11.52c0,0.53 -0.43,0.96 -0.96,0.96l-9.6,0c-0.53,0 -0.96,-0.43 -0.96,-0.96c-0,-0.53 0.43,-0.96 0.96,-0.96l9.6,0c0.53,0 0.96,0.43 0.96,0.96Z"/><path d="M13.44,3.84c0,0.53 -0.43,0.96 -0.96,0.96l-9.6,0c-0.53,0 -0.96,-0.43 -0.96,-0.96c-0,-0.53 0.43,-0.96 0.96,-0.96l9.6,0c0.53,0 0.96,0.43 0.96,0.96Z"/></g></svg>