diff --git a/src/cljs/airsonic_ui/components/collection/views.cljs b/src/cljs/airsonic_ui/components/collection/views.cljs index a4715f0..e38f1c8 100644 --- a/src/cljs/airsonic_ui/components/collection/views.cljs +++ b/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)]]]) diff --git a/src/cljs/airsonic_ui/views/song.cljs b/src/cljs/airsonic_ui/views/song.cljs index ad1bc66..8f6eccf 100644 --- a/src/cljs/airsonic_ui/views/song.cljs +++ b/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]] diff --git a/src/sass/app.sass b/src/sass/app.sass index f18e6b9..13292fc 100644 --- a/src/sass/app.sass +++ b/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