From eec50ea3725154747fd38e84270c3635ff70bdd2 Mon Sep 17 00:00:00 2001 From: Ciaran Ainsworth <ciaranainsworth@outlook.com> Date: Mon, 3 May 2021 21:36:24 +0100 Subject: [PATCH] Fix various layout issues --- front/src/components/audio/ArtistEntries.vue | 44 ++++++++++++++++--- front/src/components/library/ArtistDetail.vue | 13 +++--- front/src/style/_vars.scss | 2 + front/src/style/globals/_channels.scss | 7 +++ 4 files changed, 54 insertions(+), 12 deletions(-) diff --git a/front/src/components/audio/ArtistEntries.vue b/front/src/components/audio/ArtistEntries.vue index 720f7deec8..7f4540a0dd 100644 --- a/front/src/components/audio/ArtistEntries.vue +++ b/front/src/components/audio/ArtistEntries.vue @@ -4,6 +4,10 @@ <inline-search-bar v-model="query" v-if="search" @search="additionalTracks = []; fetchData()"></inline-search-bar> <div class="ui hidden divider"></div> + <!-- Add a header if needed --> + + <slot name="header"></slot> + <!-- Show a message if no tracks are available --> <slot v-if="!isLoading && allTracks.length === 0" name="empty-state"> @@ -17,7 +21,10 @@ <div class="ui loader"></div> </div> <div class="artist-entries row"> - <div class="actions left floated column"></div> + <div v-if="showPosition" class="actions left floated column"> + <i class="hashtag icon"></i> + </div> + <div v-else class="actions left floated column"></div> <div v-if="showArt" class="image left floated column"></div> <div class="content ellipsis left floated column"> <b>{{ labels.title }}</b> @@ -28,9 +35,9 @@ <div v-if="showArtist" class="content ellipsis left floated column"> <b>{{ labels.artist }}</b> </div> - <div class="meta right floated column"></div> + <div v-if="$store.state.auth.authenticated" class="meta right floated column"></div> <div class="meta right floated column"> - <i class="clock icon" style="padding: 0.5rem;" /> + <i class="clock outline icon" style="padding: 0.5rem;" /> </div> <div v-if="displayActions" class="right floated column"></div> </div> @@ -48,12 +55,18 @@ <play-indicator v-if="!$store.state.player.isLoadingAudio && currentTrack && isPlaying && track.id === currentTrack.id && !track.hover"> </play-indicator> + <button + v-else-if="currentTrack && !isPlaying && track.id === currentTrack.id && !track.hover" + class="ui really tiny basic icon button play-button paused" + > + <i class="pause icon" /> + </button> <button v-else-if="currentTrack && isPlaying && track.id === currentTrack.id && track.hover" class="ui really tiny basic icon button play-button" @click.prevent.exact="pausePlayback" > - <i class="pause icon" /> + <i class="pause icon" /> </button> <button v-else-if="currentTrack && !isPlaying && track.id === currentTrack.id && track.hover" @@ -78,7 +91,24 @@ <img alt="" class="ui artist-track mini image" v-else src="../../assets/audio/default-cover.png"> </div> <div class="content ellipsis left floated column"> - <router-link :to="{name: 'library.tracks.detail', params: {id: track.id }}">{{ track.title }}</router-link> + <a + v-if="currentTrack && !isPlaying && track.id === currentTrack.id" + @click="resumePlayback" + > + {{ track.title }} + </a> + <a + v-else-if="currentTrack && isPlaying && track.id === currentTrack.id" + @click="pausePlayback" + > + {{ track.title }} + </a> + <a + v-else + @click.prevent.exact="replacePlay(allTracks, index)" + > + {{ track.title }} + </a> </div> <div v-if="showAlbum" class="content ellipsis left floated column"> <router-link :to="{name: 'library.albums.detail', params: {id: track.album.id }}">{{ track.album.title }}</router-link> @@ -86,14 +116,14 @@ <div v-if="showArtist" class="content ellipsis left floated column"> <router-link class="artist link" :to="{name: 'library.artists.detail', params: {id: track.artist.id }}">{{ track.artist.name }}</router-link> </div> - <div class="meta right floated column"> + <div v-if="$store.state.auth.authenticated" class="meta right floated column"> <track-favorite-icon class="tiny" :border="false" :track="track"></track-favorite-icon> </div> <div class="meta right floated column"> <human-duration v-if="track.uploads[0] && track.uploads[0].duration" :duration="track.uploads[0].duration"></human-duration> </div> <div v-if="displayActions" class="right floated column"> - <play-button id="playmenu" class="play-button basic icon" :dropdown-only="true" :is-playable="track.is_playable_by_actor" :dropdown-icon-classes="['ellipsis', 'vertical', 'large really discrete']" :track="track"></play-button> + <play-button id="playmenu" class="play-button basic icon" :dropdown-only="true" :is-playable="track.is_playable" :dropdown-icon-classes="['ellipsis', 'vertical', 'large really discrete']" :track="track"></play-button> </div> </div> </div> diff --git a/front/src/components/library/ArtistDetail.vue b/front/src/components/library/ArtistDetail.vue index 222a75e869..26206a9bec 100644 --- a/front/src/components/library/ArtistDetail.vue +++ b/front/src/components/library/ArtistDetail.vue @@ -15,11 +15,14 @@ </div> </div> <section v-if="tracks.length > 0" class="ui vertical stripe segment"> - <h2> - <translate translate-context="Content/Artist/Title">New tracks by this artist</translate> - </h2> - <div class="ui hidden divider"></div> - <artist-entries :show-position="false" :track-only="true" :tracks="tracks.slice(0,5)"></artist-entries> + <artist-entries :show-position="false" :track-only="true" :tracks="tracks.slice(0,5)"> + <template slot="header"> + <h2> + <translate translate-context="Content/Artist/Title">New tracks by this artist</translate> + </h2> + <div class="ui hidden divider"></div> + </template> + </artist-entries> </section> <section v-if="isLoadingAlbums" class="ui vertical stripe segment"> <div :class="['ui', 'centered', 'active', 'inline', 'loader']"></div> diff --git a/front/src/style/_vars.scss b/front/src/style/_vars.scss index 1683ca9f3b..5201985ebf 100644 --- a/front/src/style/_vars.scss +++ b/front/src/style/_vars.scss @@ -117,3 +117,5 @@ $card-box-shadow: 0 1px 3px 0 #D4D4D5, 0 0 0 1px #D4D4D5 !default; $dimmer-background: rgba(255, 255, 255, 0.85) !default; $dimmer-color: var(--text-color) !default; + +$border-color: rgba(34, 36, 38, 0.15) !default; diff --git a/front/src/style/globals/_channels.scss b/front/src/style/globals/_channels.scss index e553f2febf..5f364184ea 100644 --- a/front/src/style/globals/_channels.scss +++ b/front/src/style/globals/_channels.scss @@ -88,6 +88,13 @@ .ui.really.tiny.button.play-button { visibility: hidden; } + .ui.icon.really.tiny.button.play-button.paused { + color: var(--main-color); + visibility: visible; + display: contents; + left: auto; + right: auto; + } .ui.floating.dropdown { visibility: hidden; } -- GitLab