MyFavMirrors/owntone-server
1
0
Fork 0
mirror of https://github.com/owntone/owntone-server.git synced 2025-11-07 04:42:58 -05: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
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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
View File

@@ -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
View File

@@ -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
View File

@@ -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
View File

@@ -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
View File

@@ -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
View File

@@ -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
View File

@@ -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
View File

@@ -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
View File

@@ -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
View File

@@ -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
View File

@@ -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
View File

@@ -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
View File

@@ -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"
>