From 2d05cdf9d61c74483ca21f06098002e174fcf737 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arne=20Schl=C3=BCter?= <arne@schlueter.is>
Date: Sun, 25 Nov 2018 16:33:45 +0100
Subject: [PATCH] Add links to similar artists in collection

---
 .../airsonic_ui/components/artist/views.cljs  | 26 ++++++++++++++-----
 src/sass/app.sass                             | 15 ++++++++---
 2 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/src/cljs/airsonic_ui/components/artist/views.cljs b/src/cljs/airsonic_ui/components/artist/views.cljs
index 3906166..2d57f00 100644
--- a/src/cljs/airsonic_ui/components/artist/views.cljs
+++ b/src/cljs/airsonic_ui/components/artist/views.cljs
@@ -28,18 +28,30 @@
      (when (:musicBrainzId artist-info)
        [musicbrainz-link artist-info])]))
 
+(defn similar-artists
+  "Given an artist-info response will return a list of similar artists"
+  [{similar-artists :similarArtist}]
+  [:div.tags.similar-artists
+   (for [{:keys [id name]} similar-artists]
+     ^{:key id} [:a.tag {:href (routes/url-for ::routes/artist.detail {:id id})} name])])
+
 (defn detail
   "Creates a nice artist page displaying the artist's name, bio (if available and
   listing) their albums."
   [{:keys [artist artist-info]}]
   [:div
-   [:section.hero>div.hero-body
-    [:div.container
-     [:h1.title (:name artist)]
-     [:div.content
-      [lastfm-bio artist-info]
-      [artist-links artist-info]]]]
-   [:section.section>div.container [collection/listing (:album artist)]]])
+   [:section.hero.is-small>div.hero-body>div.container
+    [:h1.title (:name artist)]
+    [:div.content
+     [lastfm-bio artist-info]
+     [artist-links artist-info]]]
+   [:section.section.is-small>div.container
+    [:h2.subtitle "Albums"]
+    [collection/listing (:album artist)]]
+   (when (:similarArtist artist-info)
+     [:section.section.is-small>div.container
+      [:h2.subtitle "Similar artists in your collection"]
+      [similar-artists artist-info]])])
 
 (defn alphabetical-listing
   [artists]
diff --git a/src/sass/app.sass b/src/sass/app.sass
index 9449a26..627497b 100644
--- a/src/sass/app.sass
+++ b/src/sass/app.sass
@@ -148,13 +148,20 @@
       background-color: $light !important
       font-weight: bold
 
+// useful in general to pull elements closer together; bulma es very generous
+// with whitespace
+.section.is-small
+    padding-top: 24px
+    padding-bottom: 24px
+
 // occurs on many pages at the top to show details
 .hero
+  &.is-small + .section
+    padding-top: 0
+
   .media-content
     align-self: center
 
-  &.is-small + .section
-    padding-top: 0
 
 // floating notifications
 .notifications:not(:empty)
@@ -199,7 +206,7 @@
 
     ol
       list-style: none
-    
+
     +tablet
       column-count: 3
     +widescreen
@@ -207,7 +214,7 @@
 
     .group
       margin-bottom: 1.5rem
-      .subtitle.is-4 
+      .subtitle.is-4
         margin-bottom: 1rem
 
 .album.detail