Fix #707: Fixed cards display issues on medium/small screens

changes/changelog.d/707.bugfix

+Fixed cards display issues on medium/small screens (#707)

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>

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>

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">

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">

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>

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>
 

front/src/views/content/libraries/Card.vue

 <template>
-  <div class="ui fluid card">
+  <div class="ui card">
     <div class="content">
       <div class="header">
         {{ library.name }}

front/src/views/content/remote/Card.vue

 <template>
-  <div class="ui fluid card">
+  <div class="ui card">
     <div class="content">
       <div class="header">
         {{ library.name }}