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 0000000000..3cd05c9743
--- /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 dd250ca09f..307ca878f8 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 cf33b0add4..b9554d01ff 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 ca7e2a5a03..41b3b2c6fb 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 7aec1d61b0..5b433dcb2d 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 4d4746090f..44504a5738 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 c289e6de9f..7329c502ec 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 6b327f370c..13523b198f 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 c9d7ad1a4b..364783f3ea 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 }}
--
GitLab