Add cover to album detail page

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)]]])

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)]]])

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]]))

src/cljs/airsonic_ui/views/album.cljs

@@ -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]])])