Simplify album listing view function, add text-overflow to thumbs

src/cljs/airsonic_ui/views/album.cljs

@@ -17,7 +17,7 @@
 (defn listing [albums]
   ;; always show 5 in a row
   [:div
-   (for [albums (partition-all 6 albums)]
-     [:div.columns
+   [:div.columns.is-multiline.is-mobile
     (for [[idx album] (map-indexed vector albums)]
-        [:div.column.is-2 {:key idx} [preview album]])])])
+      ^{:key idx} [:div.column.is-one-fifth-desktop.is-one-quarter-tablet.is-one-half-mobile
+                   [preview album]])]])

src/cljs/airsonic_ui/views/bottom_bar.cljs

@@ -20,7 +20,8 @@
                   [(if is-playing? :media-pause :media-play) ::events/toggle-play-pause]
                   [:media-step-forward ::events/next-song]]]
      (map (fn [[icon-glyph event]]
-            [:p.control>button.button.is-light {:on-click #(dispatch [event])}
+            ^{:key icon-glyph} [:p.control>button.button.is-light
+                                {:on-click #(dispatch [event])}
                                 [icon icon-glyph]])
           buttons))])
 
@@ -29,7 +30,6 @@
 (defn bottom-bar []
   (let [currently-playing @(subscribe [::subs/currently-playing])
         is-playing? @(subscribe [::subs/is-playing?])]
-    (println "is-playing?" is-playing?)
     [:nav.navbar.is-fixed-bottom.playback-area
      [:div.navbar-brand
       [:div.navbar-item

src/sass/app.sass

@@ -49,8 +49,14 @@
   .missing-cover
     display: block
 
-  // make sure the grid doesn't overflow
-  .album-preview &
+.album-preview
+  .title,
+  .subtitle
+    overflow: hidden
+    white-space: nowrap
+    text-overflow: ellipsis
+
+  .image.is-256x256
     width: auto
     height: auto
     max-width: 256px