admin dashboard: mobile support!
This commit is contained in:
parent
ad50b9e4fa
commit
70b329c902
GPG key ID:
CF99829C92678188
19 changed files with 201 additions and 56 deletions
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
})
|
||||
});
|
||||
|
|
|
|||
|
|
@ -21,3 +21,7 @@
|
|||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.artist .artist-name {
|
||||
display: block;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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}}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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}}
|
||||
|
|
|
|||
|
|
@ -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}}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
{{end}}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
width: calc(100% - 1rem - 2px);
|
||||
form input {
|
||||
width: calc(100% - 1rem - 2px) !important;
|
||||
}
|
||||
</style>
|
||||
{{end}}
|
||||
|
|
|
|||
|
|
@ -43,25 +43,27 @@
|
|||
|
||||
<hr>
|
||||
|
||||
<table id="logs">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="log-time">Time</th>
|
||||
<th class="log-level">Level</th>
|
||||
<th class="log-type">Type</th>
|
||||
<th class="log-content">Message</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{range .Logs}}
|
||||
<tr class="log {{toLower (parseLevel .Level)}}">
|
||||
<td class="log-time">{{prettyTime .CreatedAt}}</td>
|
||||
<td class="log-level">{{parseLevel .Level}}</td>
|
||||
<td class="log-type">{{titleCase .Type}}</td>
|
||||
<td class="log-content">{{.Content}}</td>
|
||||
</tr>
|
||||
{{end}}
|
||||
</tbody>
|
||||
</table>
|
||||
<div id="logs">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="log-time">Time</th>
|
||||
<th class="log-level">Level</th>
|
||||
<th class="log-type">Type</th>
|
||||
<th class="log-content">Message</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{range .Logs}}
|
||||
<tr class="log {{toLower (parseLevel .Level)}}">
|
||||
<td class="log-time">{{prettyTime .CreatedAt}}</td>
|
||||
<td class="log-level">{{parseLevel .Level}}</td>
|
||||
<td class="log-type">{{titleCase .Type}}</td>
|
||||
<td class="log-content">{{.Content}}</td>
|
||||
</tr>
|
||||
{{end}}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</main>
|
||||
{{end}}
|
||||
|
|
|
|||
|
|
@ -21,6 +21,4 @@
|
|||
<p>There are no releases.</p>
|
||||
{{end}}
|
||||
</main>
|
||||
|
||||
<script type="module" src="/admin/static/admin.js"></script>
|
||||
{{end}}
|
||||
|
|
|
|||
|
|
@ -31,6 +31,4 @@
|
|||
{{end}}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script type="module" src="/admin/static/admin.js"></script>
|
||||
{{end}}
|
||||
|
|
|
|||
1
public/img/hamburger.svg
Normal file
1
public/img/hamburger.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 1 KiB |
Loading…
Add table
Add a link
Reference in a new issue