From 53ff2027efd65ba7f831affc495c61ec21c6dc46 Mon Sep 17 00:00:00 2001
From: Eliot Berriot <contact@eliotberriot.com>
Date: Fri, 8 Feb 2019 16:15:51 +0100
Subject: [PATCH] Fix #694: resizing issues on album cards
---
changes/changelog.d/694.bugfix | 1 +
front/src/components/audio/album/Card.vue | 28 +++++++++++++++--------
front/src/components/library/Artist.vue | 6 ++---
3 files changed, 22 insertions(+), 13 deletions(-)
create mode 100644 changes/changelog.d/694.bugfix
diff --git a/changes/changelog.d/694.bugfix b/changes/changelog.d/694.bugfix
new file mode 100644
index 00000000..7dd6e45a
--- /dev/null
+++ b/changes/changelog.d/694.bugfix
@@ -0,0 +1 @@
+Fixed resizing issues for album cards on artist pages (#694)
diff --git a/front/src/components/audio/album/Card.vue b/front/src/components/audio/album/Card.vue
index a439a16b..2f19d7fb 100644
--- a/front/src/components/audio/album/Card.vue
+++ b/front/src/components/audio/album/Card.vue
@@ -22,7 +22,8 @@
<td class="play-cell">
<play-button class="basic icon" :track="track" :discrete="true"></play-button>
</td>
- <td colspan="6">
+ <td class="content-cell" colspan="5">
+ <track-favorite-icon :track="track"></track-favorite-icon>
<router-link class="track discrete link" :to="{name: 'library.tracks.detail', params: {id: track.id }}">
<template v-if="track.position">
{{ track.position }}.
@@ -30,9 +31,6 @@
{{ track.title }}
</router-link>
</td>
- <td>
- <track-favorite-icon :track="track"></track-favorite-icon>
- </td>
</tr>
</tbody>
</table>
@@ -92,16 +90,28 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
-
-table.fixed td.play-cell {
- overflow: auto;
+.content-cell {
+ .link,
+ .button {
+ padding: 0.5em 0;
+ }
+ .link {
+ margin-left: 0.5em;
+ display: block;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
}
tr {
.favorite-icon:not(.favorited) {
- display: none;
+ visibility: hidden;
}
&:hover .favorite-icon {
- display: inherit;
+ visibility: visible;
+ }
+ .favorite-icon {
+ float: right;
}
}
.expand {
diff --git a/front/src/components/library/Artist.vue b/front/src/components/library/Artist.vue
index b7154935..dd2be35a 100644
--- a/front/src/components/library/Artist.vue
+++ b/front/src/components/library/Artist.vue
@@ -44,10 +44,8 @@
<h2>
<translate>Albums by this artist</translate>
</h2>
- <div class="ui stackable doubling three column grid">
- <div class="column" :key="album.id" v-for="album in albums">
- <album-card :mode="'rich'" class="fluid" :album="album"></album-card>
- </div>
+ <div class="ui cards" >
+ <album-card :mode="'rich'" :album="album" :key="album.id" v-for="album in albums"></album-card>
</div>
</section>
<section v-if="tracks.length > 0" class="ui vertical stripe segment">
--
GitLab