ari/arimelody-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

admin dashboard early UI refresh

Browse source
This commit is contained in:
ari melody 2025-10-19 05:01:55 +01:00
parent 028ed60293
commit 13a84f7f25
Signed by: ari
GPG key ID: CF99829C92678188
12 changed files with 249 additions and 139 deletions
Download patch file Download diff file Expand all files Collapse all files

4
.air.toml
View file

@ -7,14 +7,14 @@ tmp_dir = "tmp"
bin = "./tmp/main" bin = "./tmp/main"
cmd = "go build -o ./tmp/main ." cmd = "go build -o ./tmp/main ."
delay = 1000 delay = 1000
exclude_dir = ["admin/static", "admin\\static", "public", "uploads", "test", "db", "res"] exclude_dir = ["uploads", "test", "db", "res"]
exclude_file = [] exclude_file = []
exclude_regex = ["_test.go"] exclude_regex = ["_test.go"]
exclude_unchanged = false exclude_unchanged = false
follow_symlink = false follow_symlink = false
full_bin = "" full_bin = ""
include_dir = [] include_dir = []
include_ext = ["go", "tpl", "tmpl", "html"] include_ext = ["go", "tpl", "tmpl", "html", "css"]
include_file = [] include_file = []
kill_delay = "0s" kill_delay = "0s"
log = "build-errors.log" log = "build-errors.log"

160
admin/static/admin.css
View file

@ -1,6 +1,71 @@
@import url("/style/prideflag.css"); @import url("/style/prideflag.css");
@import url("/font/inter/inter.css"); @import url("/font/inter/inter.css");
:root {
--bg-0: #101010;
--bg-1: #141414;
--bg-2: #181818;
--bg-3: #202020;
--fg-0: #b0b0b0;
--fg-1: #c0c0c0;
--fg-2: #d0d0d0;
--fg-3: #e0e0e0;
--col-shadow-0: #0002;
--col-shadow-1: #0004;
--col-shadow-2: #0006;
--col-highlight-0: #ffffff08;
--col-highlight-1: #fff1;
--col-highlight-2: #fff2;
--col-new: #b3ee5b;
--col-on-new: #1b2013;
--col-save: #6fd7ff;
--col-on-save: #283f48;
--col-delete: #ff7171;
--col-on-delete: #371919;
--col-warn: #ffe86a;
--col-on-warn: var(--bg-0);
--col-warn-hover: #ffec81;
--shadow-sm:
0 1px 2px var(--col-shadow-2),
inset 0 1px 1px var(--col-highlight-2);
--shadow-md:
0 2px 4px var(--col-shadow-1),
inset 0 2px 2px var(--col-highlight-1);
--shadow-lg:
0 4px 8px var(--col-shadow-0),
inset 0 4px 4px var(--col-highlight-0);
}
@media (prefers-color-scheme: light) {
:root {
--bg-0: #e8e8e8;
--bg-1: #f0f0f0;
--bg-2: #f8f8f8;
--bg-3: #ffffff;
--fg-0: #606060;
--fg-1: #404040;
--fg-2: #303030;
--fg-3: #202020;
--col-shadow-0: #0002;
--col-shadow-1: #0004;
--col-shadow-2: #0008;
--col-highlight-0: #fff2;
--col-highlight-1: #fff4;
--col-highlight-2: #fff8;
--col-warn: #ffe86a;
--col-on-warn: var(--fg-3);
--col-warn-hover: #ffec81;
}
}
body { body {
width: 100%; width: 100%;
height: calc(100vh - 1em); height: calc(100vh - 1em);
@ -11,8 +76,12 @@ body {
font-family: "Inter", sans-serif; font-family: "Inter", sans-serif;
font-size: 16px; font-size: 16px;
color: #303030; color: var(--fg-0);
background: #f0f0f0; background: var(--bg-0);
}
h1, h2, h3, h4, h5, h6 {
color: var(--fg-3);
} }
nav { nav {
@ -22,40 +91,35 @@ nav {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: left; justify-content: left;
gap: .5em;
background: #f8f8f8; user-select: none;
border-radius: 4px;
border: 1px solid #808080;
} }
nav .icon { nav .icon {
height: 100%; height: 100%;
border-radius: 100%;
box-shadow: var(--shadow-sm);
overflow: hidden;
} }
nav .title { nav .icon img {
width: auto; width: 100%;
height: 100%; height: 100%;
margin: 0 1em 0 0;
display: flex;
line-height: 2em;
text-decoration: none;
color: inherit;
} }
.nav-item { .nav-item {
width: auto; width: auto;
height: 100%; height: 100%;
margin: 0px;
padding: 0 1em; padding: 0 1em;
display: flex; display: flex;
color: var(--fg-2);
background: var(--bg-2);
border-radius: 10em;
box-shadow: var(--shadow-sm);
line-height: 2em; line-height: 2em;
font-weight: 500;
} }
.nav-item:hover { .nav-item:hover {
background: #00000010; background: var(--bg-1);
text-decoration: none; text-decoration: none;
} }
nav a { nav a {
@ -77,9 +141,11 @@ a {
text-decoration: none; text-decoration: none;
} }
/*
a:hover { a:hover {
text-decoration: underline; text-decoration: underline;
} }
*/
a img.icon { a img.icon {
height: .8em; height: .8em;
@ -133,17 +199,14 @@ code {
#error { #error {
margin: 0 0 1em 0; margin: 0 0 1em 0;
padding: 1em; padding: 1em;
border-radius: 4px; border-radius: 8px;
background: #ffffff; background: #ffffff;
border: 1px solid #888;
} }
#message { #message {
background: #a9dfff; background: #a9dfff;
border-color: #599fdc;
} }
#error { #error {
background: #ffa9b8; background: #ffa9b8;
border-color: #dc5959;
} }
@ -152,52 +215,54 @@ a.delete:not(.button) {
color: #d22828; color: #d22828;
} }
button, .button { .button, button {
padding: .5em .8em; padding: .5em .8em;
font-family: inherit; font-family: inherit;
font-size: inherit; font-size: inherit;
border-radius: 4px;
border: 1px solid #a0a0a0;
background: #f0f0f0;
color: inherit; color: inherit;
background: var(--bg-2);
border: none;
border-radius: 10em;
box-shadow: var(--shadow-sm);
font-weight: 500;
transition: background .1s ease-out, color .1s ease-out;
cursor: pointer;
user-select: none;
} }
button:hover, .button:hover { button:hover, .button:hover {
background: #fff; background: #fff;
border-color: #d0d0d0;
} }
button:active, .button:active { button:active, .button:active {
background: #d0d0d0; background: #d0d0d0;
border-color: #808080;
} }
.button, button {
color: inherit;
}
.button.new, button.new { .button.new, button.new {
background: #c4ff6a; color: var(--col-on-new);
border-color: #84b141; background: var(--col-new);
} }
.button.save, button.save { .button.save, button.save {
background: #6fd7ff; color: var(--col-on-save);
border-color: #6f9eb0; background: var(--col-save);
} }
.button.delete, button.delete { .button.delete, button.delete {
background: #ff7171; color: var(--col-on-delete);
border-color: #7d3535; background: var(--col-delete);
} }
.button:hover, button:hover { .button:hover, button:hover {
background: #fff; color: var(--bg-3);
border-color: #d0d0d0; background: var(--fg-3);
} }
.button:active, button:active { .button:active, button:active {
background: #d0d0d0; color: var(--bg-2);
border-color: #808080; background: var(--fg-0);
} }
.button[disabled], button[disabled] { .button[disabled], button[disabled] {
background: #d0d0d0 !important; color: var(--fg-0) !important;
border-color: #808080 !important; background: var(--bg-3) !important;
opacity: .5; opacity: .5;
cursor: not-allowed !important; cursor: default !important;
} }
@ -217,7 +282,6 @@ form input {
padding: .3rem .5rem; padding: .3rem .5rem;
display: block; display: block;
border-radius: 4px; border-radius: 4px;
border: 1px solid #808080;
font-size: inherit; font-size: inherit;
font-family: inherit; font-family: inherit;
color: inherit; color: inherit;

17
admin/static/admin.js
View file

@ -69,3 +69,20 @@ export function makeMagicList(container, itemSelector, callback) {
if (callback) callback(); if (callback) callback();
}); });
} }
export function hijackClickEvent(container, link) {
container.addEventListener('click', event => {
if (event.target.tagName.toLowerCase() === 'a') return;
event.preventDefault();
link.dispatchEvent(new MouseEvent('click', {
bubbles: true,
cancelable: true,
view: window,
ctrlKey: event.ctrlKey,
metaKey: event.metaKey,
shiftKey: event.shiftKey,
altKey: event.altKey,
button: event.button,
}));
});
}

18
admin/static/edit-artist.css
View file

@ -9,9 +9,9 @@ h1 {
flex-direction: row; flex-direction: row;
gap: 1.2em; gap: 1.2em;
border-radius: 8px; border-radius: 16px;
background: #f8f8f8f8; background: var(--bg-2);
border: 1px solid #808080; box-shadow: var(--shadow-md);
} }
.artist-avatar { .artist-avatar {
@ -27,6 +27,7 @@ h1 {
cursor: pointer; cursor: pointer;
} }
.artist-avatar #remove-avatar { .artist-avatar #remove-avatar {
margin-top: .5em;
padding: .3em .4em; padding: .3em .4em;
} }
@ -53,8 +54,8 @@ input[type="text"] {
font-family: inherit; font-family: inherit;
font-weight: inherit; font-weight: inherit;
color: inherit; color: inherit;
background: #ffffff; background: var(--bg-0);
border: 1px solid transparent; border: none;
border-radius: 4px; border-radius: 4px;
outline: none; outline: none;
} }
@ -85,9 +86,10 @@ input[type="text"]:focus {
flex-direction: row; flex-direction: row;
gap: 1em; gap: 1em;
align-items: center; align-items: center;
background: #f8f8f8;
border-radius: 8px; border-radius: 16px;
border: 1px solid #808080; background: var(--bg-2);
box-shadow: var(--shadow-md);
} }
.release-artwork { .release-artwork {

67
admin/static/edit-release.css
View file

@ -12,8 +12,8 @@ input[type="text"] {
gap: 1.2em; gap: 1.2em;
border-radius: 8px; border-radius: 8px;
background: #f8f8f8f8; background: var(--bg-2);
border: 1px solid #808080; box-shadow: var(--shadow-md);
} }
.release-artwork { .release-artwork {
@ -29,7 +29,8 @@ input[type="text"] {
cursor: pointer; cursor: pointer;
} }
.release-artwork #remove-artwork { .release-artwork #remove-artwork {
padding: .3em .4em; margin-top: .5em;
padding: .3em .6em;
} }
.release-info { .release-info {
@ -54,17 +55,17 @@ input[type="text"] {
background: transparent; background: transparent;
outline: none; outline: none;
cursor: pointer; cursor: pointer;
transition: background .1s ease-out, border-color .1s ease-out;
} }
#title:hover { #title:hover {
background: #ffffff; background: var(--bg-3);
border-color: #80808080; border-color: var(--fg-0);
} }
#title:active, #title:active,
#title:focus { #title:focus {
background: #ffffff; background: var(--bg-3);
border-color: #808080;
} }
.release-title small { .release-title small {
@ -75,19 +76,21 @@ input[type="text"] {
width: 100%; width: 100%;
margin: .5em 0; margin: .5em 0;
border-collapse: collapse; border-collapse: collapse;
color: var(--fg-2);
} }
.release-info table td { .release-info table td {
padding: .2em; padding: .2em;
border-bottom: 1px solid #d0d0d0; border-bottom: 1px solid color-mix(in srgb, var(--fg-0) 25%, transparent);
transition: background .1s ease-out, border-color .1s ease-out;
} }
.release-info table tr td:first-child { .release-info table tr td:first-child {
vertical-align: top; vertical-align: top;
opacity: .66; opacity: .5;
} }
.release-info table tr td:not(:first-child) select:hover, .release-info table tr td:not(:first-child) select:hover,
.release-info table tr td:not(:first-child) input:hover, .release-info table tr td:not(:first-child) input:hover,
.release-info table tr td:not(:first-child) textarea:hover { .release-info table tr td:not(:first-child) textarea:hover {
background: #e8e8e8; background: var(--bg-3);
cursor: pointer; cursor: pointer;
} }
.release-info table td select, .release-info table td select,
@ -117,11 +120,19 @@ input[type="text"] {
justify-content: right; justify-content: right;
} }
.release-actions button,
.release-actions .button {
color: var(--fg-2);
background: var(--bg-3);
}
dialog { dialog {
width: min(720px, calc(100% - 2em)); width: min(720px, calc(100% - 2em));
padding: 2em; padding: 2em;
border: 1px solid #101010; border: 1px solid #101010;
border-radius: 8px; border-radius: 16px;
color: var(--fg-0);
background: var(--bg-0);
} }
dialog header { dialog header {
@ -160,9 +171,9 @@ dialog div.dialog-actions {
align-items: center; align-items: center;
gap: 1em; gap: 1em;
border-radius: 8px; border-radius: 16px;
background: #f8f8f8f8; background: var(--bg-2);
border: 1px solid #808080; box-shadow: var(--shadow-md);
} }
.card.credits .credit p { .card.credits .credit p {
@ -170,10 +181,11 @@ dialog div.dialog-actions {
} }
.card.credits .credit .artist-avatar { .card.credits .credit .artist-avatar {
border-radius: 8px; border-radius: 12px;
} }
.card.credits .credit .artist-name { .card.credits .credit .artist-name {
color: var(--fg-3);
font-weight: bold; font-weight: bold;
} }
@ -197,8 +209,8 @@ dialog div.dialog-actions {
gap: 1em; gap: 1em;
border-radius: 8px; border-radius: 8px;
background: #f8f8f8f8; background: var(--bg-2);
border: 1px solid #808080; box-shadow: var(--shadow-md);
} }
#editcredits .credit { #editcredits .credit {
@ -232,6 +244,7 @@ dialog div.dialog-actions {
margin: 0; margin: 0;
display: flex; display: flex;
align-items: center; align-items: center;
color: inherit;
} }
#editcredits .credit .credit-info .credit-attribute input[type="text"] { #editcredits .credit .credit-info .credit-attribute input[type="text"] {
@ -239,15 +252,17 @@ dialog div.dialog-actions {
padding: .2em .4em; padding: .2em .4em;
flex-grow: 1; flex-grow: 1;
font-family: inherit; font-family: inherit;
border: 1px solid #8888; border: none;
border-radius: 4px; border-radius: 4px;
color: inherit; color: var(--fg-2);
background: var(--bg-0);
} }
#editcredits .credit .credit-info .credit-attribute input[type="checkbox"] { #editcredits .credit .credit-info .credit-attribute input[type="checkbox"] {
margin: 0 .3em; margin: 0 .3em;
} }
#editcredits .credit .artist-name { #editcredits .credit .artist-name {
color: var(--fg-2);
font-weight: bold; font-weight: bold;
} }
@ -256,8 +271,12 @@ dialog div.dialog-actions {
opacity: .66; opacity: .66;
} }
#editcredits .credit button.delete { #editcredits .credit .delete {
margin-left: auto; margin-right: .5em;
cursor: pointer;
}
#editcredits .credit .delete:hover {
text-decoration: underline;
} }
#addcredit ul { #addcredit ul {
@ -400,9 +419,9 @@ dialog div.dialog-actions {
flex-direction: column; flex-direction: column;
gap: .5em; gap: .5em;
border-radius: 8px; border-radius: 16px;
background: #f8f8f8f8; background: var(--bg-2);
border: 1px solid #808080; box-shadow: var(--shadow-md);
} }
.card.tracks .track h3, .card.tracks .track h3,

9
admin/static/edit-track.css
View file

@ -11,9 +11,9 @@ h1 {
flex-direction: row; flex-direction: row;
gap: 1.2em; gap: 1.2em;
border-radius: 8px; border-radius: 16px;
background: #f8f8f8f8; background: var(--bg-2);
border: 1px solid #808080; box-shadow: var(--shadow-md);
} }
.track-info { .track-info {
@ -49,7 +49,8 @@ h1 {
font-weight: inherit; font-weight: inherit;
font-family: inherit; font-family: inherit;
font-size: inherit; font-size: inherit;
border: 1px solid transparent; background: var(--bg-0);
border: none;
border-radius: 4px; border-radius: 4px;
outline: none; outline: none;
color: inherit; color: inherit;

11
admin/static/index.css
View file

@ -7,13 +7,18 @@
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
gap: .5em; gap: .5em;
color: var(--fg-3);
border-radius: 8px; border-radius: 16px;
background: #f8f8f8f8; background: var(--bg-2);
border: 1px solid #808080; box-shadow: var(--shadow-md);
transition: background .1s ease-out;
cursor: pointer;
} }
.artist:hover { .artist:hover {
background: var(--bg-1);
text-decoration: hover; text-decoration: hover;
} }

8
admin/static/index.js
View file

@ -1,3 +1,5 @@
import { hijackClickEvent } from "./admin.js";
const newReleaseBtn = document.getElementById("create-release"); const newReleaseBtn = document.getElementById("create-release");
const newArtistBtn = document.getElementById("create-artist"); const newArtistBtn = document.getElementById("create-artist");
const newTrackBtn = document.getElementById("create-track"); const newTrackBtn = document.getElementById("create-track");
@ -72,3 +74,9 @@ newTrackBtn.addEventListener("click", event => {
console.error(err); console.error(err);
}); });
}); });
document.addEventListener("readystatechange", () => {
document.querySelectorAll(".card.artists .artist").forEach(el => {
hijackClickEvent(el, el.querySelector("a.artist-name"))
});
});

42
admin/static/logs.css
View file

@ -2,8 +2,14 @@ main {
width: min(1080px, calc(100% - 2em))!important width: min(1080px, calc(100% - 2em))!important
} }
form { form#search-form {
width: calc(100% - 2em);
margin: 1em 0; margin: 1em 0;
padding: 1em;
border-radius: 16px;
color: var(--fg-0);
background: var(--bg-2);
box-shadow: var(--shadow-md);
} }
div#search { div#search {
@ -12,24 +18,25 @@ div#search {
#search input { #search input {
margin: 0; margin: 0;
padding: .3em .8em;
flex-grow: 1; flex-grow: 1;
border: none;
border-right: none; border-radius: 16px;
border-top-right-radius: 0; color: var(--fg-1);
border-bottom-right-radius: 0; background: var(--bg-0);
box-shadow: var(--shadow-sm);
} }
#search button { #search button {
padding: 0 .5em; margin-left: .5em;
padding: 0 .8em;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
} }
form #filters p { form #filters p {
margin: .5em 0 0 0; margin: .5em 0 0 0;
} }
form #filters label { form #filters label {
color: inherit;
display: inline; display: inline;
} }
form #filters input { form #filters input {
@ -57,6 +64,10 @@ form #filters input {
padding: .4em .8em; padding: .4em .8em;
} }
#logs .log {
color: var(--fg-2);
}
td, th { td, th {
width: 1%; width: 1%;
text-align: left; text-align: left;
@ -74,13 +85,14 @@ td.log-content {
white-space: collapse; white-space: collapse;
} }
.log:hover { #logs .log:hover {
background: #fff8; background: color-mix(in srgb, var(--fg-3) 10%, transparent);
} }
.log.warn { #logs .log.warn {
background: #ffe86a; color: var(--col-on-warn);
background: var(--col-warn);
} }
.log.warn:hover { #logs .log.warn:hover {
background: #ffec81; background: var(--col-warn-hover);
} }

43
admin/static/release-list-item.css
View file

@ -5,9 +5,9 @@
flex-direction: row; flex-direction: row;
gap: 1em; gap: 1em;
border-radius: 8px; border-radius: 16px;
background: #f8f8f8f8; background: var(--bg-2);
border: 1px solid #808080; box-shadow: var(--shadow-md);
} }
.release h3, .release h3,
@ -16,11 +16,15 @@
} }
.release-artwork { .release-artwork {
margin: auto 0;
width: 96px; width: 96px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border-radius: 4px;
overflow: hidden;
box-shadow: var(--shadow-sm);
} }
.release-artwork img { .release-artwork img {
@ -42,30 +46,9 @@
gap: .5em; gap: .5em;
} }
.release-links li {
flex-grow: 1;
}
.release-links a {
padding: .5em;
display: block;
border-radius: 8px;
text-decoration: none;
color: #f0f0f0;
background: #303030;
text-align: center;
transition: color .1s, background .1s;
}
.release-links a:hover {
color: #303030;
background: #f0f0f0;
}
.release-actions { .release-actions {
margin-top: .5em; margin-top: .5em;
user-select: none;
} }
.release-actions a { .release-actions a {
@ -74,14 +57,14 @@
display: inline-block; display: inline-block;
border-radius: 4px; border-radius: 4px;
background: #e0e0e0; background: var(--bg-3);
box-shadow: var(--shadow-sm);
transition: color .1s, background .1s; transition: color .1s ease-out, background .1s ease-out;
} }
.release-actions a:hover { .release-actions a:hover {
color: #303030; background: var(--bg-0);
background: #f0f0f0; color: var(--fg-3);
text-decoration: none; text-decoration: none;
} }

7
admin/templates/html/layout.html
View file

@ -16,10 +16,9 @@
<body> <body>
<header> <header>
<nav> <nav>
<img src="/img/favicon.png" alt="" class="icon"> <a href="/" class="nav icon" aria-label="ari melody" title="Return to Home">
<div class="nav-item"> <img src="/img/favicon.png" alt="">
<a href="/">ari melody</a> </a>
</div>
<div class="nav-item"> <div class="nav-item">
<a href="/admin">home</a> <a href="/admin">home</a>
</div> </div>

2
admin/templates/html/logs.html
View file

@ -9,7 +9,7 @@
<main> <main>
<h1>Audit Logs</h1> <h1>Audit Logs</h1>
<form action="/admin/logs" method="GET"> <form action="/admin/logs" method="GET" id="search-form">
<div id="search"> <div id="search">
<input type="text" name="q" value="" placeholder="Filter by message..."> <input type="text" name="q" value="" placeholder="Filter by message...">
<button type="submit" class="save">Search</button> <button type="submit" class="save">Search</button>