From 7b98b8282d6034af5481acec4613adc62a1421c8 Mon Sep 17 00:00:00 2001 From: heyarne Date: Sat, 7 Dec 2019 22:39:17 +0100 Subject: [PATCH] Move artist overview into library; closes #50 and #52 --- .../airsonic_ui/components/artist/views.cljs | 8 +++-- .../airsonic_ui/components/library/views.cljs | 13 +++++--- src/cljs/airsonic_ui/views.cljs | 10 +++--- src/cljs/airsonic_ui/views/breadcrumbs.cljs | 32 +++++++++++++------ src/cljs/bulma/tabs.cljs | 2 +- src/sass/app.sass | 23 +++++++++---- 6 files changed, 60 insertions(+), 28 deletions(-) diff --git a/src/cljs/airsonic_ui/components/artist/views.cljs b/src/cljs/airsonic_ui/components/artist/views.cljs index 32fbb0b..271b282 100644 --- a/src/cljs/airsonic_ui/components/artist/views.cljs +++ b/src/cljs/airsonic_ui/components/artist/views.cljs @@ -1,5 +1,6 @@ (ns airsonic-ui.components.artist.views (:require [airsonic-ui.components.collection.views :as collection] + [airsonic-ui.components.library.views :as library] [airsonic-ui.routes :as routes] [clojure.string :as str])) @@ -68,7 +69,7 @@ (defn overview "Displays the alphabetical listing of all artists along with some additional information about the collection" - [{:keys [artists]}] + [current-route {:keys [artists]}] (let [artists (:index artists) ;; TODO: Calculations in views should be avoided artists-count (count (mapcat :artist artists)) @@ -76,8 +77,9 @@ (map :albumCount) (reduce +))] [:div - [:section.hero.is-small>div.hero-body + [library/tab-section current-route] + [:section.hero.single-line.is-small>div.hero-body [:div.container [:h1.title "Artists"] - [:p.subtitle.is-5.has-text-grey [:strong artists-count] " artists in your collection with " [:strong album-count] " albums"]]] + [:p.subtitle.is-5.has-text-grey [:strong artists-count] " artists with " [:strong album-count] " albums"]]] [:section.section>div.container [alphabetical-listing artists]]])) diff --git a/src/cljs/airsonic_ui/components/library/views.cljs b/src/cljs/airsonic_ui/components/library/views.cljs index 98247df..cf4a833 100644 --- a/src/cljs/airsonic_ui/components/library/views.cljs +++ b/src/cljs/airsonic_ui/components/library/views.cljs @@ -55,7 +55,8 @@ (->> [[[::routes/library {:kind "recent"}] "Recently played"] [[::routes/library {:kind "newest"}] "Newest additions"] - [[::routes/library {:kind "starred"}] "Starred"]] + [[::routes/library {:kind "starred"}] "Starred"] + [[::routes/artist.overview] "Artists"]] (map (fn [[[id params :as route] label]] (cond-> {:href (apply routes/url-for route) :label label} @@ -63,12 +64,17 @@ (= (:kind params) (:kind current-params))) (assoc :active? true)))))) +(defn tab-section [current-route] + [:section.section.ui-tab-bar.is-small>div.container + [tabs {:items (tab-items current-route)}]]) + (defn main "Renders the pagination and shows a list of all albums with their cover art. The first parameter is the route that's passed in, the second one is the content that has been fetched for that route." [[_ {:keys [kind]} {:keys [page] :or {page 1}} :as current-route] {:keys [scan-status]}] + (println "scan-status" scan-status) (let [library @(subscribe [:library/paginated kind]) page (int page) current-items (get library page) @@ -77,14 +83,13 @@ :items library :url-fn url-fn}]] [:div - [:section.hero.is-small>div.hero-body>div.container + [tab-section current-route] + [:section.hero.single-line.is-small>div.hero-body>div.container [:h2.title "Your library"] (if (:count scan-status) [: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.is-small>div.container - [tabs {:items (tab-items current-route)}]] [:section.section.is-tiny>div.container pagination-links] [:section.section.is-tiny>div.container [collection/listing current-items]] [:section.section.is-tiny>div.container pagination-links]])) diff --git a/src/cljs/airsonic_ui/views.cljs b/src/cljs/airsonic_ui/views.cljs index 947298e..c1d771f 100644 --- a/src/cljs/airsonic_ui/views.cljs +++ b/src/cljs/airsonic_ui/views.cljs @@ -60,17 +60,19 @@ [:nav.navbar.is-fixed-top.is-dark {:role "navigation", :aria-label "search and navigation"} ;; user is `nil` when we're not logged in, we can hide the extended navigation [:div.navbar-brand - [:div.navbar-item + [:div.navbar-item [:a {:href (url-for ::routes/library)} [:img {:src logo-url}]] [:div.navbar-burger.burger {:on-click toggle-navbar-active!} - (for [idx (range 3)] ^{:key (str "burger-" idx)} [:span])]]] + [:span] + [:span] + [:span]]]] (when user [(if @navbar-active? :div.navbar-menu.is-active :div.navbar-menu) [:div.navbar-start [:div.navbar-item [search/form]]] [:div.navbar-end [:a.navbar-item {:href (url-for ::routes/current-queue) - :title "Current queue"} [icon :audio-spectrum]] + :title "Current queue"} [:span.heart-beat [icon :audio-spectrum]]] (when stream-role [navbar-dropdown "Library" [[{:href (url-for ::routes/library {:kind "recent"})} "Recently played"] @@ -112,7 +114,7 @@ [breadcrumbs route content] (case route-id ::routes/library [library/main route content] - ::routes/artist.overview [artist/overview content] + ::routes/artist.overview [artist/overview route content] ::routes/artist.detail [artist/detail content] ::routes/album.detail [collection/detail content] ::routes/search [search/results content] diff --git a/src/cljs/airsonic_ui/views/breadcrumbs.cljs b/src/cljs/airsonic_ui/views/breadcrumbs.cljs index c958315..bab6a05 100644 --- a/src/cljs/airsonic_ui/views/breadcrumbs.cljs +++ b/src/cljs/airsonic_ui/views/breadcrumbs.cljs @@ -17,36 +17,48 @@ (when content-pending? [:span.loader])]]]])) (defmulti breadcrumbs - (fn dispatch-on [[route-id] content] route-id)) + ;; the first parameter is always the current route, the second parameter is + ;; whatever the subscriptions return as the current content (e.g. album title) + (fn dispatch-on [[route-id] _] route-id)) (defmethod breadcrumbs :default [_ _] - [bulma-breadcrumbs "Start"]) + [bulma-breadcrumbs "Airsonic"]) -(def start [(url-for ::routes/library) "Start"]) +(defmethod breadcrumbs ::routes/library [[_ params] _] + [bulma-breadcrumbs + [(url-for ::routes/library {:kind "recent"}) "Library"] + (case (:kind params) + "recent" "Recently played" + "newest" "Newest additions" + "starred" "Starred")]) (defmethod breadcrumbs ::routes/artist.overview [_ _] - [bulma-breadcrumbs start "Artists"]) + [bulma-breadcrumbs + [(url-for ::routes/library {:kind "recent"}) "Library"] + "Artists"]) (defmethod breadcrumbs ::routes/artist.detail [_ {:keys [artist]}] - [bulma-breadcrumbs start + [bulma-breadcrumbs + [(url-for ::routes/library {:kind "recent"}) "Library"] [(url-for ::routes/artist.overview) "Artists"] (:name artist)]) (defmethod breadcrumbs ::routes/album.detail [_ {:keys [album]}] - [bulma-breadcrumbs start + [bulma-breadcrumbs + [(url-for ::routes/library {:kind "recent"}) "Library"] [(url-for ::routes/artist.overview) "Artists"] [(url-for ::routes/artist.detail {:id (:artistId album)}) (:artist album)] (:name album)]) (defmethod breadcrumbs ::routes/search [_ _] - [bulma-breadcrumbs start "Search"]) + [bulma-breadcrumbs "Search"]) (defmethod breadcrumbs ::routes/podcast.overview [_ _] ;; TODO: Detail view - [bulma-breadcrumbs start "Podcasts"]) + [bulma-breadcrumbs "Podcasts"]) (defmethod breadcrumbs ::routes/current-queue [_ _] - [bulma-breadcrumbs start "Current Queue"]) + [bulma-breadcrumbs "Current Queue"]) (defmethod breadcrumbs ::routes/about [_ _] - [bulma-breadcrumbs start "About"]) + [bulma-breadcrumbs "About"]) diff --git a/src/cljs/bulma/tabs.cljs b/src/cljs/bulma/tabs.cljs index 67146e6..95f36f8 100644 --- a/src/cljs/bulma/tabs.cljs +++ b/src/cljs/bulma/tabs.cljs @@ -1,7 +1,7 @@ (ns bulma.tabs) (defn tabs [{:keys [items]}] - [:div.tabs + [:div.tabs.is-boxed [:ul (for [[idx {:keys [href label active?]}] (map-indexed vector items)] ^{:key idx} [:li (when active? {:class "is-active"}) diff --git a/src/sass/app.sass b/src/sass/app.sass index ee8d8dc..ef7660c 100644 --- a/src/sass/app.sass +++ b/src/sass/app.sass @@ -228,19 +228,30 @@ &.is-tiny padding: 0.75rem 1.5rem -// tab bar on top -.ui-tab-bar - padding-top: 100px - padding-bottom: 0.75rem + // tab bar on top + &.ui-tab-bar + padding-bottom: 0.75rem // occurs on many pages at the top to show details .hero &.is-small + .section - padding-top: 0 + padding: 1.5rem 1.5rem + + &.is-tiny + .section + padding: 0.75rem 1.5rem .media-content align-self: center + // modifies our headlines to be next to each other + +tablet + &.single-line .container + display: flex + align-items: baseline + .title + flex-grow: 1 + margin-bottom: 0 + // floating notifications .notifications:not(:empty) @extend .container @@ -363,4 +374,4 @@ tr.sortable-is-moving.is-playing // Navigation fixes .navbar-brand > .navbar-item > a display: flex - align-items: center \ No newline at end of file + align-items: center