start huge dashboard rework; improve dark theme

This commit is contained in:
ari melody 2025-10-21 15:37:40 +01:00
parent 14feb47640
commit f324c249f6
Signed by: ari
GPG key ID: CF99829C92678188
21 changed files with 365 additions and 235 deletions

View file

@ -14,10 +14,10 @@
{{end}}
<h1>Account Settings ({{.Session.Account.Username}})</h1>
<div class="card-title">
<h2>Change Password</h2>
</div>
<div class="card">
<div class="card-header">
<h2>Change Password</h2>
</div>
<form action="/admin/account/password" method="POST" id="change-password">
<label for="current-password">Current Password</label>
<input type="password" id="current-password" name="current-password" value="" autocomplete="current-password" required>
@ -32,10 +32,10 @@
</form>
</div>
<div class="card-title">
<h2>MFA Devices</h2>
</div>
<div class="card mfa-devices">
<div class="card-header">
<h2>MFA Devices</h2>
</div>
{{if .TOTPs}}
{{range .TOTPs}}
<div class="mfa-device">
@ -58,10 +58,10 @@
</div>
</div>
<div class="card-title">
<h2>Danger Zone</h2>
</div>
<div class="card danger">
<div class="card-header">
<h2>Danger Zone</h2>
</div>
<p>
Clicking the button below will delete your account.
This action is <strong>irreversible</strong>.

View file

@ -29,10 +29,10 @@
</div>
</div>
<div class="card-title">
<h2>Featured in</h2>
</div>
<div class="card releases">
<div class="card" id="releases">
<div class="card-header">
<h2>Featured in</h2>
</div>
{{if .Credits}}
{{range .Credits}}
<div class="credit">
@ -54,10 +54,10 @@
{{end}}
</div>
<div class="card-title">
<h2>Danger Zone</h2>
</div>
<div class="card danger">
<div class="card" id="danger">
<div class="card-header">
<h2>Danger Zone</h2>
</div>
<p>
Clicking the button below will delete this artist.
This action is <strong>irreversible</strong>.

View file

@ -97,16 +97,16 @@
</div>
</div>
<div class="card-title">
<h2>Credits ({{len .Release.Credits}})</h2>
<a class="button edit"
href="/admin/release/{{.Release.ID}}/editcredits"
hx-get="/admin/release/{{.Release.ID}}/editcredits"
hx-target="body"
hx-swap="beforeend"
>Edit</a>
</div>
<div class="card credits">
<div class="card" id="credits">
<div class="card-header">
<h2>Credits ({{len .Release.Credits}})</h2>
<a class="button edit"
href="/admin/release/{{.Release.ID}}/editcredits"
hx-get="/admin/release/{{.Release.ID}}/editcredits"
hx-target="body"
hx-swap="beforeend"
>Edit</a>
</div>
{{range .Release.Credits}}
<div class="credit">
<img src="{{.Artist.GetAvatar}}" alt="" width="64" loading="lazy" class="artist-avatar">
@ -126,31 +126,33 @@
{{end}}
</div>
<div class="card-title">
<h2>Links ({{len .Release.Links}})</h2>
<a class="button edit"
href="/admin/release/{{.Release.ID}}/editlinks"
hx-get="/admin/release/{{.Release.ID}}/editlinks"
hx-target="body"
hx-swap="beforeend"
>Edit</a>
</div>
<div class="card links">
{{range .Release.Links}}
<a href="{{.URL}}" target="_blank" class="button" data-name="{{.Name}}">{{.Name}} <img class="icon" src="/img/external-link.svg"/></a>
{{end}}
<div class="card" id="links">
<div class="card-header">
<h2>Links ({{len .Release.Links}})</h2>
<a class="button edit"
href="/admin/release/{{.Release.ID}}/editlinks"
hx-get="/admin/release/{{.Release.ID}}/editlinks"
hx-target="body"
hx-swap="beforeend"
>Edit</a>
</div>
<ul>
{{range .Release.Links}}
<a href="{{.URL}}" target="_blank" class="button" data-name="{{.Name}}">{{.Name}} <img class="icon" src="/img/external-link.svg"/></a>
{{end}}
</ul>
</div>
<div class="card-title" id="tracks">
<h2>Tracklist ({{len .Release.Tracks}})</h2>
<a class="button edit"
href="/admin/release/{{.Release.ID}}/edittracks"
hx-get="/admin/release/{{.Release.ID}}/edittracks"
hx-target="body"
hx-swap="beforeend"
>Edit</a>
</div>
<div class="card tracks">
<div class="card" id="tracks">
<div class="card-header" id="tracks">
<h2>Tracklist ({{len .Release.Tracks}})</h2>
<a class="button edit"
href="/admin/release/{{.Release.ID}}/edittracks"
hx-get="/admin/release/{{.Release.ID}}/edittracks"
hx-target="body"
hx-swap="beforeend"
>Edit</a>
</div>
{{range $i, $track := .Release.Tracks}}
<div class="track" data-id="{{$track.ID}}">
<h2 class="track-title">
@ -175,10 +177,10 @@
{{end}}
</div>
<div class="card-title">
<h2>Danger Zone</h2>
</div>
<div class="card danger">
<div class="card" id="danger">
<div class="card-header">
<h2>Danger Zone</h2>
</div>
<p>
Clicking the button below will delete this release.
This action is <strong>irreversible</strong>.

View file

@ -39,10 +39,10 @@
</div>
</div>
<div class="card-title">
<h2>Featured in</h2>
</div>
<div class="card releases">
<div class="card-header">
<h2>Featured in</h2>
</div>
{{if .Releases}}
{{range .Releases}}
{{block "release" .}}{{end}}
@ -52,10 +52,10 @@
{{end}}
</div>
<div class="card-title">
<h2>Danger Zone</h2>
</div>
<div class="card danger">
<div class="card-header">
<h2>Danger Zone</h2>
</div>
<p>
Clicking the button below will delete this track.
This action is <strong>irreversible</strong>.

View file

@ -5,64 +5,70 @@
{{end}}
{{define "content"}}
<main>
<main class="dashboard">
<h1>Dashboard</h1>
<div class="card-title">
<h1>Releases</h1>
<a class="button new" id="create-release">Create New</a>
</div>
<div class="card releases">
{{range .Releases}}
{{block "release" .}}{{end}}
{{end}}
{{if not .Releases}}
<p>There are no releases.</p>
{{end}}
</div>
<div class="card-title">
<h1>Artists</h1>
<a class="button new" id="create-artist">Create New</a>
</div>
<div class="card artists">
{{range $Artist := .Artists}}
<div class="artist">
<img src="{{$Artist.GetAvatar}}" alt="" width="64" loading="lazy" class="artist-avatar">
<a href="/admin/artist/{{$Artist.ID}}" class="artist-name">{{$Artist.Name}}</a>
</div>
{{end}}
{{if not .Artists}}
<p>There are no artists.</p>
{{end}}
</div>
<div class="card-title">
<h1>Tracks</h1>
<a class="button new" id="create-track">Create New</a>
</div>
<div class="card tracks">
<p><em>"Orphaned" tracks that have not yet been bound to a release.</em></p>
<br>
{{range $Track := .Tracks}}
<div class="track">
<h2 class="track-title">
<a href="/admin/track/{{$Track.ID}}">{{$Track.Title}}</a>
</h2>
{{if $Track.Description}}
<p class="track-description">{{$Track.GetDescriptionHTML}}</p>
{{else}}
<p class="track-description empty">No description provided.</p>
<div class="cards">
<div class="card" id="releases">
<div class="card-header">
<h2><a href="/admin/releases/">Releases</a> <small>({{.ReleaseCount}} total)</small></h2>
<a class="button new" id="create-release">Create New</a>
</div>
{{range .Releases}}
{{block "release" .}}{{end}}
{{end}}
{{if $Track.Lyrics}}
<p class="track-lyrics">{{$Track.GetLyricsHTML}}</p>
{{else}}
<p class="track-lyrics empty">There are no lyrics.</p>
{{if not .Releases}}
<p>There are no releases.</p>
{{end}}
</div>
{{end}}
{{if not .Artists}}
<p>There are no artists.</p>
{{end}}
</div>
<div class="card" id="artists">
<div class="card-header">
<h2><a href="/admin/artists/">Artists</a></h2>
<a class="button new" id="create-artist">Create New</a>
</div>
{{if .Artists}}
<div class="artists-group">
{{range $Artist := .Artists}}
<div class="artist">
<img src="{{$Artist.GetAvatar}}" alt="" width="64" loading="lazy" class="artist-avatar">
<a href="/admin/artist/{{$Artist.ID}}" class="artist-name">{{$Artist.Name}}</a>
</div>
{{end}}
</div>
{{else}}
<p>There are no artists.</p>
{{end}}
</div>
<div class="card" id="tracks">
<div class="card-header">
<h2><a href="/admin/tracks/">Tracks</a></h2>
<a class="button new" id="create-track">Create New</a>
</div>
<p><em>"Orphaned" tracks that have not yet been bound to a release.</em></p>
<br>
{{range $Track := .Tracks}}
<div class="track">
<h2 class="track-title">
<a href="/admin/track/{{$Track.ID}}">{{$Track.Title}}</a>
</h2>
{{if $Track.Description}}
<p class="track-description">{{$Track.GetDescriptionHTML}}</p>
{{else}}
<p class="track-description empty">No description provided.</p>
{{end}}
{{if $Track.Lyrics}}
<p class="track-lyrics">{{$Track.GetLyricsHTML}}</p>
{{else}}
<p class="track-lyrics empty">There are no lyrics.</p>
{{end}}
</div>
{{end}}
{{if not .Artists}}
<p>There are no artists.</p>
{{end}}
</div>
</div>
</main>

View file

@ -17,28 +17,42 @@
<header>
<nav>
<a href="/" class="nav icon" aria-label="ari melody" title="Return to Home">
<img src="/img/favicon.png" alt="">
<img src="/img/favicon.png" alt="" width="64" height="64">
</a>
<div class="nav-item">
<div class="nav-item{{if eq .Path "/"}} active{{end}}">
<a href="/admin">home</a>
</div>
{{if .Session.Account}}
<div class="nav-item">
<div class="nav-item{{if eq .Path "/logs"}} active{{end}}">
<a href="/admin/logs">logs</a>
</div>
<hr>
<p class="section-label">music</p>
<div class="nav-item{{if eq .Path "/releases"}} active{{end}}">
<a href="/admin/releases">releases</a>
</div>
<div class="nav-item{{if eq .Path "/artists"}} active{{end}}">
<a href="/admin/artists">artists</a>
</div>
<div class="nav-item{{if eq .Path "/tracks"}} active{{end}}">
<a href="/admin/tracks">tracks</a>
</div>
{{end}}
<div class="flex-fill"></div>
{{if .Session.Account}}
<div class="nav-item">
<div class="nav-item{{if eq .Path "/account"}} active{{end}}">
<a href="/admin/account">account ({{.Session.Account.Username}})</a>
</div>
<div class="nav-item">
<a href="/admin/logout" id="logout">log out</a>
</div>
{{else}}
<div class="nav-item">
<div class="nav-item{{if eq .Path "/login"}} active{{end}}">
<a href="/admin/login" id="login">log in</a>
</div>
<div class="nav-item{{if eq .Path "/register"}} active{{end}}">
<a href="/admin/register" id="register">create account</a>
</div>
{{end}}