diff --git a/src/cljs/airsonic_ui/views/album.cljs b/src/cljs/airsonic_ui/views/album.cljs index eca8f73..945db62 100644 --- a/src/cljs/airsonic_ui/views/album.cljs +++ b/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 - (for [[idx album] (map-indexed vector albums)] - [:div.column.is-2 {:key idx} [preview album]])])]) + [: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-one-half-mobile + [preview album]])]]) diff --git a/src/cljs/airsonic_ui/views/bottom_bar.cljs b/src/cljs/airsonic_ui/views/bottom_bar.cljs index 0cb8d32..4cfbbc7 100644 --- a/src/cljs/airsonic_ui/views/bottom_bar.cljs +++ b/src/cljs/airsonic_ui/views/bottom_bar.cljs @@ -20,8 +20,9 @@ [(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])} - [icon icon-glyph]]) + ^{:key icon-glyph} [:p.control>button.button.is-light + {:on-click #(dispatch [event])} + [icon icon-glyph]]) buttons))]) (def logo-url "https://airsonic.github.io/airsonic-ui/assets/images/logo/airsonic-light-350x100.png") @@ -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 diff --git a/src/sass/app.sass b/src/sass/app.sass index 7bc7eca..1056156 100644 --- a/src/sass/app.sass +++ b/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