MyFavMirrors/owntone-server
1
0
Fork 0
mirror of https://github.com/owntone/owntone-server.git synced 2024-12-28 08:05:56 -05:00
Code Issues Packages Projects Releases Wiki Activity

[web-src] Update Spotify album page spacing

Browse Source 
Also make cover artwork clickable to open the album details dialog
This commit is contained in:
chme 2020-06-30 08:43:06 +02:00
parent 728b1624ff
commit 1c65ba1ee2
2 changed files with 11 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web-src/src/pages/PageAlbum.vue
View File

@ -14,11 +14,12 @@
</div> </div>
</template> </template>
<template slot="heading-right"> <template slot="heading-right">
<p class="image is-square fd-has-shadow"> <p class="image is-square fd-has-shadow fd-has-action">
<cover-artwork <cover-artwork
:artwork_url="album.artwork_url" :artwork_url="album.artwork_url"
:artist="album.artist" :artist="album.artist"
:album="album.name" /> :album="album.name"
@click="show_album_details_modal = true" />
</p> </p>
</template> </template>
<template slot="content"> <template slot="content">

13
web-src/src/pages/SpotifyPageAlbum.vue
View File

@ -1,9 +1,8 @@
<template> <template>
<content-with-hero> <content-with-hero>
<template slot="heading-left"> <template slot="heading-left">
<h1 class="title is-4 fd-has-margin-top">{{ album.name }}</h1> <h1 class="title is-5">{{ album.name }}</h1>
<h2 class="subtitle is-4 has-text-link has-text-weight-normal"><a class="has-text-link" @click="open_artist">{{ album.artists[0].name }}</a></h2> <h2 class="subtitle is-6 has-text-link has-text-weight-normal"><a class="has-text-link" @click="open_artist">{{ album.artists[0].name }}</a></h2>
<p class="heading has-text-centered-mobile">{{ album.tracks.total }} tracks</p>
<div class="buttons fd-is-centered-mobile fd-has-margin-top"> <div class="buttons fd-is-centered-mobile fd-has-margin-top">
<a class="button is-small is-dark is-rounded" @click="play"> <a class="button is-small is-dark is-rounded" @click="play">
@ -14,15 +13,19 @@
</a> </a>
</div> </div>
</template> </template>
<template slot="heading-right"> <template slot="heading-right">
<p class="image is-square fd-has-shadow"> <p class="image is-square fd-has-shadow fd-has-action">
<cover-artwork <cover-artwork
:artwork_url="artwork_url" :artwork_url="artwork_url"
:artist="album.artist" :artist="album.artist"
:album="album.name" /> :album="album.name"
@click="show_album_details_modal = true" />
</p> </p>
</template> </template>
<template slot="content"> <template slot="content">
<p class="heading is-7 has-text-centered-mobile fd-has-margin-top">{{ album.tracks.total }} tracks</p>
<spotify-list-item-track v-for="(track, index) in album.tracks.items" :key="track.id" :track="track" :position="index" :album="album" :context_uri="album.uri"> <spotify-list-item-track v-for="(track, index) in album.tracks.items" :key="track.id" :track="track" :position="index" :album="album" :context_uri="album.uri">
<template slot="actions"> <template slot="actions">
<a @click="open_track_dialog(track)"> <a @click="open_track_dialog(track)">