Add links to similar artists in collection

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
+   [:section.hero.is-small>div.hero-body>div.container
-    [:div.container
+    [:h1.title (:name artist)]
-     [:h1.title (:name artist)]
+    [:div.content
-     [:div.content
+     [lastfm-bio artist-info]
-      [lastfm-bio artist-info]
+     [artist-links artist-info]]]
-      [artist-links artist-info]]]]
+   [:section.section.is-small>div.container
-   [:section.section>div.container [collection/listing (:album artist)]]])
+    [: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]

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