From 548f793824f457e05e53b18d95fc1e4fc6c92819 Mon Sep 17 00:00:00 2001
From: Eliot Berriot <contact@eliotberriot.com>
Date: Mon, 6 Jan 2020 10:16:05 +0100
Subject: [PATCH] See #973: playlists cards

---
 front/src/components/common/UserLink.vue  | 20 +++++++++++++-------
 front/src/components/playlists/Card.vue   |  2 +-
 front/src/components/playlists/Widget.vue |  5 +++--
 front/src/style/_main.scss                |  8 ++++++++
 4 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/front/src/components/common/UserLink.vue b/front/src/components/common/UserLink.vue
index 194fdbe08..1631cb93a 100644
--- a/front/src/components/common/UserLink.vue
+++ b/front/src/components/common/UserLink.vue
@@ -1,11 +1,14 @@
 <template>
   <span>
-    <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 }}
+    <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;
+    </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)))
diff --git a/front/src/components/playlists/Card.vue b/front/src/components/playlists/Card.vue
index 081624c25..4456ce48f 100644
--- a/front/src/components/playlists/Card.vue
+++ b/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">
diff --git a/front/src/components/playlists/Widget.vue b/front/src/components/playlists/Widget.vue
index c9094d537..3d58ef1a9 100644
--- a/front/src/components/playlists/Widget.vue
+++ b/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>
diff --git a/front/src/style/_main.scss b/front/src/style/_main.scss
index 9af436acc..1a6a1bd23 100644
--- a/front/src/style/_main.scss
+++ b/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;
         }
       }
     }