From 662eef58add6b3289bcaf680b89cdb02e8dea3d7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Arne=20Schl=C3=BCter?= Date: Wed, 5 Sep 2018 12:46:21 +0200 Subject: [PATCH] Add cover to album detail page --- .../airsonic_ui/components/artist/views.cljs | 4 +- .../components/collection/views.cljs | 39 ++++++++++++++++--- .../airsonic_ui/components/library/views.cljs | 6 +-- src/cljs/airsonic_ui/views/album.cljs | 23 ----------- 4 files changed, 38 insertions(+), 34 deletions(-) delete mode 100644 src/cljs/airsonic_ui/views/album.cljs diff --git a/src/cljs/airsonic_ui/components/artist/views.cljs b/src/cljs/airsonic_ui/components/artist/views.cljs index a0b287e..60a8391 100644 --- a/src/cljs/airsonic_ui/components/artist/views.cljs +++ b/src/cljs/airsonic_ui/components/artist/views.cljs @@ -1,5 +1,5 @@ (ns airsonic-ui.components.artist.views - (:require [airsonic-ui.views.album :as album] + (:require [airsonic-ui.components.collection.views :as collection] [clojure.string :as str])) (defn link-button [attrs children] @@ -35,4 +35,4 @@ [lastfm-link artist-info]) (when (:musicBrainzId artist-info) [musicbrainz-link artist-info])])]]] - [:section.section>div.container [album/listing (:album artist)]]]) + [:section.section>div.container [collection/listing (:album artist)]]]) diff --git a/src/cljs/airsonic_ui/components/collection/views.cljs b/src/cljs/airsonic_ui/components/collection/views.cljs index e38f1c8..81da09e 100644 --- a/src/cljs/airsonic_ui/components/collection/views.cljs +++ b/src/cljs/airsonic_ui/components/collection/views.cljs @@ -1,7 +1,10 @@ (ns airsonic-ui.components.collection.views - (:require - [airsonic-ui.views.icon :refer [icon]] - [airsonic-ui.views.song :as song])) + "A collection is a list of audio files that belong together (e.g. an album or + a podcast's overview)" + (:require [airsonic-ui.routes :as routes :refer [url-for]] + [airsonic-ui.views.cover :refer [cover card]] + [airsonic-ui.views.icon :refer [icon]] + [airsonic-ui.views.song :as song])) (defn format-duration [seconds] (let [hours (quot seconds 3600) @@ -18,13 +21,37 @@ [:li [icon :clock] (format-duration duration)]] year (conj [:li [icon :calendar] (str "Released in " year)])))) + +(defn preview [album] + (let [{:keys [artist artistId name id]} album] + [card album + :url-fn #(url-for ::routes/album-view {:id id}) + :content [:div + ;; link to album + [:div.title.is-5 + [:a {:href (url-for ::routes/album-view {:id id}) + :title name} name]] + ;; link to artist page + [:div.subtitle.is-6 [:a {:href (url-for ::routes/artist-view {:id artistId}) + :title artist} artist]]]])) + +(defn listing [albums] + ;; always show 5 in a row + [:div.columns.is-multiline.is-mobile + (for [[idx album] (map-indexed vector albums)] + ^{:key idx} [:div.column.is-one-fifth-desktop.is-one-quarter-tablet.is-half-mobile + [preview album]])]) + (defn detail "Lists all songs in an album" [{:keys [album]}] [:div [:section.hero>div.hero-body [:div.container - [:h2.title (:name album)] - [:h3.subtitle (:artist album)] - [collection-info album]]] + [:article.media + [:div.media-left [cover album 128]] + [:div.media-content + [:h2.title (:name album)] + [:h3.subtitle (:artist album)] + [collection-info album]]]]] [:section.section>div.container [song/listing (:song album)]]]) diff --git a/src/cljs/airsonic_ui/components/library/views.cljs b/src/cljs/airsonic_ui/components/library/views.cljs index 4b0f0d4..f61cc07 100644 --- a/src/cljs/airsonic_ui/components/library/views.cljs +++ b/src/cljs/airsonic_ui/components/library/views.cljs @@ -1,6 +1,6 @@ (ns airsonic-ui.components.library.views (:require [airsonic-ui.routes :as routes :refer [url-for]] - [airsonic-ui.views.album :as album] + [airsonic-ui.components.collection.views :as collection] [airsonic-ui.helpers :refer [add-classes]])) (defn tabs [{:keys [items active-item]}] @@ -50,11 +50,11 @@ [:section.hero.is-small>div.hero-body>div.container [:h2.title "Your library"] (if (:count scan-status) - [:p.subtitle.is-5.has-text-grey "Containing " [:strong (:count scan-status)] " items"] + [:p.subtitle.is-5.has-text-grey [:strong (:count scan-status)] " items"] (when (:scanning scan-status) [:p.subtitle.is-5.has-text-grey "Scanning…"]))] [:section.section>div.container [tabs {:items tab-items :active-item {:criteria criteria}}] pagination - [:section.section [album/listing (:album album-list)]] + [:section.section [collection/listing (:album album-list)]] pagination]])) diff --git a/src/cljs/airsonic_ui/views/album.cljs b/src/cljs/airsonic_ui/views/album.cljs deleted file mode 100644 index 645d68c..0000000 --- a/src/cljs/airsonic_ui/views/album.cljs +++ /dev/null @@ -1,23 +0,0 @@ -(ns airsonic-ui.views.album - (:require [airsonic-ui.routes :as routes :refer [url-for]] - [airsonic-ui.views.cover :refer [cover card]])) - -(defn preview [album] - (let [{:keys [artist artistId name id]} album] - [card album - :url-fn #(url-for ::routes/album-view {:id id}) - :content [:div - ;; link to album - [:div.title.is-5 - [:a {:href (url-for ::routes/album-view {:id id}) - :title name} name]] - ;; link to artist page - [:div.subtitle.is-6 [:a {:href (url-for ::routes/artist-view {:id artistId}) - :title artist} artist]]]])) - -(defn listing [albums] - ;; always show 5 in a row - [:div.columns.is-multiline.is-mobile - (for [[idx album] (map-indexed vector albums)] - ^{:key idx} [:div.column.is-one-fifth-desktop.is-one-quarter-tablet.is-half-mobile - [preview album]])])