Merge branch '973-cards' into 'develop'

See #973: playlists cards

See merge request funkwhale/funkwhale!988

front/src/components/common/UserLink.vue

@@ -1,11 +1,14 @@
 <template>
   <span>
+    <template v-if="avatar">
       <img
         class="ui tiny circular avatar"
         v-if="user.avatar && user.avatar.small_square_crop"
         v-lazy="$store.getters['instance/absoluteUrl'](user.avatar.small_square_crop)" />
       <span v-else :style="defaultAvatarStyle" class="ui circular label">{{ user.username[0]}}</span>
-    &nbsp;@{{ user.username }}
+      &nbsp;
+    </template>
+    @{{ user.username }}
   </span>
 </template>
 
@@ -13,7 +16,10 @@
 import {hashCode, intToRGB} from '@/utils/color'
 
 export default {
-  props: ['user'],
+  props: {
+    user: {required: true},
+    avatar: {type: Boolean, default: true}
+  },
   computed: {
     userColor () {
       return intToRGB(hashCode(this.user.username + String(this.user.id)))

front/src/components/playlists/Card.vue

@@ -13,7 +13,7 @@
         </router-link>
       </strong>
       <div class="description">
-        <user-link :user="playlist.user" class="left floated" />
+        <user-link :user="playlist.user" :avatar="false" class="left floated" />
       </div>
     </div>
     <div class="extra content">

front/src/components/playlists/Widget.vue

@@ -9,9 +9,10 @@
     <div v-if="isLoading" class="ui inverted active dimmer">
       <div class="ui loader"></div>
     </div>
-    <template v-if="playlistsExist">
+    <div class="ui hidden divider"></div>
+    <div v-if="playlistsExist" class="ui cards app-cards">
       <playlist-card v-for="playlist in objects" :key="playlist.id" :playlist="playlist"></playlist-card>
-    </template>
+    </div>
     <div v-else class="ui placeholder segment">
       <div class="ui icon header">
         <i class="list icon"></i>

front/src/style/_main.scss

@@ -452,6 +452,7 @@ input + .help {
       &.squares {
         display: block !important;
         position: relative;
+        margin-bottom: -1px;
         .button {
           position: absolute;
           bottom: 0.5em;
@@ -463,6 +464,13 @@ input + .help {
           height: 50%;
           margin: 0;
           border-radius: 0;
+          margin-bottom: -4px;
+        }
+        img:nth-child(1) {
+          border-top-left-radius: 3px;
+        }
+        img:nth-child(2) {
+          border-top-right-radius: 3px;
         }
       }
     }