From 1998a36d6db956ba5750309b12bedc4ab14b1cc4 Mon Sep 17 00:00:00 2001
From: ari melody <ari@arimelody.me>
Date: Sat, 31 Aug 2024 19:29:57 +0100
Subject: [PATCH] UI improvements

---
 .../components/release/release-list-item.html |   4 +-
 admin/static/admin.css                        |   5 +-
 admin/static/edit-release.css                 |   5 +-
 admin/static/edit-track.css                   | 146 ++++--------------
 admin/static/index.css                        |  95 +-----------
 admin/static/release-list-item.css            |  87 +++++++++++
 admin/templates.go                            |   4 +-
 admin/views/edit-release.html                 |   6 +-
 admin/views/edit-track.html                   |   8 +-
 api/release.go                                |   1 -
 public/style/main.css                         |   5 +-
 public/style/music-gateway.css                |   7 +
 views/music-gateway.html                      |  16 +-
 13 files changed, 148 insertions(+), 241 deletions(-)
 create mode 100644 admin/static/release-list-item.css

diff --git a/admin/components/release/release-list-item.html b/admin/components/release/release-list-item.html
index 44511d8..3a17ad5 100644
--- a/admin/components/release/release-list-item.html
+++ b/admin/components/release/release-list-item.html
@@ -7,7 +7,7 @@
         <h3 class="release-title">
             <a href="/admin/release/{{.ID}}">{{.Title}}</a>
             <small>
-                {{.GetReleaseYear}}
+                <span title="{{.PrintReleaseDate}}">{{.GetReleaseYear}}</span>
                 {{if not .Visible}}(hidden){{end}}
             </small>
         </h3>
@@ -16,7 +16,7 @@
         (<a href="/admin/release/{{.ID}}#tracks">{{len .Tracks}} track{{if not (eq (len .Tracks) 1)}}s{{end}}</a>)</p>
         <div class="release-actions">
             <a href="/admin/release/{{.ID}}">Edit</a>
-            <a href="/music/{{.ID}}" target="_blank">Gateway</a>
+            <a href="/music/{{.ID}}" target="_blank">Gateway <img class="icon" src="/img/external-link.svg"/></a>
         </div>
     </div>
 </div>
diff --git a/admin/static/admin.css b/admin/static/admin.css
index 9092980..0d1269c 100644
--- a/admin/static/admin.css
+++ b/admin/static/admin.css
@@ -80,9 +80,8 @@ a:hover {
     text-decoration: underline;
 }
 
-a img {
-    height: .9em;
-    transform: translateY(.1em);
+a img.icon {
+    height: .8em;
 }
 
 .card {
diff --git a/admin/static/edit-release.css b/admin/static/edit-release.css
index 7321424..e11c562 100644
--- a/admin/static/edit-release.css
+++ b/admin/static/edit-release.css
@@ -50,6 +50,7 @@ input[type="text"] {
     border: 1px solid transparent;
     background: transparent;
     outline: none;
+    cursor: pointer;
 }
 
 #title:hover {
@@ -80,7 +81,9 @@ input[type="text"] {
     vertical-align: top;
     opacity: .66;
 }
-.release-info table tr td:not(:first-child):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) textarea:hover {
     background: #e8e8e8;
     cursor: pointer;
 }
diff --git a/admin/static/edit-track.css b/admin/static/edit-track.css
index 9d60619..ed359ae 100644
--- a/admin/static/edit-track.css
+++ b/admin/static/edit-track.css
@@ -1,3 +1,5 @@
+@import url("/admin/static/release-list-item.css");
+
 h1 {
     margin: 0 0 .5em 0;
 }
@@ -22,8 +24,8 @@ h1 {
     flex-direction: column;
 }
 
-.track-title-header {
-    margin: 0;
+.attribute-header {
+    margin: 1em 0 .2em 0;
     opacity: .5;
 }
 
@@ -33,45 +35,36 @@ h1 {
 
 #title {
     width: 100%;
-    margin: -.1em -.2em;
     padding: .1em .2em;
-    font-weight: bold;
-    font-size: inherit;
-    border-radius: 4px;
-    border: 1px solid transparent;
-    background: transparent;
-    outline: none;
-}
-
-#title:hover {
-    background: #ffffff;
-    border-color: #80808080;
-}
-
-#title:active,
-#title:focus {
-    background: #ffffff;
-    border-color: #808080;
-}
-
-.track-title small {
-    opacity: .75;
-}
-
-.track-info h2 {
-    margin-bottom: .4em;
 }
 
 .track-info textarea {
-    width: 100%;
+    width: calc(100% - 1em);
     padding: .5em;
+    resize: vertical;
+}
+
+.track-info input[type="text"],
+.track-info textarea {
+    font-weight: inherit;
     font-family: inherit;
     font-size: inherit;
-    color: inherit;
-    border: none;
-    outline: none;
-    resize: vertical;
+    border: 1px solid transparent;
     border-radius: 4px;
+    outline: none;
+    color: inherit;
+}
+
+.track-info input[type="text"]:hover,
+.track-info textarea:hover {
+    border-color: #80808080;
+}
+
+.track-info input[type="text"]:active,
+.track-info textarea:active,
+.track-info input[type="text"]:focus,
+.track-info textarea:focus {
+    border-color: #808080;
 }
 
 button, .button {
@@ -130,90 +123,3 @@ a.delete {
     justify-content: right;
 }
 
-.release {
-    margin-bottom: 1em;
-    padding: 1em;
-    display: flex;
-    flex-direction: row;
-    gap: 1em;
-
-    border-radius: .5em;
-    background: #f8f8f8f8;
-    border: 1px solid #808080;
-}
-
-.release h3,
-.release p {
-    margin: 0;
-}
-
-.release-artwork {
-    width: 96px;
-
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.release-artwork img {
-    width: 100%;
-    aspect-ratio: 1;
-}
-
-.release-title small {
-    opacity: .75;
-}
-
-.release-links {
-    margin: .5em 0;
-    padding: 0;
-    display: flex;
-    flex-direction: row;
-    list-style: none;
-    flex-wrap: wrap;
-    gap: .5em;
-}
-
-.release-links li {
-    flex-grow: 1;
-}
-
-.release-links a {
-    padding: .5em;
-    display: block;
-
-    border-radius: .5em;
-    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 {
-    margin-top: .5em;
-}
-
-.release-actions a {
-    margin-right: .3em;
-    padding: .3em .5em;
-    display: inline-block;
-
-    border-radius: .3em;
-    background: #e0e0e0;
-
-    transition: color .1s, background .1s;
-}
-
-.release-actions a:hover {
-    color: #303030;
-    background: #f0f0f0;
-
-    text-decoration: none;
-}
diff --git a/admin/static/index.css b/admin/static/index.css
index fd603a3..ec426af 100644
--- a/admin/static/index.css
+++ b/admin/static/index.css
@@ -1,3 +1,5 @@
+@import url("/admin/static/release-list-item.css");
+
 .create-btn {
     background: #c4ff6a;
     padding: .5em .8em;
@@ -16,99 +18,6 @@
     text-decoration: inherit;
 }
 
-.release {
-    margin-bottom: 1em;
-    padding: 1em;
-    display: flex;
-    flex-direction: row;
-    gap: 1em;
-
-    border-radius: .5em;
-    background: #f8f8f8f8;
-    border: 1px solid #808080;
-}
-
-.release h3,
-.release p {
-    margin: 0;
-}
-
-.release-artwork {
-    width: 96px;
-
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.release-artwork img {
-    width: 100%;
-    aspect-ratio: 1;
-}
-
-.latest-release .release-info {
-    width: 300px;
-    flex-direction: column;
-}
-
-.release-title small {
-    opacity: .75;
-}
-
-.release-links {
-    margin: .5em 0;
-    padding: 0;
-    display: flex;
-    flex-direction: row;
-    list-style: none;
-    flex-wrap: wrap;
-    gap: .5em;
-}
-
-.release-links li {
-    flex-grow: 1;
-}
-
-.release-links a {
-    padding: .5em;
-    display: block;
-
-    border-radius: .5em;
-    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 {
-    margin-top: .5em;
-}
-
-.release-actions a {
-    margin-right: .3em;
-    padding: .3em .5em;
-    display: inline-block;
-
-    border-radius: .3em;
-    background: #e0e0e0;
-
-    transition: color .1s, background .1s;
-}
-
-.release-actions a:hover {
-    color: #303030;
-    background: #f0f0f0;
-
-    text-decoration: none;
-}
-
 .artist {
     margin-bottom: .5em;
     padding: .5em;
diff --git a/admin/static/release-list-item.css b/admin/static/release-list-item.css
new file mode 100644
index 0000000..ee67de7
--- /dev/null
+++ b/admin/static/release-list-item.css
@@ -0,0 +1,87 @@
+.release {
+    margin-bottom: 1em;
+    padding: 1em;
+    display: flex;
+    flex-direction: row;
+    gap: 1em;
+
+    border-radius: .5em;
+    background: #f8f8f8f8;
+    border: 1px solid #808080;
+}
+
+.release h3,
+.release p {
+    margin: 0;
+}
+
+.release-artwork {
+    width: 96px;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.release-artwork img {
+    width: 100%;
+    aspect-ratio: 1;
+}
+
+.release-title small {
+    opacity: .75;
+}
+
+.release-links {
+    margin: .5em 0;
+    padding: 0;
+    display: flex;
+    flex-direction: row;
+    list-style: none;
+    flex-wrap: wrap;
+    gap: .5em;
+}
+
+.release-links li {
+    flex-grow: 1;
+}
+
+.release-links a {
+    padding: .5em;
+    display: block;
+
+    border-radius: .5em;
+    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 {
+    margin-top: .5em;
+}
+
+.release-actions a {
+    margin-right: .3em;
+    padding: .3em .5em;
+    display: inline-block;
+
+    border-radius: .3em;
+    background: #e0e0e0;
+
+    transition: color .1s, background .1s;
+}
+
+.release-actions a:hover {
+    color: #303030;
+    background: #f0f0f0;
+
+    text-decoration: none;
+}
diff --git a/admin/templates.go b/admin/templates.go
index ea7aaaa..af69aba 100644
--- a/admin/templates.go
+++ b/admin/templates.go
@@ -44,7 +44,7 @@ var components = map[string]*template.Template{
 
     "editlinks": template.Must(template.ParseFiles(filepath.Join("admin", "components", "links", "editlinks.html"))),
 
-    "edittracks": template.Must(template.ParseFiles(filepath.Join("admin", "components", "tracks", "addtrack.html"))),
+    "edittracks": template.Must(template.ParseFiles(filepath.Join("admin", "components", "tracks", "edittracks.html"))),
     "addtrack": template.Must(template.ParseFiles(filepath.Join("admin", "components", "tracks", "addtrack.html"))),
-    "newtrack": template.Must(template.ParseFiles(filepath.Join("admin", "components", "tracks", "addtrack.html"))),
+    "newtrack": template.Must(template.ParseFiles(filepath.Join("admin", "components", "tracks", "newtrack.html"))),
 }
diff --git a/admin/views/edit-release.html b/admin/views/edit-release.html
index 3f7c12a..5a9b4f0 100644
--- a/admin/views/edit-release.html
+++ b/admin/views/edit-release.html
@@ -45,7 +45,7 @@
                                 name="Description"
                                 value="{{.Description}}"
                                 placeholder="No description provided."
-                                rows="1"
+                                rows="3"
                                 id="description"
                                 >{{.Description}}</textarea>
                     </td>
@@ -79,7 +79,7 @@
                 </tr>
             </table>
             <div class="release-actions">
-                <a href="/music/{{.ID}}" class="button" target="_blank">Gateway <img src="/img/external-link.svg"/></a>
+                <a href="/music/{{.ID}}" class="button" target="_blank">Gateway <img class="icon" src="/img/external-link.svg"/></a>
                 <button type="submit" class="save" id="save" disabled>Save</button>
             </div>
         </div>
@@ -125,7 +125,7 @@
     </div>
     <div class="card links">
         {{range .Links}}
-        <a href="{{.URL}}" target="_blank" class="button" data-name="{{.Name}}">{{.Name}} <img src="/img/external-link.svg"/></a>
+        <a href="{{.URL}}" target="_blank" class="button" data-name="{{.Name}}">{{.Name}} <img class="icon" src="/img/external-link.svg"/></a>
         {{end}}
     </div>
 
diff --git a/admin/views/edit-track.html b/admin/views/edit-track.html
index 6d72dc1..c8b99d0 100644
--- a/admin/views/edit-track.html
+++ b/admin/views/edit-track.html
@@ -6,16 +6,16 @@
 
 {{define "content"}}
 <main>
-    <h1>Editing Track "{{.Title}}"</h1>
+    <h1>Editing Track</h1>
         
     <div id="track" data-id="{{.ID}}">
         <div class="track-info">
-            <p class="track-title-header">Title</p>
+            <p class="attribute-header">Title</p>
             <h2 class="track-title">
                 <input type="text" id="title" name="Title" value="{{.Title}}">
             </h2>
 
-            <h2>Description</h2>
+            <p class="attribute-header">Description</p>
             <textarea
                     name="Description"
                     value="{{.Description}}"
@@ -24,7 +24,7 @@
                     id="description"
                     >{{.Description}}</textarea>
 
-            <h2>Lyrics</h2>
+            <p class="attribute-header">Lyrics</p>
             <textarea
                     name="Lyrics"
                     value="{{.Lyrics}}"
diff --git a/api/release.go b/api/release.go
index 58b2c35..eeae08f 100644
--- a/api/release.go
+++ b/api/release.go
@@ -256,7 +256,6 @@ func UpdateRelease() http.Handler {
                         fmt.Printf("WARN: Error while cleaning up artwork files: %s\n", err)
                     }
 
-                    fmt.Printf("Artwork for %s updated.\n", update.ID)
                     update.Artwork = fmt.Sprintf("/uploads/musicart/%s.%s", update.ID, ext)
                 } else {
                     update.Artwork = *data.Artwork
diff --git a/public/style/main.css b/public/style/main.css
index d09c7b6..1e71673 100644
--- a/public/style/main.css
+++ b/public/style/main.css
@@ -55,9 +55,8 @@ a.link-button:hover {
     box-shadow: 0 0 1em var(--links);
 }
 
-a img {
-    height: .9em;
-    transform: translateY(.1em);
+a img.icon {
+    height: .8em;
 }
 
 small {
diff --git a/public/style/music-gateway.css b/public/style/music-gateway.css
index b8a03c6..5075b5e 100644
--- a/public/style/music-gateway.css
+++ b/public/style/music-gateway.css
@@ -390,6 +390,13 @@ ul#links a:hover {
     animation: share-after 2s cubic-bezier(.5,0,1,.5) forwards
 }
 
+h2 {
+    width: fit-content;
+    padding: .3em 1em;
+    font-size: 1em;
+    background: #101010;
+}
+
 div#extras ul {
     height: 100%;
     display: flex;
diff --git a/views/music-gateway.html b/views/music-gateway.html
index e76bf0d..8a98e69 100644
--- a/views/music-gateway.html
+++ b/views/music-gateway.html
@@ -80,19 +80,17 @@
                 </ul>
                 {{end}}
 
-                {{if .IsSingle}}
+                {{if .Description}}
+
+                <p id="description">{{.Description}}</p>
+
+                {{else if .IsSingle}}
 
                 {{$Track := index .Tracks 0}}
                 {{if $Track.Description}}
                 <p id="description">{{$Track.Description}}</p>
                 {{end}}
 
-                {{else}}
-
-                {{if .Description}}<p id="description">{{.Description}}
-                </p>
-                {{end}}
-
                 {{end}}
 
                 <button id="share">share</button>
@@ -102,7 +100,7 @@
 
             {{if .Credits}}
             <div id="credits">
-                <h2>credits:</h2>
+                <h2>CREDITS</h2>
                 <ul>
                     {{range .Credits}}
                     {{$Artist := .Artist}}
@@ -132,7 +130,7 @@
 
             {{else if .Tracks}}
             <div id="tracks">
-                <h2>tracks:</h2>
+                <h2>TRACKS</h2>
                 {{range $i, $track := .Tracks}}
                 <details>
                     <summary class="album-track-title">{{$track.Number}}. {{$track.Title}}</summary>