MyFavMirrors/owntone-server
1
0
Fork 0
mirror of https://github.com/owntone/owntone-server.git synced 2025-04-13 15:59:50 -04:00
Code Issues Packages Projects Releases Wiki Activity

[web] Fix icon when track is not playable

Browse Source 
Spotify tracks that are not playable have now a "not allowed" cursor when hovered.
Moreover, the Bulma CSS class is now used for clickable items instead of a custom one.
This commit is contained in:
Alain Nussbaumer 2023-06-10 19:22:29 +02:00
parent 6a2f85e04f
commit bbe29a7a63
26 changed files with 45 additions and 45 deletions

2
htdocs/assets/index.css

File diff suppressed because one or more lines are too long

22
htdocs/assets/index.js

File diff suppressed because one or more lines are too long

4
web-src/src/components/ListAlbums.vue

@ -13,11 +13,11 @@
:artwork_url="album.item.artwork_url"
:artist="album.item.artist"
:album="album.item.name"
class="fd-has-action fd-has-shadow fd-cover fd-cover-small-image"
class="is-clickable fd-has-shadow fd-cover fd-cover-small-image"
@click="show_album_details_modal = true"
/>
</div>
<div class="media-content fd-has-action is-clipped">
<div class="media-content is-clickable is-clipped">
<div style="margin-top: 0.7rem">
<h1 class="title is-6" v-text="album.item.name" />
<h2 class="subtitle is-7 has-text-grey">

2
web-src/src/components/ListArtists.vue

@ -14,7 +14,7 @@
class="media"
@click="open_artist(artist.item)"
>
<div class="media-content fd-has-action is-clipped">
<div class="media-content is-clickable is-clipped">
<h1 class="title is-6" v-text="artist.item.name" />
</div>
<div class="media-right">

2
web-src/src/components/ListComposers.vue

@ -14,7 +14,7 @@
class="media"
@click="open_composer(composer.item)"
>
<div class="media-content fd-has-action is-clipped">
<div class="media-content is-clickable is-clipped">
<h1 class="title is-6" v-text="composer.item.name" />
</div>
<div class="media-right">

8
web-src/src/components/ListDirectories.vue

@ -4,12 +4,12 @@
class="media"
@click="open_parent_directory()"
>
<figure class="media-left fd-has-action">
<figure class="media-left is-clickable">
<span class="icon"
><mdicon name="subdirectory-arrow-left" size="16"
/></span>
</figure>
<div class="media-content fd-has-action is-clipped">
<div class="media-content is-clickable is-clipped">
<h1 class="title is-6">..</h1>
</div>
<div class="media-right">
@ -18,10 +18,10 @@
</div>
<template v-for="directory in directories" :key="directory.path">
<div class="media" @click="open_directory(directory)">
<figure class="media-left fd-has-action">
<figure class="media-left is-clickable">
<span class="icon"><mdicon name="folder" size="16" /></span>
</figure>
<div class="media-content fd-has-action is-clipped">
<div class="media-content is-clickable is-clipped">
<h1
class="title is-6"
v-text="directory.path.substring(directory.path.lastIndexOf('/') + 1)"

2
web-src/src/components/ListGenres.vue

@ -10,7 +10,7 @@
</div>
</div>
<div v-else-if="genre.isItem" class="media" @click="open_genre(genre.item)">
<div class="media-content fd-has-action is-clipped">
<div class="media-content is-clickable is-clipped">
<h1 class="title is-6" v-text="genre.item.name" />
</div>
<div class="media-right">

2
web-src/src/components/ListItemQueueItem.vue

@ -5,7 +5,7 @@
><mdicon name="drag-horizontal" size="16"
/></span>
</div>
<div class="media-content fd-has-action is-clipped" @click="play">
<div class="media-content is-clickable is-clipped" @click="play">
<h1
class="title is-6"
:class="{

4
web-src/src/components/ListPlaylists.vue

@ -6,12 +6,12 @@
:playlist="playlist"
@click="open_playlist(playlist.item)"
>
<figure class="media-left fd-has-action">
<figure class="media-left is-clickable">
<span class="icon"
><mdicon :name="icon_name(playlist.item)" size="16"
/></span>
</figure>
<div class="media-content fd-has-action is-clipped">
<div class="media-content is-clickable is-clipped">
<h1 class="title is-6" v-text="playlist.item.name" />
</div>
<div class="media-right">

4
web-src/src/components/ListTracks.vue

@ -13,10 +13,10 @@
:class="{ 'with-progress': show_progress }"
@click="play_track(index, track.item)"
>
<figure v-if="show_icon" class="media-left fd-has-action">
<figure v-if="show_icon" class="media-left is-clickable">
<span class="icon"><mdicon name="file-outline" size="16" /></span>
</figure>
<div class="media-content fd-has-action is-clipped">
<div class="media-content is-clickable is-clipped">
<h1
class="title is-6"
:class="{

4
web-src/src/components/NavbarBottom.vue

@ -146,7 +146,7 @@
class="button is-white is-small"
:class="{ 'is-loading': loading }"
><span
class="icon fd-has-action"
class="icon is-clickable"
:class="{
'has-text-grey-light': !playing && !loading,
'is-loading': loading
@ -269,7 +269,7 @@
:class="{ 'is-loading': loading }"
>
<span
class="icon fd-has-action"
class="icon is-clickable"
:class="{
'has-text-grey-light': !playing && !loading,
'is-loading': loading

2
web-src/src/components/NavbarItemOutput.vue

@ -5,7 +5,7 @@
<div class="level-item" style="flex-grow: 0">
<a class="button is-white is-small">
<span
class="icon fd-has-action"
class="icon is-clickable"
:class="{ 'has-text-grey-light': !output.selected }"
@click="set_enabled"
><mdicon :name="type_class" size="18" :title="output.type"

4
web-src/src/components/SpotifyListItemAlbum.vue

@ -1,9 +1,9 @@
<template>
<div class="media">
<div v-if="$slots['artwork']" class="media-left fd-has-action">
<div v-if="$slots['artwork']" class="media-left is-clickable">
<slot name="artwork" />
</div>
<div class="media-content fd-has-action is-clipped">
<div class="media-content is-clickable is-clipped">
<h1 class="title is-6" v-text="album.name" />
<h2 class="subtitle is-7 has-text-grey">
<b v-text="album.artists[0].name" />

2
web-src/src/components/SpotifyListItemArtist.vue

@ -1,6 +1,6 @@
<template>
<div class="media">
<div class="media-content fd-has-action is-clipped" @click="open_artist">
<div class="media-content is-clickable is-clipped" @click="open_artist">
<h1 class="title is-6" v-text="artist.name" />
</div>
<div class="media-right">

2
web-src/src/components/SpotifyListItemPlaylist.vue

@ -1,6 +1,6 @@
<template>
<div class="media">
<div class="media-content fd-has-action is-clipped" @click="open_playlist">
<div class="media-content is-clickable is-clipped" @click="open_playlist">
<h1 class="title is-6" v-text="playlist.name" />
<h2 class="subtitle is-7" v-text="playlist.owner.display_name" />
</div>

3
web-src/src/components/SpotifyListItemTrack.vue

@ -3,7 +3,8 @@
<div
class="media-content is-clipped"
:class="{
'is-clickable': track.is_playable
'is-clickable': track.is_playable,
'fd-is-not-allowed': !track.is_playable
}"
@click="play"
>

4
web-src/src/mystyles.scss

@ -66,8 +66,8 @@ a.navbar-item {
margin-left: auto;
}
.fd-has-action {
cursor: pointer;
.fd-is-not-allowed {
cursor: not-allowed;
}
.fd-is-movable {

2
web-src/src/pages/PageAlbum.vue

@ -23,7 +23,7 @@
:artwork_url="album.artwork_url"
:artist="album.artist"
:album="album.name"
class="fd-has-action fd-has-shadow fd-cover fd-cover-medium-image"
class="is-clickable fd-has-shadow fd-cover fd-cover-medium-image"
@click="show_album_details_modal = true"
/>
</template>

2
web-src/src/pages/PageAudiobooksAlbum.vue

@ -23,7 +23,7 @@
:artwork_url="album.artwork_url"
:artist="album.artist"
:album="album.name"
class="fd-has-action fd-has-shadow fd-cover fd-cover-medium-image"
class="is-clickable fd-has-shadow fd-cover fd-cover-medium-image"
@click="show_album_details_modal = true"
/>
</template>

2
web-src/src/pages/PageNowPlaying.vue

@ -5,7 +5,7 @@
:artwork_url="now_playing.artwork_url"
:artist="now_playing.artist"
:album="now_playing.album"
class="fd-has-action fd-has-shadow fd-is-expanded fd-cover fd-cover-big-image"
class="is-clickable fd-has-shadow fd-is-expanded fd-cover fd-cover-big-image"
@click="open_dialog(now_playing)"
/>
<div class="fd-has-padding-left-right">

2
web-src/src/pages/SpotifyPageAlbum.vue

@ -27,7 +27,7 @@
:artwork_url="artwork_url"
:artist="album.artist"
:album="album.name"
class="fd-has-action fd-has-shadow fd-cover fd-cover-medium-image"
class="is-clickable fd-has-shadow fd-cover fd-cover-medium-image"
@click="show_album_details_modal = true"
/>
</template>

2
web-src/src/pages/SpotifyPageArtist.vue

@ -33,7 +33,7 @@
:artwork_url="artwork_url(album)"
:artist="album.artist"
:album="album.name"
class="fd-has-action fd-has-shadow fd-cover fd-cover-small-image"
class="is-clickable fd-has-shadow fd-cover fd-cover-small-image"
:maxwidth="64"
:maxheight="64"
/>

2
web-src/src/pages/SpotifyPageBrowse.vue

@ -18,7 +18,7 @@
:artwork_url="artwork_url(album)"
:artist="album.artist"
:album="album.name"
class="fd-has-action fd-has-shadow fd-cover fd-cover-small-image"
class="is-clickable fd-has-shadow fd-cover fd-cover-small-image"
:maxwidth="64"
:maxheight="64"
/>

2
web-src/src/pages/SpotifyPageBrowseNewReleases.vue

@ -17,7 +17,7 @@
:artwork_url="artwork_url(album)"
:artist="album.artist"
:album="album.name"
class="fd-has-action fd-has-shadow fd-cover fd-cover-small-image"
class="is-clickable fd-has-shadow fd-cover fd-cover-small-image"
:maxwidth="64"
:maxheight="64"
/>

1
web-src/src/pages/SpotifyPagePlaylist.vue

@ -66,7 +66,6 @@ import store from '@/store'
import webapi from '@/webapi'
import SpotifyWebApi from 'spotify-web-api-js'
import { VueEternalLoading } from '@ts-pro/vue-eternal-loading'
import { mdiAxe } from '@mdi/js'
const PAGE_SIZE = 50

2
web-src/src/pages/SpotifyPageSearch.vue

@ -160,7 +160,7 @@
:artwork_url="artwork_url(album)"
:artist="album.artist"
:album="album.name"
class="fd-has-action fd-has-shadow fd-cover fd-cover-small-image"
class="is-clickable fd-has-shadow fd-cover fd-cover-small-image"
:maxwidth="64"
:maxheight="64"
/>