Add track numbers and album info to album view

src/cljs/airsonic_ui/components/collection/views.cljs

@@ -1,5 +1,22 @@
 (ns airsonic-ui.components.collection.views
-  (:require [airsonic-ui.views.song :as song]))
+  (:require
+   [airsonic-ui.views.icon :refer [icon]]
+   [airsonic-ui.views.song :as song]))
+
+(defn format-duration [seconds]
+  (let [hours (quot seconds 3600)
+        minutes (quot (rem seconds 3600) 60)
+        seconds (rem seconds 60)]
+    (-> (cond-> ""
+          (> hours 0) (str hours "h ")
+          (> minutes 0) (str minutes "m "))
+        (str seconds "s"))))
+
+(defn collection-info [{:keys [songCount duration year]}]
+  (vec (cond-> [:ul.is-smaller.collection-info
+                [:li [icon :audio-spectrum] (str songCount " tracks")]
+                [:li [icon :clock] (format-duration duration)]]
+         year (conj [:li [icon :calendar] (str "Released in " year)]))))
 
 (defn detail
   "Lists all songs in an album"
@@ -8,5 +25,6 @@
    [:section.hero>div.hero-body
     [:div.container
      [:h2.title (:name album)]
-     [:h3.subtitle (:artist album)]]]
+     [:h3.subtitle (:artist album)]
+     [collection-info album]]]
    [:section.section>div.container [song/listing (:song album)]]])

src/cljs/airsonic_ui/views/song.cljs

@@ -15,7 +15,7 @@
       (:title song)]]))
 
 (defn listing [songs]
-  [:table.table.is-striped.is-hoverable.is-fullwidth>tbody
+  [:table.table.is-striped.is-hoverable.is-fullwidth.song-list>tbody
    (for [[idx song] (map-indexed vector songs)]
      ^{:key idx} [:tr
                      [:td.grow [item songs song idx]]

src/sass/app.sass

@@ -131,3 +131,31 @@
 
   .preview-card .card-content
     padding: 0.375rem 0.75rem 0.75rem
+
+.album-view
+  .collection-info
+    list-style: none
+
+    li
+      display: inline-block
+      margin-left: 0.75rem
+
+      &:first-child
+        margin-left: 0
+
+  .hero + .section
+    padding-top: 0
+    padding-bottom: 0
+
+  .song-list
+    counter-reset: track
+
+    tbody
+      tr
+        counter-increment: track
+
+      td:first-child > div::before
+        color: $grey-light
+        content: counter(track)
+        display: inline
+        padding-right: 0.375rem