Commit db5b28ab authored by Eliot Berriot's avatar Eliot Berriot
Browse files

Merge branch '707-card-width' into 'master'

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

See merge request funkwhale/funkwhale!614
parents 5f1b31a5 b40cabe0
Fixed cards display issues on medium/small screens (#707)
......@@ -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>
......@@ -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>
......
......@@ -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">
......
......@@ -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">
......
......@@ -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>
......
......@@ -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>
......
<template>
<div class="ui fluid card">
<div class="ui card">
<div class="content">
<div class="header">
{{ library.name }}
......
<template>
<div class="ui fluid card">
<div class="ui card">
<div class="content">
<div class="header">
{{ library.name }}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment