Merge branch 'artist-cards' into 'develop'

Enhance artists list by using our new artist card and remove masonry

See merge request funkwhale/funkwhale!840

front/src/components/audio/artist/Card.vue

 <template>
-  <div class="ui card">
-    <div class="content">
-        <div class="header">
-          <router-link class="discrete link" :to="{name: 'library.artists.detail', params: {id: artist.id }}">
-            {{ artist.name }}
-          </router-link>
-        </div>
-        <div class="description">
-          <table class="ui compact very basic fixed single line unstackable table">
-            <tbody>
-              <tr v-for="album in albums">
-                <td>
-                  <img class="ui mini image" v-if="album.cover.original" v-lazy="$store.getters['instance/absoluteUrl'](album.cover.small_square_crop)">
-                  <img class="ui mini image" v-else src="../../../assets/audio/default-cover.png">
-                </td>
-                <td colspan="4">
-                  <router-link :title="album.title" class="discrete link" :to="{name: 'library.albums.detail', params: {id: album.id }}">
-                    <strong>{{ album.title }}</strong>
-                  </router-link><br />
-                  {{ album.tracks_count }} tracks
-                </td>
-                <td>
-                  <play-button class="right floated basic icon" :is-playable="album.is_playable" :discrete="true" :album="album"></play-button>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-          <div class="center aligned segment" v-if="artist.albums.length > initialAlbums">
-            <em v-if="!showAllAlbums" @click="showAllAlbums = true" class="expand">
-              <translate translate-context="Content/Artist/Card.Link" :translate-params="{count: artist.albums.length - initialAlbums}" :translate-n="artist.albums.length - initialAlbums" translate-plural="Show %{ count } more albums">Show 1 more album</translate>
-            </em>
-            <em v-else @click="showAllAlbums = false" class="expand">
-              <translate translate-context="Content/*/Card.Link/Verb">Collapse</translate>
-            </em>
-          </div>
-        </div>
+  <div class="flat inline card">
+    <div :class="['ui', 'image', 'with-overlay', {'default-cover': !cover.original}]" v-lazy:background-image="imageUrl">
+      <play-button class="play-overlay" :icon-only="true" :is-playable="artist.is_playable" :button-classes="['ui', 'circular', 'large', 'orange', 'icon', 'button']" :artist="artist"></play-button>
     </div>
-    <div class="extra content">
-        <span>
-          <i class="sound icon"></i>
-            <translate translate-context="Content/Artist/Card" :translate-params="{count: artist.albums.length}" :translate-n="artist.albums.length" translate-plural="%{ count } albums">1 album</translate>
-        </span>
-        <play-button :is-playable="isPlayable" class="mini basic orange right floated" :artist="artist">
-          <translate translate-context="Content/Queue/Button.Label/Short, Verb">Play all</translate>
-        </play-button>
+    <div class="content">
+      <router-link :title="artist.name" :to="{name: 'library.artists.detail', params: {id: artist.id}}">
+        {{ artist.name|truncate(30) }}
+      </router-link>
+      <div>
+        <i class="small sound icon"></i>
+        <translate translate-context="Content/Artist/Card" :translate-params="{count: artist.albums.length}" :translate-n="artist.albums.length" translate-plural="%{ count } albums">1 album</translate>
       </div>
+      <tags-list label-classes="tiny" :truncate-size="20" :limit="2" :show-more="false" :tags="artist.tags"></tags-list>
+
+      <play-button
+        class="play-button basic icon"
+        :dropdown-only="true"
+        :is-playable="artist.is_playable"
+        :dropdown-icon-classes="['ellipsis', 'vertical', 'large', 'grey']"
+        :artist="artist"></play-button>
     </div>
+  </div>
 </template>
 
 <script>
 import backend from '@/audio/backend'
 import PlayButton from '@/components/audio/PlayButton'
+import TagsList from "@/components/tags/List"
 
 export default {
   props: ['artist'],
   components: {
-    PlayButton
+    PlayButton,
+    TagsList
   },
   data () {
     return {
@@ -65,16 +42,23 @@ export default {
     }
   },
   computed: {
-    albums () {
-      if (this.showAllAlbums) {
-        return this.artist.albums
+
+    imageUrl () {
+      let url = '../../../assets/audio/default-cover.png'
+      let cover = this.cover
+      if (cover.original) {
+        url = this.$store.getters['instance/absoluteUrl'](cover.medium_square_crop)
+      } else {
+        return null
       }
-      return this.artist.albums.slice(0, this.initialAlbums)
+      return url
     },
-    isPlayable () {
-      return this.artist.albums.filter((a) => {
-        return a.is_playable
-      }).length > 0
+    cover () {
+      return this.artist.albums.map((a) => {
+        return a.cover
+      }).filter((c) => {
+        return !!c
+      })[0] || {}
     }
   }
 }
@@ -82,4 +66,27 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
+.default-cover {
+  background-image: url("../../../assets/audio/default-cover.png") !important;
+}
+
+.play-button {
+  position: absolute;
+  right: 0;
+  bottom: 40%;
+}
+
+.with-overlay {
+  background-size: cover !important;
+  background-position: center !important;
+  height: 8em;
+  width: 8em;
+  display: flex !important;
+  justify-content: center !important;
+  align-items: center !important;
+}
+.flat.card .with-overlay.image {
+  border-radius: 50% !important;
+  margin: 0 auto;
+}
 </style>

front/src/components/audio/artist/Widget.vue

 <template>
   <div class="wrapper">
-    <h3 class="ui header">
+    <h3 v-if="header" class="ui header">
       <slot name="title"></slot>
       <span class="ui tiny circular label">{{ count }}</span>
     </h3>
@@ -12,28 +12,7 @@
       <div v-if="isLoading" class="ui inverted active dimmer">
         <div class="ui loader"></div>
       </div>
-      <div class="flat inline card" v-for="object in objects" :key="object.id">
-        <div :class="['ui', 'image', 'with-overlay', {'default-cover': !getCover(object).original}]" v-lazy:background-image="getImageUrl(object)">
-          <play-button class="play-overlay" :icon-only="true" :is-playable="object.is_playable" :button-classes="['ui', 'circular', 'large', 'orange', 'icon', 'button']" :artist="object"></play-button>
-        </div>
-        <div class="content">
-          <router-link :title="object.name" :to="{name: 'library.artists.detail', params: {id: object.id}}">
-            {{ object.name|truncate(30) }}
-          </router-link>
-          <div>
-            <i class="small sound icon"></i>
-            <translate translate-context="Content/Artist/Card" :translate-params="{count: object.albums.length}" :translate-n="object.albums.length" translate-plural="%{ count } albums">1 album</translate>
-          </div>
-          <tags-list label-classes="tiny" :truncate-size="20" :limit="2" :show-more="false" :tags="object.tags"></tags-list>
-
-          <play-button
-            class="play-button basic icon"
-            :dropdown-only="true"
-            :is-playable="object.is_playable"
-            :dropdown-icon-classes="['ellipsis', 'vertical', 'large', 'grey']"
-            :artist="object"></play-button>
-        </div>
-      </div>
+      <artist-card :artist="artist" v-for="artist in objects" :key="artist.id"></artist-card>
     </div>
     <div v-if="!isLoading && objects.length === 0">No results matching your query.</div>
   </div>
@@ -42,17 +21,16 @@
 <script>
 import _ from '@/lodash'
 import axios from 'axios'
-import PlayButton from '@/components/audio/PlayButton'
-import TagsList from "@/components/tags/List"
+import ArtistCard from "@/components/audio/artist/Card"
 
 export default {
   props: {
     filters: {type: Object, required: true},
     controls: {type: Boolean, default: true},
+    header: {type: Boolean, default: true},
   },
   components: {
-    PlayButton,
-    TagsList
+    ArtistCard,
   },
   data () {
     return {
@@ -96,23 +74,6 @@ export default {
         this.offset = Math.max(this.offset - this.limit, 0)
       }
     },
-    getImageUrl (object) {
-      let url = '../../../assets/audio/default-cover.png'
-      let cover = this.getCover(object)
-      if (cover.original) {
-        url = this.$store.getters['instance/absoluteUrl'](cover.medium_square_crop)
-      } else {
-        return null
-      }
-      return url
-    },
-    getCover (object) {
-      return object.albums.map((a) => {
-        return a.cover
-      }).filter((c) => {
-        return !!c
-      })[0] || {}
-    }
   },
   watch: {
     offset () {
@@ -127,21 +88,12 @@ export default {
 <style scoped lang="scss">
 @import "../../../style/vendor/media";
 
-.default-cover {
-  background-image: url("../../../assets/audio/default-cover.png") !important;
-}
-
 .wrapper {
   width: 100%;
 }
 .ui.cards {
   justify-content: flex-start;
 }
-.play-button {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-}
 
 .ui.three.cards .card {
   width: 100%;
@@ -151,19 +103,6 @@ export default {
     width: 25em;
   }
 }
-.with-overlay {
-  background-size: cover !important;
-  background-position: center !important;
-  height: 8em;
-  width: 8em;
-  display: flex !important;
-  justify-content: center !important;
-  align-items: center !important;
-}
-.flat.card .with-overlay.image {
-  border-radius: 50% !important;
-  margin: 0 auto;
-}
 </style>
 <style>
 .ui.cards .ui.button {

front/src/components/library/Artists.vue

@@ -35,27 +35,18 @@
             <label><translate translate-context="Content/Search/Dropdown.Label/Noun">Results per page</translate></label>
             <select class="ui dropdown" v-model="paginateBy">
               <option :value="parseInt(12)">12</option>
-              <option :value="parseInt(25)">25</option>
+              <option :value="parseInt(30)">30</option>
               <option :value="parseInt(50)">50</option>
             </select>
           </div>
         </div>
       </div>
       <div class="ui hidden divider"></div>
-      <div
-        v-if="result"
-        v-masonry
-        transition-duration="0"
-        item-selector=".card"
-        percent-position="true"
-        stagger="0">
-        <div v-if="result.results.length > 0" class="ui cards">
-          <artist-card
-            v-masonry-tile
-            v-for="artist in result.results"
-            :key="artist.id"
-            :artist="artist"></artist-card>
+      <div v-if="result && result.results.length > 0" class="ui three cards">
+        <div v-if="isLoading" class="ui inverted active dimmer">
+          <div class="ui loader"></div>
         </div>
+        <artist-card :artist="artist" v-for="artist in result.results" :key="artist.id"></artist-card>
       </div>
       <div class="ui center aligned basic segment">
         <pagination
@@ -108,7 +99,7 @@ export default {
       page: parseInt(this.defaultPage),
       query: this.defaultQuery,
       tags: this.defaultTags.filter((t) => { return t.length > 0 }) || [],
-      paginateBy: parseInt(this.defaultPaginateBy || 12),
+      paginateBy: parseInt(this.defaultPaginateBy || 30),
       orderingDirection: defaultOrdering.direction || "+",
       ordering: defaultOrdering.field,
       orderingOptions: [["creation_date", "creation_date"], ["name", "name"]]
@@ -205,5 +196,22 @@ export default {
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
+<style scoped lang="scss">
+@import "../../style/vendor/media";
+
+.wrapper {
+  width: 100%;
+}
+.ui.cards {
+  justify-content: flex-start;
+}
+
+.ui.three.cards .card {
+  width: 100%;
+}
+@include media(">tablet") {
+  .ui.three.cards .card {
+    width: 25em;
+  }
+}
 </style>

front/src/style/themes/_dark.scss

@@ -8,40 +8,56 @@ $discrete-text-color: rgba(223, 235, 240, 0.904);
 $border-color: rgb(63, 88, 102);
 $light-shadow-color: rgba(223, 235, 240, 0.15);
 $shadow-color: rgba(63, 102, 97, 0.95);
-$box-shadow: 0px 1px 3px 0px rgba(63, 88, 102, 0.95), 0px 0px 0px 1px rgba(63, 88, 102, 0.98);
+$box-shadow: 0px 1px 3px 0px rgba(63, 88, 102, 0.95),
+  0px 0px 0px 1px rgba(63, 88, 102, 0.98);
 $link-color: rgb(255, 144, 0);
 
 .theme-dark {
   background-color: $background-color;
   .ui.labeled.input {
-    input, .label {
+    input,
+    .label {
       background-color: $input-background-color;
       &::placeholder {
         color: $light-background-color;
-
       }
-
     }
   }
   .ui.statistics .statistic {
-    > .label, > .value {
+    > .label,
+    > .value {
       color: $text-color;
     }
   }
-  .ui.link.list.list .active.item, .ui.link.list.list .active.item a:not(.ui) {
+  .ui.link.list.list .active.item,
+  .ui.link.list.list .active.item a:not(.ui) {
     color: inherit;
   }
-  .ui.form textarea, .ui.form select, .ui.selection.dropdown, .ui.dropdown.selected, .ui.dropdown .menu .selected.item, .ui.form input:not([type]), .ui.form input[type="date"], .ui.form input[type="datetime-local"], .ui.form input[type="email"], .ui.form input[type="number"], .ui.form input[type="password"], .ui.form input[type="search"], .ui.form input[type="tel"], .ui.form input[type="time"], .ui.form input[type="text"], .ui.form input[type="file"], .ui.form input[type="url"] {
+  .ui.form textarea,
+  .ui.form select,
+  .ui.selection.dropdown,
+  .ui.dropdown.selected,
+  .ui.dropdown .menu .selected.item,
+  .ui.form input:not([type]),
+  .ui.form input[type="date"],
+  .ui.form input[type="datetime-local"],
+  .ui.form input[type="email"],
+  .ui.form input[type="number"],
+  .ui.form input[type="password"],
+  .ui.form input[type="search"],
+  .ui.form input[type="tel"],
+  .ui.form input[type="time"],
+  .ui.form input[type="text"],
+  .ui.form input[type="file"],
+  .ui.form input[type="url"] {
     background-color: $input-background-color;
     &::placeholder {
       color: $light-background-color;
-
     }
   }
   .ui.dropdown .menu .item:hover {
     background-color: $light-background-color;
     color: $text-color;
-
   }
   .main.pusher > .ui.secondary.menu {
     background-color: $background-color;
@@ -54,7 +70,9 @@ $link-color: rgb(255, 144, 0);
     }
   }
   .ui.modal {
-    > .header, > .content, > .actions {
+    > .header,
+    > .content,
+    > .actions {
       background-color: $background-color;
     }
     > .header {
@@ -65,29 +83,36 @@ $link-color: rgb(255, 144, 0);
       border-top: 1px solid $border-color;
     }
   }
-  main, .main, footer, .modal {
-
+  main,
+  .main,
+  footer,
+  .modal {
     .ui.menu {
       background-color: $light-background-color;
       .item {
-
         color: $text-color;
       }
     }
-    .ui.secondary.menu .dropdown.item:hover, .ui.secondary.menu .link.item:hover, .ui.secondary.menu a.item:hover {
+    .ui.secondary.menu .dropdown.item:hover,
+    .ui.secondary.menu .link.item:hover,
+    .ui.secondary.menu a.item:hover {
       background: $background-color;
       color: $text-color;
     }
-    .header, .ui.form .field > label, .sub.header {
+    .header,
+    .ui.form .field > label,
+    .sub.header {
       color: $text-color;
     }
     .ui.attached.header {
       background-color: transparent;
     }
-    .ui.toggle.checkbox input:checked ~ .box, .ui.toggle.checkbox input:checked ~ label {
+    .ui.toggle.checkbox input:checked ~ .box,
+    .ui.toggle.checkbox input:checked ~ label {
       color: $text-color !important;
     }
-    .ui.toggle.checkbox .box::before, .ui.toggle.checkbox label::before {
+    .ui.toggle.checkbox .box::before,
+    .ui.toggle.checkbox label::before {
       background-color: $light-background-color;
     }
     a:not(.ui):not(.discrete) {
@@ -96,8 +121,12 @@ $link-color: rgb(255, 144, 0);
     .ui.segment:not(.basic) {
       background-color: $light-background-color;
     }
-    .ui.list, .ui.dropdown {
-      .item, div.item, a.item, .button.item {
+    .ui.list,
+    .ui.dropdown {
+      .item,
+      div.item,
+      a.item,
+      .button.item {
         background-color: $background-color;
         color: $discrete-text-color;
       }
@@ -113,10 +142,13 @@ $link-color: rgb(255, 144, 0);
         color: $discrete-text-color;
       }
     }
-    label, .toggle label {
+    label,
+    .toggle label {
       color: $text-color !important;
     }
-    &, .main.pusher, .ui.vertical.segment {
+    &,
+    .main.pusher,
+    .ui.vertical.segment {
       color: $text-color;
       background-color: $background-color;
     }
@@ -125,21 +157,28 @@ $link-color: rgb(255, 144, 0);
       color: $discrete-text-color;
     }
 
-    .ui.table thead th, .ui.table {
+    .ui.table thead th,
+    .ui.table {
       color: $text-color;
     }
     .ui.divider:not(.vertical):not(.horizontal) {
       border-top: 1px solid $border-color;
       border-bottom: 1px solid $border-color;
     }
-    .ui.cards > .card, .ui.card {
+    .ui.cards > .card,
+    .ui.card {
       color: $text-color;
       background-color: $background-color;
-      box-shadow: $box-shadow;
-      .content, .header, .description {
+      &:not(.flat) {
+        box-shadow: $box-shadow;
+      }
+      .content,
+      .header,
+      .description {
         color: $text-color;
       }
-      .extra, .meta {
+      .extra,
+      .meta {
         color: $discrete-text-color;
       }
     }
@@ -150,31 +189,40 @@ $link-color: rgb(255, 144, 0);
     }
 
     // buttons
-    [class='ui button ui button'], [class='ui button'], [class='ui icon button'], [class='ui fluid button'], [class='ui cancel button'] {
+    [class="ui button ui button"],
+    [class="ui button"],
+    [class="ui icon button"],
+    [class="ui fluid button"],
+    [class="ui cancel button"] {
       background-color: $light-background-color;
       color: $text-color;
       &:hover {
         background-color: $button-hover-color;
-
       }
     }
-    .ui.buttons > .ui.button:not(.basic):not(.inverted), .ui.buttons:not(.basic):not(.inverted) > .button {
+    .ui.buttons > .ui.button:not(.basic):not(.inverted),
+    .ui.buttons:not(.basic):not(.inverted) > .button {
       box-shadow: 0px 0px 0px 1px $light-shadow-color inset;
-
     }
-    .ui.basic.buttons:not(:hover):not(.green):not(.orange):not(.yellow):not(.red) .button, .ui.basic.button {
+    .ui.basic.buttons:not(:hover):not(.green):not(.orange):not(.yellow):not(.red)
+      .button,
+    .ui.basic.button {
       box-shadow: 0px 0px 0px 1px $text-color inset;
       &:not(:hover):not(.green):not(.orange):not(.yellow):not(.red) {
         color: $text-color !important;
       }
     }
-    .ui.basic.buttons .button, .ui.basic.button {
+    .ui.basic.buttons .button,
+    .ui.basic.button {
       &:hover {
         color: $text-color !important;
       }
-
     }
-    .ui.basic.buttons:not(.green):not(.orange):not(.yellow):not(.red) .button:hover, .ui.basic.button:not(.green):not(.orange):not(.yellow):not(.red):hover, .ui.basic.button:not(.green):not(.orange):not(.yellow):not(.red):active, .ui.basic.button:not(.green):not(.orange):not(.yellow):not(.red):focus {
+    .ui.basic.buttons:not(.green):not(.orange):not(.yellow):not(.red)
+      .button:hover,
+    .ui.basic.button:not(.green):not(.orange):not(.yellow):not(.red):hover,
+    .ui.basic.button:not(.green):not(.orange):not(.yellow):not(.red):active,
+    .ui.basic.button:not(.green):not(.orange):not(.yellow):not(.red):focus {
       color: $background-color !important;
     }
     // loading /dimmers
@@ -185,7 +233,8 @@ $link-color: rgb(255, 144, 0);
       background-color: $loading-background-color;
     }
     // table
-    .ui.basic.table tbody tr, .ui.table tr td {
+    .ui.basic.table tbody tr,
+    .ui.table tr td {
       border-bottom: 1px solid $border-color;
     }
     .ui.table thead th {
@@ -193,13 +242,15 @@ $link-color: rgb(255, 144, 0);
     }
     .ui.table {
       &:not(.basic) {
-        &, thead th {
+        &,
+        thead th {
           background-color: $light-background-color;
         }
       }
     }
   }
-  .ui.link.list.list a.item:hover, .ui.link.list.list .item a:not(.ui):not(.button):hover {
+  .ui.link.list.list a.item:hover,
+  .ui.link.list.list .item a:not(.ui):not(.button):hover {
     color: $link-color;
   }
   [data-tooltip]::after {
@@ -208,13 +259,13 @@ $link-color: rgb(255, 144, 0);
   }
   .ui.progress > .label {
     color: $text-color;
-
   }
   i.grey.icon {
     color: $text-color !important;
   }
   input {
-    &::selection, &::-moz-selection {
+    &::selection,
+    &::-moz-selection {
       background: $background-color;
       color: $text-color;
     }