admin dashboard: mobile support!

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

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