show more details on album indexes

2 files changed, 19 insertions, 1 deletions

diff --git a/static/site.css b/static/site.css
index abde862c..3d33a5bb 100644
--- a/static/site.css
+++ b/static/site.css
@@ -331,11 +331,23 @@ h1 {
     height: 100%;
 }
 
-.grid-item span {
+.grid-item:hover {
+    text-decoration: none;
+}
+
+.grid-actions .grid-item:hover {
+    text-decoration: underline;
+}
+
+.grid-item span:first-of-type {
     margin-top: 0.45em;
     display: block;
 }
 
+.grid-item:hover span:first-of-type {
+    text-decoration: underline;
+}
+
 .grid-listing > .grid-item {
     flex: 1 1 26%;
 }
diff --git a/upd8.js b/upd8.js
index a05840ae..2404a22c 100644
--- a/upd8.js
+++ b/upd8.js
@@ -1085,6 +1085,7 @@ function getGridHTML({
     srcFn,
     hrefFn,
     altFn,
+    details = false,
     lazy = true
 }) {
     return entries.map(({ large, item }, i) => fixWS`
@@ -1096,6 +1097,9 @@ function getGridHTML({
                 square: true
             })}
             <span>${item.name}</span>
+            ${details && fixWS`
+                <span>(${s(item.tracks.length, 'track')}, ${getDurationString(getTotalDuration(item.tracks))})</span>
+            `}
         </a>
     `).join('\n');
 }
@@ -1256,6 +1260,7 @@ function writeMiscellaneousPages() {
                     <p class="quick-links"><a href="list/">More listings!</a></p>
                     <div class="grid-listing">
                         ${getAlbumGridHTML({
+                            details: true,
                             entries: (albumData
                                 .filter(album => album.isFanon)
                                 .reverse()
@@ -1277,6 +1282,7 @@ function writeMiscellaneousPages() {
                     <p class="quick-links"><a href="list/">More listings!</a></p>
                     <div class="grid-listing">
                         ${getAlbumGridHTML({
+                            details: true,
                             entries: (albumData
                                 .filter(album => album.isOfficial)
                                 .reverse()