From b40cabe03336d6174d71ffee257a88e7c0fe854c Mon Sep 17 00:00:00 2001
From: Eliot Berriot <contact@eliotberriot.com>
Date: Wed, 13 Feb 2019 09:04:49 +0100
Subject: [PATCH] Fix #707: Fixed cards display issues on medium/small screens

---
 changes/changelog.d/707.bugfix                 |  1 +
 front/src/components/audio/Search.vue          |  7 +++----
 .../components/federation/LibraryWidget.vue    |  2 +-
 front/src/components/library/Artists.vue       | 18 ++++++++----------
 front/src/components/library/Radios.vue        | 17 +++++++++--------
 front/src/components/playlists/CardList.vue    | 18 +++++++++---------
 front/src/components/playlists/Widget.vue      |  2 +-
 front/src/views/content/libraries/Card.vue     |  2 +-
 front/src/views/content/remote/Card.vue        |  2 +-
 9 files changed, 34 insertions(+), 35 deletions(-)
 create mode 100644 changes/changelog.d/707.bugfix

diff --git a/changes/changelog.d/707.bugfix b/changes/changelog.d/707.bugfix
new file mode 100644
index 000000000..3cd05c974
--- /dev/null
+++ b/changes/changelog.d/707.bugfix
@@ -0,0 +1 @@
+Fixed cards display issues on medium/small screens (#707)
diff --git a/front/src/components/audio/Search.vue b/front/src/components/audio/Search.vue
index dd250ca09..307ca878f 100644
--- a/front/src/components/audio/Search.vue
+++ b/front/src/components/audio/Search.vue
@@ -9,9 +9,9 @@
     </div>
     <template v-if="query.length > 0">
       <h3 class="ui title"><translate>Artists</translate></h3>
-      <div v-if="results.artists.length > 0" class="ui stackable three column grid">
-        <div class="column" :key="artist.id" v-for="artist in results.artists">
-          <artist-card class="fluid" :artist="artist" ></artist-card>
+      <div v-if="results.artists.length > 0">
+        <div class="ui cards">
+          <artist-card :key="artist.id" v-for="artist in results.artists" :artist="artist" ></artist-card>
         </div>
       </div>
       <p v-else><translate>No artist matched your query</translate></p>
@@ -101,5 +101,4 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-
 </style>
diff --git a/front/src/components/federation/LibraryWidget.vue b/front/src/components/federation/LibraryWidget.vue
index cf33b0add..b9554d01f 100644
--- a/front/src/components/federation/LibraryWidget.vue
+++ b/front/src/components/federation/LibraryWidget.vue
@@ -10,7 +10,7 @@
     <i @click="fetchData(nextPage)" :disabled="!nextPage" :class="['ui', {disabled: !nextPage}, 'circular', 'angle right', 'icon']">
     </i>
     <div class="ui hidden divider"></div>
-    <div class="ui three cards">
+    <div class="ui cards">
       <div v-if="isLoading" class="ui inverted active dimmer">
         <div class="ui loader"></div>
       </div>
diff --git a/front/src/components/library/Artists.vue b/front/src/components/library/Artists.vue
index ca7e2a5a0..41b3b2c6f 100644
--- a/front/src/components/library/Artists.vue
+++ b/front/src/components/library/Artists.vue
@@ -42,17 +42,15 @@
         v-if="result"
         v-masonry
         transition-duration="0"
-        item-selector=".column"
+        item-selector=".card"
         percent-position="true"
-        stagger="0"
-        class="ui stackable three column doubling grid">
-        <div
-          v-masonry-tile
-          v-if="result.results.length > 0"
-          v-for="artist in result.results"
-          :key="artist.id"
-          class="column">
-          <artist-card class="fluid" :artist="artist"></artist-card>
+        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>
       </div>
       <div class="ui center aligned basic segment">
diff --git a/front/src/components/library/Radios.vue b/front/src/components/library/Radios.vue
index 7aec1d61b..5b433dcb2 100644
--- a/front/src/components/library/Radios.vue
+++ b/front/src/components/library/Radios.vue
@@ -64,17 +64,18 @@
         v-if="result"
         v-masonry
         transition-duration="0"
-        item-selector=".column"
+        item-selector=".card"
         percent-position="true"
-        stagger="0"
-        class="ui stackable three column doubling grid">
+        stagger="0">
         <div
-          v-masonry-tile
           v-if="result.results.length > 0"
-          v-for="radio in result.results"
-          :key="radio.id"
-          class="column">
-          <radio-card class="fluid" type="custom" :custom-radio="radio"></radio-card>
+          class="ui cards">
+          <radio-card
+            type="custom"
+            v-masonry-tile
+            v-for="radio in result.results"
+            :key="radio.id"
+            :custom-radio="radio"></radio-card>
         </div>
       </div>
       <div class="ui center aligned basic segment">
diff --git a/front/src/components/playlists/CardList.vue b/front/src/components/playlists/CardList.vue
index 4d4746090..44504a573 100644
--- a/front/src/components/playlists/CardList.vue
+++ b/front/src/components/playlists/CardList.vue
@@ -3,16 +3,16 @@
     v-if="playlists.length > 0"
     v-masonry
     transition-duration="0"
-    item-selector=".column"
+    item-selector=".card"
     percent-position="true"
-    stagger="0"
-    class="ui stackable three column doubling grid">
-    <div
-      v-masonry-tile
-      v-for="playlist in playlists"
-      :key="playlist.id"
-      class="column">
-      <playlist-card class="fluid" :playlist="playlist"></playlist-card>
+    stagger="0">
+    <div class="ui cards">
+      <playlist-card
+        :playlist="playlist"
+        v-masonry-tile
+        v-for="playlist in playlists"
+        :key="playlist.id"
+      ></playlist-card>
     </div>
   </div>
 </template>
diff --git a/front/src/components/playlists/Widget.vue b/front/src/components/playlists/Widget.vue
index c289e6de9..7329c502e 100644
--- a/front/src/components/playlists/Widget.vue
+++ b/front/src/components/playlists/Widget.vue
@@ -10,7 +10,7 @@
     <div v-if="isLoading" class="ui inverted active dimmer">
       <div class="ui loader"></div>
     </div>
-    <playlist-card class="fluid" v-for="playlist in objects" :key="playlist.id" :playlist="playlist"></playlist-card>
+    <playlist-card v-for="playlist in objects" :key="playlist.id" :playlist="playlist"></playlist-card>
   </div>
 </template>
 
diff --git a/front/src/views/content/libraries/Card.vue b/front/src/views/content/libraries/Card.vue
index 6b327f370..13523b198 100644
--- a/front/src/views/content/libraries/Card.vue
+++ b/front/src/views/content/libraries/Card.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="ui fluid card">
+  <div class="ui card">
     <div class="content">
       <div class="header">
         {{ library.name }}
diff --git a/front/src/views/content/remote/Card.vue b/front/src/views/content/remote/Card.vue
index c9d7ad1a4..364783f3e 100644
--- a/front/src/views/content/remote/Card.vue
+++ b/front/src/views/content/remote/Card.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="ui fluid card">
+  <div class="ui card">
     <div class="content">
       <div class="header">
         {{ library.name }}