feat: moved back button to top left of Artist and Tracklist
This commit is contained in:
Roberto Tonino
parent
83d09d2425
commit
1646f6b0e5
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
34
src/components/globals/BackButton.vue
Normal file
34
src/components/globals/BackButton.vue
Normal file
@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<button class="top-back-button" @click="$router.back()">
|
||||
<i class="material-icons mirrored md-36">forward</i>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$button-dimension: 4rem;
|
||||
$button-separator: 10px;
|
||||
|
||||
.top-back-button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
position: absolute;
|
||||
top: $button-separator;
|
||||
left: $button-separator;
|
||||
|
||||
min-width: unset;
|
||||
width: $button-dimension;
|
||||
height: $button-dimension;
|
||||
|
||||
background: var(--secondary-background);
|
||||
border-radius: 50%;
|
||||
padding: 0.25rem;
|
||||
margin: 0;
|
||||
transition: background 200ms ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background: var(--accent-color);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div id="artist_tab" class="main_tabcontent fixed_footer image_header" ref="root">
|
||||
<div id="artist_tab" class="main_tabcontent image_header" ref="root">
|
||||
<header
|
||||
class="inline-flex"
|
||||
:style="{
|
||||
@ -7,6 +7,8 @@
|
||||
'linear-gradient(to bottom, transparent 0%, var(--main-background) 100%), url(\'' + image + '\')'
|
||||
}"
|
||||
>
|
||||
<BackButton />
|
||||
|
||||
<h1>{{ title }}</h1>
|
||||
<div role="button" aria-label="download" @click.stop="addToQueue" :data-link="link" class="fab right">
|
||||
<i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
|
||||
@ -67,21 +69,24 @@
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<footer>
|
||||
<button class="back-button" @click="$router.back()">{{ $t('globals.back') }}</button>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.main_tabcontent {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { isEmpty, orderBy } from 'lodash-es'
|
||||
import { socket } from '@/utils/socket'
|
||||
import Downloads from '@/utils/downloads'
|
||||
import EventBus from '@/utils/EventBus'
|
||||
|
||||
import BackButton from '@components/globals/BackButton.vue'
|
||||
|
||||
export default {
|
||||
name: 'artist-tab',
|
||||
data() {
|
||||
return {
|
||||
currentTab: '',
|
||||
@ -95,6 +100,30 @@ export default {
|
||||
body: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
showTable() {
|
||||
if (this.body) {
|
||||
if (this.sortKey == 'nb_song')
|
||||
return orderBy(
|
||||
this.body[this.currentTab],
|
||||
function (o) {
|
||||
return new Number(o.nb_song)
|
||||
},
|
||||
this.sortOrder
|
||||
)
|
||||
else return orderBy(this.body[this.currentTab], this.sortKey, this.sortOrder)
|
||||
} else return []
|
||||
}
|
||||
},
|
||||
components: {
|
||||
BackButton
|
||||
},
|
||||
mounted() {
|
||||
socket.on('show_artist', this.showArtist)
|
||||
|
||||
EventBus.$on('artistTab:updateSelected', this.updateSelected)
|
||||
EventBus.$on('artistTab:changeTab', this.changeTab)
|
||||
},
|
||||
methods: {
|
||||
reset() {
|
||||
this.title = 'Loading...'
|
||||
@ -157,30 +186,7 @@ export default {
|
||||
this.body = releases
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
showTable() {
|
||||
if (this.body) {
|
||||
if (this.sortKey == 'nb_song')
|
||||
return orderBy(
|
||||
this.body[this.currentTab],
|
||||
function (o) {
|
||||
return new Number(o.nb_song)
|
||||
},
|
||||
this.sortOrder
|
||||
)
|
||||
else return orderBy(this.body[this.currentTab], this.sortKey, this.sortOrder)
|
||||
} else return []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
socket.on('show_artist', this.showArtist)
|
||||
|
||||
EventBus.$on('artistTab:updateSelected', this.updateSelected)
|
||||
EventBus.$on('artistTab:changeTab', this.changeTab)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
||||
@ -1,17 +1,20 @@
|
||||
<template>
|
||||
<div id="tracklist_tab" class="main_tabcontent fixed_footer image_header" ref="root">
|
||||
<div class="main_tabcontent fixed_footer image_header" ref="root">
|
||||
<header
|
||||
:style="{
|
||||
'background-image':
|
||||
'linear-gradient(to bottom, transparent 0%, var(--main-background) 100%), url(\'' + image + '\')'
|
||||
}"
|
||||
>
|
||||
<BackButton />
|
||||
|
||||
<h1 class="inline-flex">
|
||||
{{ title }} <i v-if="explicit" class="material-icons explicit_icon explicit_icon--right">explicit</i>
|
||||
</h1>
|
||||
<h2 class="inline-flex">
|
||||
<span v-if="metadata">{{ metadata }}</span>
|
||||
<span class="right" v-if="release_date">{{ release_date }}</span>
|
||||
|
||||
<h2>
|
||||
<p v-if="metadata">{{ metadata }}</p>
|
||||
<p v-if="release_date">{{ release_date }}</p>
|
||||
</h2>
|
||||
</header>
|
||||
|
||||
@ -137,11 +140,16 @@
|
||||
<button class="with_icon" @click.stop="addToQueue" :data-link="selectedLinks()">
|
||||
{{ $t('tracklist.downloadSelection') }}<i class="material-icons">file_download</i>
|
||||
</button>
|
||||
<button class="back-button" @click="$router.back()">{{ $t('globals.back') }}</button>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.main_tabcontent {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { isEmpty } from 'lodash-es'
|
||||
import { socket } from '@/utils/socket'
|
||||
@ -149,6 +157,8 @@ import Downloads from '@/utils/downloads'
|
||||
import Utils from '@/utils/utils'
|
||||
import EventBus from '@/utils/EventBus'
|
||||
|
||||
import BackButton from '@components/globals/BackButton.vue'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
@ -163,6 +173,16 @@ export default {
|
||||
body: []
|
||||
}
|
||||
},
|
||||
components: {
|
||||
BackButton
|
||||
},
|
||||
mounted() {
|
||||
EventBus.$on('tracklistTab:selectRow', this.selectRow)
|
||||
|
||||
socket.on('show_album', this.showAlbum)
|
||||
socket.on('show_playlist', this.showPlaylist)
|
||||
socket.on('show_spotifyplaylist', this.showSpotifyPlaylist)
|
||||
},
|
||||
methods: {
|
||||
playPausePreview(e) {
|
||||
EventBus.$emit('trackPreview:playPausePreview', e)
|
||||
@ -291,16 +311,7 @@ export default {
|
||||
selectRow(index, track) {
|
||||
track.selected = !track.selected
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
EventBus.$on('tracklistTab:selectRow', this.selectRow)
|
||||
|
||||
socket.on('show_album', this.showAlbum)
|
||||
socket.on('show_playlist', this.showPlaylist)
|
||||
socket.on('show_spotifyplaylist', this.showSpotifyPlaylist)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
||||
@ -191,22 +191,25 @@ a {
|
||||
.clickable {
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
.table--tracklist .clickable:hover,
|
||||
.table--charts .clickable:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.fixed_footer footer {
|
||||
position: sticky;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
background-color: var(--main-background);
|
||||
bottom: 0px;
|
||||
height: 64px;
|
||||
width: 100%;
|
||||
margin-top: 24px;
|
||||
.fixed_footer {
|
||||
footer {
|
||||
position: sticky;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
background-color: var(--main-background);
|
||||
bottom: 0px;
|
||||
height: 64px;
|
||||
width: 100%;
|
||||
margin-top: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.fab {
|
||||
|
||||
@ -15,3 +15,17 @@
|
||||
font-size: 1.75rem;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.material-icons {
|
||||
$sizes: 18, 24, 36, 48;
|
||||
|
||||
@each $size in $sizes {
|
||||
&.md-#{$size} {
|
||||
font-size: $size * 1px;
|
||||
}
|
||||
}
|
||||
|
||||
&.mirrored {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user