See #973: artist card

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

@@ -2,7 +2,7 @@
   <div class="card app-card">
     <div
       @click="$router.push({name: 'library.albums.detail', params: {id: album.id}})"
-      :class="['ui', 'image', {'default-cover': !album.cover.original}]" v-lazy:background-image="imageUrl">
+      :class="['ui', 'head-image', 'image', {'default-cover': !album.cover.original}]" v-lazy:background-image="imageUrl">
       <play-button :icon-only="true" :is-playable="album.is_playable" :button-classes="['ui', 'circular', 'large', 'orange', 'icon', 'button']" :album="album"></play-button>
     </div>
     <div class="content">
@@ -58,4 +58,8 @@ export default {
   background-image: url("../../../assets/audio/default-cover.png") !important;
 }
 
+.card.app-card > .head-image > .icon {
+  margin: 0.5em;
+
+}
 </style>

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

@@ -1,28 +1,20 @@
 <template>
-  <div class="flat inline card">
+  <div class="app-card card">
-    <div :class="['ui', 'image', 'with-overlay', {'default-cover': !cover.original}]" v-lazy:background-image="imageUrl">
+    <div :class="['ui', 'head-image', 'circular', 'image', {'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>
+      <play-button :icon-only="true" :is-playable="artist.is_playable" :button-classes="['ui', 'circular', 'large', 'orange', 'icon', 'button']" :artist="artist"></play-button>
     </div>
     <div class="content">
-      <router-link :title="artist.name" :to="{name: 'library.artists.detail', params: {id: artist.id}}">
+      <strong>
+        <router-link class="discrete link" :title="artist.name" :to="{name: 'library.artists.detail', params: {id: artist.id}}">
           {{ artist.name|truncate(30) }}
         </router-link>
-      <div v-if="artist.albums.length > 0">
+      </strong>
-        <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>
-      <div v-else-if="artist.tracks_count">
-        <i class="small sound icon"></i>
-        <translate translate-context="Content/Artist/Card" :translate-params="{count: artist.tracks_count}" :translate-n="artist.tracks_count" translate-plural="%{ count } tracks">1 track</translate>
-      </div>
-      <tags-list label-classes="tiny" :truncate-size="20" :limit="2" :show-more="false" :tags="artist.tags"></tags-list>
 
-      <play-button
+      <tags-list label-classes="tiny" :truncate-size="20" :limit="2" :show-more="false" :tags="artist.tags"></tags-list>
-        class="play-button basic icon"
+    </div>
-        :dropdown-only="true"
+    <div class="extra content">
-        :is-playable="artist.is_playable"
+      <translate translate-context="*/*/*" :translate-params="{count: artist.tracks_count}" :translate-n="artist.tracks_count" translate-plural="%{ count } tracks">%{ count } track</translate>
-        :dropdown-icon-classes="['ellipsis', 'vertical', 'large', 'grey']"
+      <play-button class="right floated basic icon" :dropdown-only="true" :is-playable="artist.is_playable" :dropdown-icon-classes="['ellipsis', 'horizontal', 'large', 'grey']" :artist="artist"></play-button>
-        :artist="artist"></play-button>
     </div>
   </div>
 </template>
@@ -72,24 +64,4 @@ export default {
 .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/library/Artists.vue

@@ -42,7 +42,7 @@
         </div>
       </div>
       <div class="ui hidden divider"></div>
-      <div v-if="result && result.results.length > 0" class="ui three cards">
+      <div v-if="result && result.results.length > 0" class="ui five app-cards cards">
         <div v-if="isLoading" class="ui inverted active dimmer">
           <div class="ui loader"></div>
         </div>

front/src/style/_main.scss

@@ -354,20 +354,6 @@ td.align.right {
   word-wrap: break-word;
 }
 
-.ui.cards > .flat.card, .flat.card {
-  box-shadow: none;
-  .content {
-    border: none;
-  }
-}
-
-.ui.cards > .inline.card {
-  flex-direction: row;
-  .content {
-    padding: 0.5em 0.75em;
-  }
-}
-
 .ui.checkbox label {
   cursor: pointer;
 }
@@ -439,21 +425,30 @@ input + .help {
   }
 }
 .ui.cards.app-cards {
-  > .app-card {
+  $card-width: 14em;
-    display: inline-block;
+  $card-hight: 22em;
-    width: 15em;
+  .app-card {
-    > .image {
+    display: flex;
+    width: $card-width;
+    height: $card-hight;
+    .head-image {
+      height: $card-width;
       background-size: cover !important;
       background-position: center !important;
-      height: 15em;
-      width: 15em;
       display: flex !important;
       justify-content: flex-end !important;
       align-items: flex-end !important;
-      padding: 0.5em;
       .button {
         margin: 0;
       }
+      &.circular {
+        overflow: visible;
+        border-radius: 50% !important;
+        height: $card-width - 1em;
+        width: $card-width - 1em;
+        margin: 0.5em;
+
+      }
     }
     .extra {
       border-top: 0 !important;
@@ -462,6 +457,7 @@ input + .help {
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
+      padding-bottom: 0;
     }
     .floating.dropdown > .icon {
       margin-right: 0;