From 4ca398be6de3fa2f8c847279475494921aa991cf Mon Sep 17 00:00:00 2001 From: ari melody Date: Wed, 20 Mar 2024 03:56:51 +0000 Subject: [PATCH] some UX improvements Signed-off-by: ari melody --- api/v1/music/music.go | 2 +- api/v1/music/music_types.go | 4 +++ public/script/header.js | 6 +++++ public/style/header.css | 14 +++++++++-- public/style/music-gateway.css | 17 ++++++++++--- views/header.html | 10 +++++--- views/music-gateway.html | 2 +- views/music.html | 45 ++-------------------------------- 8 files changed, 46 insertions(+), 54 deletions(-) diff --git a/api/v1/music/music.go b/api/v1/music/music.go index 06f7380..ad58b97 100644 --- a/api/v1/music/music.go +++ b/api/v1/music/music.go @@ -180,7 +180,7 @@ var placeholders = []Album{ Id: "dream", Title: "Dream", Type: "single", - ReleaseDate: make_date_work("11-Nov-2024"), + ReleaseDate: make_date_work("11-Nov-2022"), Artwork: "https://mellodoot.com/img/music_artwork/mellodoot_-_Dream.webp", Buylink: "https://arimelody.bandcamp.com/track/dream", Links: []AlbumLink{ diff --git a/api/v1/music/music_types.go b/api/v1/music/music_types.go index f6eb250..8c08cce 100644 --- a/api/v1/music/music_types.go +++ b/api/v1/music/music_types.go @@ -154,6 +154,10 @@ func (album Album) ResolveArtwork() string { return "/img/music-artwork/default.png" } +func (album Album) PrintReleaseDate() string { + return album.ReleaseDate.Format("02 January 2006") +} + func (album Album) GetReleaseYear() int { return album.ReleaseDate.Year() } diff --git a/public/script/header.js b/public/script/header.js index 1a66079..4db08c6 100644 --- a/public/script/header.js +++ b/public/script/header.js @@ -1,3 +1,4 @@ +const header_home = document.getElementById("header-home"); const header_links = document.getElementById("header-links"); const hamburger = document.getElementById("header-links-toggle"); @@ -12,3 +13,8 @@ document.addEventListener("click", event => { }); hamburger.addEventListener("click", event => { toggle_header_links(); }); + +header_home.addEventListener("click", event => { + event.preventDefault(); + location.href = "/"; +}); diff --git a/public/style/header.css b/public/style/header.css index f72fbfa..21b9109 100644 --- a/public/style/header.css +++ b/public/style/header.css @@ -19,6 +19,13 @@ nav { align-items: center; } +#header-home { + flex-grow: 1; + display: flex; + gap: .5em; + cursor: pointer; +} + img#header-icon { width: 2em; height: 2em; @@ -28,7 +35,6 @@ img#header-icon { #header-text { width: 11em; - margin-left: -0.5rem; display: flex; flex-direction: column; justify-content: center; @@ -120,6 +126,10 @@ header ul li a:hover { } @media screen and (max-width: 780px) { + header { + font-size: 14px; + } + nav { width: calc(100vw - 2rem); margin: 0; @@ -158,7 +168,7 @@ header ul li a:hover { ul#header-links li span { margin: 0; display: block; - font-size: 1rem; + font-size: 1em; text-align: center; } } diff --git a/public/style/music-gateway.css b/public/style/music-gateway.css index 37f06f3..706e7d0 100644 --- a/public/style/music-gateway.css +++ b/public/style/music-gateway.css @@ -490,7 +490,7 @@ footer a:hover { text-decoration: underline } -@media only screen and (min-width: 800px) { +@media only screen and (min-width: 1105px) { div#music-container:has(:not(> div#info #credits:target):not(> div#info #credits:target)) { div#extras ul li:first-of-type a { color: #eee; @@ -516,7 +516,7 @@ footer a:hover { } } -@media only screen and (max-width: 800px) { +@media only screen and (max-width: 1105px) { main { min-height: calc(100vh - 4rem); } @@ -526,6 +526,7 @@ footer a:hover { height: fit-content; padding: 2rem 0 6rem 0; gap: 1rem; + font-size: 12px; flex-direction: column; text-align: center; } @@ -536,8 +537,10 @@ footer a:hover { } #artwork { - width: 50vw; + width: auto; + max-width: 50vw; height: auto; + max-height: 50vh; } #vertical-line { @@ -558,6 +561,10 @@ footer a:hover { mask-image: none; } + div#info p { + margin: 0 auto; + } + div#extras { display: none; } @@ -572,6 +579,10 @@ footer a:hover { margin: 0; } + #artist { + margin: .2em auto 1em auto; + } + #links { margin: 2rem 0; justify-content: center; diff --git a/views/header.html b/views/header.html index 059bf78..e6f7299 100644 --- a/views/header.html +++ b/views/header.html @@ -2,10 +2,12 @@