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

[web] Fix vertical alignment of all icons with their associated content

Browse Source 
All icons, usually next to a text, are now centered vertically.
This commit is contained in:
Alain Nussbaumer 2023-06-30 21:41:40 +02:00
parent cef98f689b
commit 611c989b91
63 changed files with 307 additions and 420 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web-src/src/components/DropdownMenu.vue
View File

@ -12,7 +12,7 @@
@click="is_active = !is_active"
>
<span v-text="option.name" />
<span class="icon"><mdicon name="chevron-down" size="16" /></span>
<mdicon class="icon" name="chevron-down" size="16" />
</button>
</div>
<div id="dropdown-menu" class="dropdown-menu" role="menu">

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

@ -32,9 +32,7 @@
</div>
<div class="media-right" style="padding-top: 0.7rem">
<a @click.prevent.stop="open_dialog(album.item)">
<span class="icon has-text-dark"
><mdicon name="dots-vertical" size="16"
/></span>
<mdicon class="icon has-text-dark" name="dots-vertical" size="16" />
</a>
</div>
</div>

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

@ -19,9 +19,7 @@
</div>
<div class="media-right">
<a @click.prevent.stop="open_dialog(artist.item)">
<span class="icon has-text-dark"
><mdicon name="dots-vertical" size="16"
/></span>
<mdicon class="icon has-text-dark" name="dots-vertical" size="16" />
</a>
</div>
</div>

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

@ -19,9 +19,7 @@
</div>
<div class="media-right">
<a @click.prevent.stop="open_dialog(composer.item)">
<span class="icon has-text-dark"
><mdicon name="dots-vertical" size="16"
/></span>
<mdicon class="icon has-text-dark" name="dots-vertical" size="16" />
</a>
</div>
</div>

10
web-src/src/components/ListDirectories.vue
View File

@ -5,9 +5,7 @@
@click="open_parent_directory()"
>
<figure class="media-left is-clickable">
<span class="icon"
><mdicon name="subdirectory-arrow-left" size="16"
/></span>
<mdicon class="icon" name="subdirectory-arrow-left" size="16" />
</figure>
<div class="media-content is-clickable is-clipped">
<h1 class="title is-6">..</h1>
@ -19,7 +17,7 @@
<template v-for="directory in directories" :key="directory.path">
<div class="media" @click="open_directory(directory)">
<figure class="media-left is-clickable">
<span class="icon"><mdicon name="folder" size="16" /></span>
<mdicon class="icon" name="folder" size="16" />
</figure>
<div class="media-content is-clickable is-clipped">
<h1
@ -30,9 +28,7 @@
</div>
<div class="media-right">
<a @click.prevent.stop="open_dialog(directory)">
<span class="icon has-text-dark"
><mdicon name="dots-vertical" size="16"
/></span>
<mdicon class="icon has-text-dark" name="dots-vertical" size="16" />
</a>
</div>
</div>

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

@ -15,9 +15,7 @@
</div>
<div class="media-right">
<a @click.prevent.stop="open_dialog(genre.item)">
<span class="icon has-text-dark"
><mdicon name="dots-vertical" size="16"
/></span>
<mdicon class="icon has-text-dark" name="dots-vertical" size="16" />
</a>
</div>
</div>

8
web-src/src/components/ListItemQueueItem.vue
View File

@ -1,9 +1,11 @@
<template>
<div v-if="is_next || !show_only_next_items" class="media">
<div v-if="edit_mode" class="media-left">
<span class="icon has-text-grey fd-is-movable handle"
><mdicon name="drag-horizontal" size="16"
/></span>
<mdicon
class="icon has-text-grey fd-is-movable handle"
name="drag-horizontal"
size="16"
/>
</div>
<div class="media-content is-clickable is-clipped" @click="play">
<h1

8
web-src/src/components/ListPlaylists.vue
View File

@ -7,18 +7,14 @@
@click="open_playlist(playlist.item)"
>
<figure class="media-left is-clickable">
<span class="icon"
><mdicon :name="icon_name(playlist.item)" size="16"
/></span>
<mdicon class="icon" :name="icon_name(playlist.item)" size="16" />
</figure>
<div class="media-content is-clickable is-clipped">
<h1 class="title is-6" v-text="playlist.item.name" />
</div>
<div class="media-right">
<a @click.prevent.stop="open_dialog(playlist.item)">
<span class="icon has-text-dark"
><mdicon name="dots-vertical" size="16"
/></span>
<mdicon class="icon has-text-dark" name="dots-vertical" size="16" />
</a>
</div>
</div>

6
web-src/src/components/ListTracks.vue
View File

@ -14,7 +14,7 @@
@click="play_track(index, track.item)"
>
<figure v-if="show_icon" class="media-left is-clickable">
<span class="icon"><mdicon name="file-outline" size="16" /></span>
<mdicon class="icon" name="file-outline" size="16" />
</figure>
<div class="media-content is-clickable is-clipped">
<h1
@ -35,9 +35,7 @@
</div>
<div class="media-right">
<a @click.prevent.stop="open_dialog(track.item)">
<span class="icon has-text-dark"
><mdicon name="dots-vertical" size="16"
/></span>
<mdicon class="icon has-text-dark" name="dots-vertical" size="16" />
</a>
</div>
</div>

6
web-src/src/components/ModalDialog.vue
View File

@ -11,7 +11,7 @@
</div>
<footer class="card-footer">
<a class="card-footer-item has-text-dark" @click="$emit('close')">
<span class="icon"><mdicon name="cancel" size="16" /></span>
<mdicon class="icon" name="cancel" size="16" />
<span
class="is-size-7"
v-text="close_action ? close_action : $t('dialog.cancel')"
@ -22,7 +22,7 @@
class="card-footer-item has-background-danger has-text-white has-text-weight-bold"
@click="$emit('delete')"
>
<span class="icon"><mdicon name="delete" size="16" /></span>
<mdicon class="icon" name="delete" size="16" />
<span class="is-size-7" v-text="delete_action" />
</a>
<a
@ -30,7 +30,7 @@
class="card-footer-item has-background-info has-text-white has-text-weight-bold"
@click="$emit('ok')"
>
<span class="icon"><mdicon name="check" size="16" /></span>
<mdicon class="icon" name="check" size="16" />
<span class="is-size-7" v-text="ok_action" />
</a>
</footer>

12
web-src/src/components/ModalDialogAddRss.vue
View File

@ -18,9 +18,7 @@
:placeholder="$t('dialog.add.rss.placeholder')"
:disabled="loading"
/>
<span class="icon is-left"
><mdicon name="rss" size="16"
/></span>
<mdicon class="icon is-left" name="rss" size="16" />
</p>
<p class="help" v-text="$t('dialog.add.rss.help')" />
</div>
@ -28,7 +26,7 @@
</div>
<footer v-if="loading" class="card-footer">
<a class="card-footer-item button is-loading">
<span class="icon"><mdicon name="web" size="16" /></span>
<mdicon class="icon" name="web" size="16" />
<span
class="is-size-7"
v-text="$t('dialog.add.rss.processing')"
@ -40,16 +38,14 @@
class="card-footer-item has-text-danger"
@click="$emit('close')"
>
<span class="icon"><mdicon name="cancel" size="16" /></span>
<mdicon class="icon" name="cancel" size="16" />
<span class="is-size-7" v-text="$t('dialog.add.rss.cancel')" />
</a>
<a
class="card-footer-item has-background-info has-text-white has-text-weight-bold"
@click="add_stream"
>
<span class="icon"
><mdicon name="playlist-plus" size="16"
/></span>
<mdicon class="icon" name="playlist-plus" size="16" />
<span class="is-size-7" v-text="$t('dialog.add.rss.add')" />
</a>
</footer>

14
web-src/src/components/ModalDialogAddUrlStream.vue
View File

@ -18,16 +18,14 @@
:placeholder="$t('dialog.add.stream.placeholder')"
:disabled="loading"
/>
<span class="icon is-left"
><mdicon name="web" size="16"
/></span>
<mdicon class="icon is-left" name="web" size="16" />
</p>
</div>
</form>
</div>
<footer v-if="loading" class="card-footer">
<a class="card-footer-item has-text-dark">
<span class="icon"><mdicon name="web" size="16" /></span>
<mdicon class="icon" name="web" size="16" />
<span
class="is-size-7"
v-text="$t('dialog.add.stream.loading')"
@ -39,23 +37,21 @@
class="card-footer-item has-text-danger"
@click="$emit('close')"
>
<span class="icon"><mdicon name="cancel" size="16" /></span>
<mdicon class="icon" name="cancel" size="16" />
<span
class="is-size-7"
v-text="$t('dialog.add.stream.cancel')"
/>
</a>
<a class="card-footer-item has-text-dark" @click="add_stream">
<span class="icon"
><mdicon name="playlist-plus" size="16"
/></span>
<mdicon class="icon" name="playlist-plus" size="16" />
<span class="is-size-7" v-text="$t('dialog.add.stream.add')" />
</a>
<a
class="card-footer-item has-background-info has-text-white has-text-weight-bold"
@click="play"
>
<span class="icon"><mdicon name="play" size="16" /></span>
<mdicon class="icon" name="play" size="16" />
<span class="is-size-7" v-text="$t('dialog.add.stream.play')" />
</a>
</footer>

10
web-src/src/components/ModalDialogAlbum.vue
View File

@ -89,19 +89,15 @@
</div>
<footer class="card-footer">
<a class="card-footer-item has-text-dark" @click="queue_add">
<span class="icon"
><mdicon name="playlist-plus" size="16"
/></span>
<mdicon class="icon" name="playlist-plus" size="16" />
<span class="is-size-7" v-text="$t('dialog.album.add')" />
</a>
<a class="card-footer-item has-text-dark" @click="queue_add_next">
<span class="icon"
><mdicon name="playlist-play" size="16"
/></span>
<mdicon class="icon" name="playlist-play" size="16" />
<span class="is-size-7" v-text="$t('dialog.album.add-next')" />
</a>
<a class="card-footer-item has-text-dark" @click="play">
<span class="icon"><mdicon name="play" size="16" /></span>
<mdicon class="icon" name="play" size="16" />
<span class="is-size-7" v-text="$t('dialog.album.play')" />
</a>
</footer>

10
web-src/src/components/ModalDialogArtist.vue
View File

@ -40,19 +40,15 @@
</div>
<footer class="card-footer">
<a class="card-footer-item has-text-dark" @click="queue_add">
<span class="icon"
><mdicon name="playlist-plus" size="16"
/></span>
<mdicon class="icon" name="playlist-plus" size="16" />
<span class="is-size-7" v-text="$t('dialog.artist.add')" />
</a>
<a class="card-footer-item has-text-dark" @click="queue_add_next">
<span class="icon"
><mdicon name="playlist-play" size="16"
/></span>
<mdicon class="icon" name="playlist-play" size="16" />
<span class="is-size-7" v-text="$t('dialog.artist.add-next')" />
</a>
<a class="card-footer-item has-text-dark" @click="play">
<span class="icon"><mdicon name="play" size="16" /></span>
<mdicon class="icon" name="play" size="16" />
<span class="is-size-7" v-text="$t('dialog.artist.play')" />
</a>
</footer>

10
web-src/src/components/ModalDialogComposer.vue
View File

@ -39,22 +39,18 @@
</div>
<footer class="card-footer">
<a class="card-footer-item has-text-dark" @click="queue_add">
<span class="icon"
><mdicon name="playlist-plus" size="16"
/></span>
<mdicon class="icon" name="playlist-plus" size="16" />
<span class="is-size-7" v-text="$t('dialog.composer.add')" />
</a>
<a class="card-footer-item has-text-dark" @click="queue_add_next">
<span class="icon"
><mdicon name="playlist-play" size="16"
/></span>
<mdicon class="icon" name="playlist-play" size="16" />
<span
class="is-size-7"
v-text="$t('dialog.composer.add-next')"
/>
</a>
<a class="card-footer-item has-text-dark" @click="play">
<span class="icon"><mdicon name="play" size="16" /></span>
<mdicon class="icon" name="play" size="16" />
<span class="is-size-7" v-text="$t('dialog.composer.play')" />
</a>
</footer>

10
web-src/src/components/ModalDialogDirectory.vue
View File

@ -10,22 +10,18 @@
</div>
<footer class="card-footer">
<a class="card-footer-item has-text-dark" @click="queue_add">
<span class="icon"
><mdicon name="playlist-plus" size="16"
/></span>
<mdicon class="icon" name="playlist-plus" size="16" />
<span class="is-size-7" v-text="$t('dialog.directory.add')" />
</a>
<a class="card-footer-item has-text-dark" @click="queue_add_next">
<span class="icon"
><mdicon name="playlist-play" size="16"
/></span>
<mdicon class="icon" name="playlist-play" size="16" />
<span
class="is-size-7"
v-text="$t('dialog.directory.add-next')"
/>
</a>
<a class="card-footer-item has-text-dark" @click="play">
<span class="icon"><mdicon name="play" size="16" /></span>
<mdicon class="icon" name="play" size="16" />
<span class="is-size-7" v-text="$t('dialog.directory.play')" />
</a>
</footer>

10
web-src/src/components/ModalDialogGenre.vue
View File

@ -33,19 +33,15 @@
</div>
<footer class="card-footer">
<a class="card-footer-item has-text-dark" @click="queue_add">
<span class="icon"
><mdicon name="playlist-plus" size="16"
/></span>
<mdicon class="icon" name="playlist-plus" size="16" />
<span class="is-size-7" v-text="$t('dialog.genre.add')" />
</a>
<a class="card-footer-item has-text-dark" @click="queue_add_next">
<span class="icon"
><mdicon name="playlist-play" size="16"
/></span>
<mdicon class="icon" name="playlist-play" size="16" />
<span class="is-size-7" v-text="$t('dialog.genre.add-next')" />
</a>
<a class="card-footer-item has-text-dark" @click="play">
<span class="icon"><mdicon name="play" size="16" /></span>
<mdicon class="icon" name="play" size="16" />
<span class="is-size-7" v-text="$t('dialog.genre.play')" />
</a>
</footer>

10
web-src/src/components/ModalDialogPlaylist.vue
View File

@ -36,22 +36,18 @@
</div>
<footer v-if="!playlist.folder" class="card-footer">
<a class="card-footer-item has-text-dark" @click="queue_add">
<span class="icon"
><mdicon name="playlist-plus" size="16"
/></span>
<mdicon class="icon" name="playlist-plus" size="16" />
<span class="is-size-7" v-text="$t('dialog.playlist.add')" />
</a>
<a class="card-footer-item has-text-dark" @click="queue_add_next">
<span class="icon"
><mdicon name="playlist-play" size="16"
/></span>
<mdicon class="icon" name="playlist-play" size="16" />
<span
class="is-size-7"
v-text="$t('dialog.playlist.add-next')"
/>
</a>
<a class="card-footer-item has-text-dark" @click="play">
<span class="icon"><mdicon name="play" size="16" /></span>
<mdicon class="icon" name="play" size="16" />
<span class="is-size-7" v-text="$t('dialog.playlist.play')" />
</a>
</footer>

12
web-src/src/components/ModalDialogPlaylistSave.vue
View File

@ -18,16 +18,14 @@
:placeholder="$t('dialog.playlist.save.playlist-name')"
:disabled="loading"
/>
<span class="icon is-left"
><mdicon name="file-music" size="16"
/></span>
<mdicon class="icon is-left" name="file-music" size="16" />
</p>
</div>
</form>
</div>
<footer v-if="loading" class="card-footer">
<a class="card-footer-item has-text-dark">
<span class="icon"><mdicon name="web" size="16" /></span>
<mdicon class="icon" name="web" size="16" />
<span
class="is-size-7"
v-text="$t('dialog.playlist.save.saving')"
@ -39,7 +37,7 @@
class="card-footer-item has-text-danger"
@click="$emit('close')"
>
<span class="icon"><mdicon name="cancel" size="16" /></span>
<mdicon class="icon" name="cancel" size="16" />
<span
class="is-size-7"
v-text="$t('dialog.playlist.save.cancel')"
@ -49,9 +47,7 @@
class="card-footer-item has-background-info has-text-white has-text-weight-bold"
@click="save"
>
<span class="icon"
><mdicon name="content-save" size="16"
/></span>
<mdicon class="icon" name="content-save" size="16" />
<span
class="is-size-7"
v-text="$t('dialog.playlist.save.save')"

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

@ -142,14 +142,14 @@
</div>
<footer class="card-footer">
<a class="card-footer-item has-text-dark" @click="remove">
<span class="icon"><mdicon name="delete" size="16" /></span>
<mdicon class="icon" name="delete" size="16" />
<span
class="is-size-7"
v-text="$t('dialog.queue-item.remove')"
/>
</a>
<a class="card-footer-item has-text-dark" @click="play">
<span class="icon"><mdicon name="play" size="16" /></span>
<mdicon class="icon" name="play" size="16" />
<span class="is-size-7" v-text="$t('dialog.queue-item.play')" />
</a>
</footer>

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

@ -30,7 +30,7 @@
class="card-footer-item has-text-danger"
@click="$emit('close')"
>
<span class="icon"><mdicon name="cancel" size="16" /></span>
<mdicon class="icon" name="cancel" size="16" />
<span
class="is-size-7"
v-text="$t('dialog.remote-pairing.cancel')"
@ -40,7 +40,7 @@
class="card-footer-item has-background-info has-text-white has-text-weight-bold"
@click="kickoff_pairing"
>
<span class="icon"><mdicon name="cellphone" size="16" /></span>
<mdicon class="icon" name="cellphone" size="16" />
<span
class="is-size-7"
v-text="$t('dialog.remote-pairing.pair')"

10
web-src/src/components/ModalDialogTrack.vue
View File

@ -168,19 +168,15 @@
</div>
<footer class="card-footer">
<a class="card-footer-item has-text-dark" @click="queue_add">
<span class="icon"
><mdicon name="playlist-plus" size="16"
/></span>
<mdicon class="icon" name="playlist-plus" size="16" />
<span class="is-size-7" v-text="$t('dialog.track.add')" />
</a>
<a class="card-footer-item has-text-dark" @click="queue_add_next">
<span class="icon"
><mdicon name="playlist-play" size="16"
/></span>
<mdicon class="icon" name="playlist-play" size="16" />
<span class="is-size-7" v-text="$t('dialog.track.add-next')" />
</a>
<a class="card-footer-item has-text-dark" @click="play_track">
<span class="icon"><mdicon name="play" size="16" /></span>
<mdicon class="icon" name="play" size="16" />
<span class="is-size-7" v-text="$t('dialog.track.play')" />
</a>
</footer>

93
web-src/src/components/NavbarBottom.vue
View File

@ -12,7 +12,7 @@
<div class="navbar-brand is-flex-grow-1">
<!-- Link to queue -->
<navbar-item-link to="/" exact>
<span class="icon"><mdicon name="playlist-play" size="24" /></span>
<mdicon class="icon" name="playlist-play" size="24" />
</navbar-item-link>
<!-- Now playing artist/title (not visible on "now playing" page) -->
<router-link
@ -71,11 +71,11 @@
class="navbar-item ml-auto is-hidden-desktop"
@click="show_player_menu = !show_player_menu"
>
<span class="icon"
><mdicon
:name="show_player_menu ? 'chevron-down' : 'chevron-up'"
size="18"
/></span>
<mdicon
class="icon"
:name="show_player_menu ? 'chevron-down' : 'chevron-up'"
size="18"
/>
</a>
<!-- Player menu dropup menu (only visible on desktop) -->
<div
@ -86,11 +86,11 @@
class="navbar-link is-arrowless"
@click="show_player_menu = !show_player_menu"
>
<span class="icon"
><mdicon
:name="show_player_menu ? 'chevron-down' : 'chevron-up'"
size="18"
/></span>
<mdicon
class="icon"
:name="show_player_menu ? 'chevron-down' : 'chevron-up'"
size="18"
/>
</a>
<div
class="navbar-dropdown is-right is-boxed"
@ -142,17 +142,13 @@
<div class="level-left is-flex-grow-1">
<div class="level-item is-flex-grow-0">
<a
class="button is-white is-small"
:class="{ 'is-loading': loading }"
><span
class="icon is-clickable"
:class="{
'has-text-grey-light': !playing && !loading,
'is-loading': loading
}"
@click="togglePlay"
><mdicon name="broadcast" size="18"
/></span>
class="button is-clickable is-white is-small"
:class="{
'has-text-grey-light': !playing && !loading,
'is-loading': loading
}"
@click="togglePlay"
><mdicon class="icon" name="broadcast" size="18" />
</a>
</div>
<div class="level-item">
@ -163,12 +159,12 @@
>
<span v-text="$t('navigation.stream')" />
<a href="stream.mp3" class="ml-2" target="_blank"
><span class="icon"
><mdicon
name="open-in-new"
size="16"
style="vertical-align: middle"
/></span>
><mdicon
class="icon"
name="open-in-new"
size="16"
style="vertical-align: middle"
/>
</a>
</p>
<input
@ -227,11 +223,11 @@
<div class="level-left is-flex-grow-1">
<div class="level-item is-flex-grow-0">
<a class="button is-white is-small" @click="toggle_mute_volume">
<span class="icon"
><mdicon
:name="player.volume > 0 ? 'volume-high' : 'volume-off'"
size="18"
/></span>
<mdicon
class="icon"
:name="player.volume > 0 ? 'volume-high' : 'volume-off'"
size="18"
/>
</a>
</div>
<div class="level-item">
@ -263,18 +259,13 @@
<div class="level-left is-flex-grow-1">
<div class="level-item is-flex-grow-0">
<a
class="button is-white is-small"
:class="{ 'is-loading': loading }"
>
<span
class="icon is-clickable"
:class="{
'has-text-grey-light': !playing && !loading,
'is-loading': loading
}"
@click="togglePlay"
><mdicon name="radio-tower" size="16" />
</span>
class="button is-clickable is-white is-small"
:class="{
'has-text-grey-light': !playing && !loading,
'is-loading': loading
}"
@click="togglePlay"
><mdicon class="icon" name="radio-tower" size="16" />
</a>
</div>
<div class="level-item">
@ -285,12 +276,12 @@
>
<span v-text="$t('navigation.stream')" />
<a href="stream.mp3" class="ml-2" target="_blank"
><span class="icon"
><mdicon
name="open-in-new"
size="16"
style="vertical-align: middle"
/></span>
><mdicon
class="icon"
name="open-in-new"
size="16"
style="vertical-align: middle"
/>
</a>
</p>
<input

18
web-src/src/components/NavbarItemOutput.vue
View File

@ -3,13 +3,17 @@
<div class="level is-mobile">
<div class="level-left is-flex-grow-1">
<div class="level-item is-flex-grow-0">
<a class="button is-white is-small">
<span
class="icon is-clickable"
:class="{ 'has-text-grey-light': !output.selected }"
@click="set_enabled"
><mdicon :name="type_class" size="18" :title="output.type"
/></span>
<a
class="button is-clickable is-white is-small"
:class="{ 'has-text-grey-light': !output.selected }"
@click="set_enabled"
>
<mdicon
class="icon"
:name="type_class"
size="18"
:title="output.type"
/>
</a>
</div>
<div class="level-item">

36
web-src/src/components/NavbarTop.vue
View File

@ -7,25 +7,25 @@
>
<div class="navbar-brand">
<navbar-item-link v-if="is_visible_playlists" to="/playlists">
<span class="icon"><mdicon name="music-box-multiple" size="16" /></span>
<mdicon class="icon" name="music-box-multiple" size="16" />
</navbar-item-link>
<navbar-item-link v-if="is_visible_music" to="/music">
<span class="icon"><mdicon name="music" size="16" /></span>
<mdicon class="icon" name="music" size="16" />
</navbar-item-link>
<navbar-item-link v-if="is_visible_podcasts" to="/podcasts">
<span class="icon"><mdicon name="microphone" size="16" /></span>
<mdicon class="icon" name="microphone" size="16" />
</navbar-item-link>
<navbar-item-link v-if="is_visible_audiobooks" to="/audiobooks">
<span class="icon"><mdicon name="book-open-variant" size="16" /></span>
<mdicon class="icon" name="book-open-variant" size="16" />
</navbar-item-link>
<navbar-item-link v-if="is_visible_radio" to="/radio">
<span class="icon"><mdicon name="radio" size="16" /></span>
<mdicon class="icon" name="radio" size="16" />
</navbar-item-link>
<navbar-item-link v-if="is_visible_files" to="/files">
<span class="icon"><mdicon name="folder-open" size="16" /></span>
<mdicon class="icon" name="folder-open" size="16" />
</navbar-item-link>
<navbar-item-link v-if="is_visible_search" to="/search">
<span class="icon"><mdicon name="magnify" size="16" /></span>
<mdicon class="icon" name="magnify" size="16" />
</navbar-item-link>
<div
class="navbar-burger"
@ -47,9 +47,7 @@
@click="on_click_outside_settings"
>
<a class="navbar-link is-arrowless">
<span class="icon is-hidden-touch"
><mdicon name="menu" size="24"
/></span>
<mdicon class="icon is-hidden-touch" name="menu" size="24" />
<span
class="is-hidden-desktop has-text-weight-bold"
v-text="$t('navigation.title')"
@ -57,13 +55,11 @@
</a>
<div class="navbar-dropdown is-right">
<navbar-item-link to="/playlists">
<span class="icon"
><mdicon name="music-box-multiple" size="16"
/></span>
<mdicon class="icon" name="music-box-multiple" size="16" />
<b v-text="$t('navigation.playlists')" />
</navbar-item-link>
<navbar-item-link to="/music" exact>
<span class="icon"><mdicon name="music" size="16" /></span>
<mdicon class="icon" name="music" size="16" />
<b v-text="$t('navigation.music')" />
</navbar-item-link>
<navbar-item-link to="/music/artists">
@ -91,25 +87,23 @@
/>
</navbar-item-link>
<navbar-item-link to="/podcasts">
<span class="icon"><mdicon name="microphone" size="16" /></span>
<mdicon class="icon" name="microphone" size="16" />
<b v-text="$t('navigation.podcasts')" />
</navbar-item-link>
<navbar-item-link to="/audiobooks">
<span class="icon"
><mdicon name="book-open-variant" size="16"
/></span>
<mdicon class="icon" name="book-open-variant" size="16" />
<b v-text="$t('navigation.audiobooks')" />
</navbar-item-link>
<navbar-item-link to="/radio">
<span class="icon"><mdicon name="radio" size="16" /></span>
<mdicon class="icon" name="radio" size="16" />
<b v-text="$t('navigation.radio')" />
</navbar-item-link>
<navbar-item-link to="/files">
<span class="icon"><mdicon name="folder-open" size="16" /></span>
<mdicon class="icon" name="folder-open" size="16" />
<b v-text="$t('navigation.files')" />
</navbar-item-link>
<navbar-item-link to="/search">
<span class="icon"><mdicon name="magnify" size="16" /></span>
<mdicon class="icon" name="magnify" size="16" />
<b v-text="$t('navigation.search')" />
</navbar-item-link>
<hr class="fd-navbar-divider" />

12
web-src/src/components/PlayerButtonConsume.vue
View File

@ -1,11 +1,11 @@
<template>
<a :class="{ 'is-info': is_consume }" @click="toggle_consume_mode">
<span class="icon"
><mdicon
name="fire"
:size="icon_size"
:title="$t('player.button.consume')"
/></span>
<mdicon
class="icon"
name="fire"
:size="icon_size"
:title="$t('player.button.consume')"
/>
</a>
</template>

11
web-src/src/components/PlayerButtonNext.vue
View File

@ -1,11 +1,10 @@
<template>
<a :disabled="disabled" @click="play_next">
<span class="icon"
><mdicon
name="skip-forward"
:size="icon_size"
:title="$t('player.button.skip-forward')"
/></span>
<mdicon
name="skip-forward"
:size="icon_size"
:title="$t('player.button.skip-forward')"
/>
</a>
</template>

11
web-src/src/components/PlayerButtonPlayPause.vue
View File

@ -1,11 +1,10 @@
<template>
<a :disabled="disabled" @click="toggle_play_pause">
<span class="icon"
><mdicon
:name="icon_name"
:size="icon_size"
:title="$t('player.button.' + icon_name)"
/></span>
<mdicon
:name="icon_name"
:size="icon_size"
:title="$t('player.button.' + icon_name)"
/>
</a>
</template>

11
web-src/src/components/PlayerButtonPrevious.vue
View File

@ -1,11 +1,10 @@
<template>
<a :disabled="disabled" @click="play_previous">
<span class="icon"
><mdicon
name="skip-backward"
:size="icon_size"
:title="$t('player.button.skip-backward')"
/></span>
<mdicon
name="skip-backward"
:size="icon_size"
:title="$t('player.button.skip-backward')"
/>
</a>
</template>

12
web-src/src/components/PlayerButtonRepeat.vue
View File

@ -1,11 +1,11 @@
<template>
<a :class="{ 'is-info': !is_repeat_off }" @click="toggle_repeat_mode">
<span class="icon"
><mdicon
:name="icon_name"
:size="icon_size"
:title="$t('player.button.' + icon_name)"
/></span>
<mdicon
class="icon"
:name="icon_name"
:size="icon_size"
:title="$t('player.button.' + icon_name)"
/>
</a>
</template>

11
web-src/src/components/PlayerButtonSeekBack.vue
View File

@ -1,11 +1,10 @@
<template>
<a v-if="visible" :disabled="disabled" @click="seek">
<span class="icon"
><mdicon
name="rewind-10"
:size="icon_size"
:title="$t('player.button.seek-backward')"
/></span>
<mdicon
name="rewind-10"
:size="icon_size"
:title="$t('player.button.seek-backward')"
/>
</a>
</template>

11
web-src/src/components/PlayerButtonSeekForward.vue
View File

@ -1,11 +1,10 @@
<template>
<a v-if="visible" :disabled="disabled" @click="seek">
<span class="icon"
><mdicon
name="fast-forward-30"
:size="icon_size"
:title="$t('player.button.seek-forward')"
/></span>
<mdicon
name="fast-forward-30"
:size="icon_size"
:title="$t('player.button.seek-forward')"
/>
</a>
</template>

12
web-src/src/components/PlayerButtonShuffle.vue
View File

@ -1,11 +1,11 @@
<template>
<a :class="{ 'is-info': is_shuffle }" @click="toggle_shuffle_mode">
<span class="icon"
><mdicon
:name="icon_name"
:size="icon_size"
:title="$t('player.button.' + icon_name)"
/></span>
<mdicon
class="icon"
:name="icon_name"
:size="icon_size"
:title="$t('player.button.' + icon_name)"
/>
</a>
</template>

10
web-src/src/components/SpotifyModalDialogAlbum.vue
View File

@ -54,25 +54,21 @@
</div>
<footer class="card-footer">
<a class="card-footer-item has-text-dark" @click="queue_add">
<span class="icon"
><mdicon name="playlist-plus" size="16"
/></span>
<mdicon class="icon" name="playlist-plus" size="16" />
<span
class="is-size-7"
v-text="$t('dialog.spotify.album.add')"
/>
</a>
<a class="card-footer-item has-text-dark" @click="queue_add_next">
<span class="icon"
><mdicon name="playlist-play" size="16"
/></span>
<mdicon class="icon" name="playlist-play" size="16" />
<span
class="is-size-7"
v-text="$t('dialog.spotify.album.add-next')"
/>
</a>
<a class="card-footer-item has-text-dark" @click="play">
<span class="icon"><mdicon name="play" size="16" /></span>
<mdicon class="icon" name="play" size="16" />
<span
class="is-size-7"
v-text="$t('dialog.spotify.album.play')"

10
web-src/src/components/SpotifyModalDialogArtist.vue
View File

@ -37,25 +37,21 @@
</div>
<footer class="card-footer">
<a class="card-footer-item has-text-dark" @click="queue_add">
<span class="icon"
><mdicon name="playlist-plus" size="16"
/></span>
<mdicon class="icon" name="playlist-plus" size="16" />
<span
class="is-size-7"
v-text="$t('dialog.spotify.artist.add')"
/>
</a>
<a class="card-footer-item has-text-dark" @click="queue_add_next">
<span class="icon"
><mdicon name="playlist-play" size="16"
/></span>
<mdicon class="icon" name="playlist-play" size="16" />
<span
class="is-size-7"
v-text="$t('dialog.spotify.artist.add-next')"
/>
</a>
<a class="card-footer-item has-text-dark" @click="play">
<span class="icon"><mdicon name="play" size="16" /></span>
<mdicon class="icon" name="play" size="16" />
<span
class="is-size-7"
v-text="$t('dialog.spotify.artist.play')"

10
web-src/src/components/SpotifyModalDialogPlaylist.vue
View File

@ -42,25 +42,21 @@
</div>
<footer class="card-footer">
<a class="card-footer-item has-text-dark" @click="queue_add">
<span class="icon"
><mdicon name="playlist-plus" size="16"
/></span>
<mdicon class="icon" name="playlist-plus" size="16" />
<span
class="is-size-7"
v-text="$t('dialog.spotify.playlist.add')"
/>
</a>
<a class="card-footer-item has-text-dark" @click="queue_add_next">
<span class="icon"
><mdicon name="playlist-play" size="16"
/></span>
<mdicon class="icon" name="playlist-play" size="16" />
<span
class="is-size-7"
v-text="$t('dialog.spotify.playlist.add-next')"
/>
</a>
<a class="card-footer-item has-text-dark" @click="play">
<span class="icon"><mdicon name="play" size="16" /></span>
<mdicon class="icon" name="play" size="16" />
<span
class="is-size-7"
v-text="$t('dialog.spotify.playlist.play')"

10
web-src/src/components/SpotifyModalDialogTrack.vue
View File

@ -72,25 +72,21 @@
</div>
<footer class="card-footer">
<a class="card-footer-item has-text-dark" @click="queue_add">
<span class="icon"
><mdicon name="playlist-plus" size="16"
/></span>
<mdicon class="icon" name="playlist-plus" size="16" />
<span
class="is-size-7"
v-text="$t('dialog.spotify.track.add')"
/>
</a>
<a class="card-footer-item has-text-dark" @click="queue_add_next">
<span class="icon"
><mdicon name="playlist-play" size="16"
/></span>
<mdicon class="icon" name="playlist-play" size="16" />
<span
class="is-size-7"
v-text="$t('dialog.spotify.track.add-next')"
/>
</a>
<a class="card-footer-item has-text-dark" @click="play">
<span class="icon"><mdicon name="play" size="16" /></span>
<mdicon class="icon" name="play" size="16" />
<span
class="is-size-7"
v-text="$t('dialog.spotify.track.play')"

12
web-src/src/components/TabsAudiobooks.vue
View File

@ -12,9 +12,11 @@
>
<li :class="{ 'is-active': isActive }">
<a @click="navigate" @keypress.enter="navigate">
<span class="icon is-small"
><mdicon name="account-music" size="16"
/></span>
<mdicon
class="icon is-small"
name="account-music"
size="16"
/>
<span v-text="$t('page.audiobooks.tabs.authors')" />
</a>
</li>
@ -26,9 +28,7 @@
>
<li :class="{ 'is-active': isActive }">
<a @click="navigate" @keypress.enter="navigate">
<span class="icon is-small"
><mdicon name="album" size="16"
/></span>
<mdicon class="icon is-small" name="album" size="16" />
<span v-text="$t('page.audiobooks.tabs.audiobooks')" />
</a>
</li>

32
web-src/src/components/TabsMusic.vue
View File

@ -12,9 +12,7 @@
>
<li :class="{ 'is-active': isActive }">
<a @click="navigate" @keypress.enter="navigate">
<span class="icon is-small"
><mdicon name="web" size="16"
/></span>
<mdicon class="icon is-small" name="web" size="16" />
<span v-text="$t('page.browse.tabs.browse')" />
</a>
</li>
@ -26,9 +24,11 @@
>
<li :class="{ 'is-active': isActive }">
<a @click="navigate" @keypress.enter="navigate">
<span class="icon is-small"
><mdicon name="account-music" size="16"
/></span>
<mdicon
class="icon is-small"
name="account-music"
size="16"
/>
<span v-text="$t('page.browse.tabs.artists')" />
</a>
</li>
@ -40,9 +40,7 @@
>
<li :class="{ 'is-active': isActive }">
<a @click="navigate" @keypress.enter="navigate">
<span class="icon is-small"
><mdicon name="album" size="16"
/></span>
<mdicon class="icon is-small" name="album" size="16" />
<span v-text="$t('page.browse.tabs.albums')" />
</a>
</li>
@ -54,9 +52,7 @@
>
<li :class="{ 'is-active': isActive }">
<a @click="navigate" @keypress.enter="navigate">
<span class="icon is-small"
><mdicon name="speaker" size="16"
/></span>
<mdicon class="icon is-small" name="speaker" size="16" />
<span v-text="$t('page.browse.tabs.genres')" />
</a>
</li>
@ -68,9 +64,11 @@
>
<li :class="{ 'is-active': isActive }">
<a @click="navigate" @keypress.enter="navigate">
<span class="icon is-small"
><mdicon name="book-open-page-variant" size="16"
/></span>
<mdicon
class="icon is-small"
name="book-open-page-variant"
size="16"
/>
<span v-text="$t('page.browse.tabs.composers')" />
</a>
</li>
@ -83,9 +81,7 @@
>
<li :class="{ 'is-active': isActive }">
<a @click="navigate" @keypress.enter="navigate">
<span class="icon is-small"
><mdicon name="spotify" size="16"
/></span>
<mdicon class="icon is-small" name="spotify" size="16" />
<span v-text="$t('page.browse.tabs.spotify')" />
</a>
</li>

8
web-src/src/components/TabsSearch.vue
View File

@ -11,9 +11,7 @@
}"
>
<a @click="search_library">
<span class="icon is-small"
><mdicon name="bookshelf" size="16"
/></span>
<mdicon class="icon is-small" name="bookshelf" size="16" />
<span v-text="$t('page.search.tabs.library')" />
</a>
</li>
@ -23,9 +21,7 @@
}"
>
<a @click="search_spotify">
<span class="icon is-small"
><mdicon name="spotify" size="16"
/></span>
<mdicon class="icon is-small" name="spotify" size="16" />
<span v-text="$t('page.search.tabs.spotify')" />
</a>
</li>

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

@ -8,16 +8,14 @@
</h2>
<div class="buttons fd-is-centered-mobile fd-has-margin-top">
<a class="button is-small is-dark is-rounded" @click="play">
<span class="icon"><mdicon name="shuffle" size="16" /></span>
<mdicon class="icon" name="shuffle" size="16" />
<span v-text="$t('page.album.shuffle')" />
</a>
<a
class="button is-small is-light is-rounded"
@click="show_album_details_modal = true"
>
<span class="icon"
><mdicon name="dots-horizontal" size="16"
/></span>
<mdicon class="icon" name="dots-horizontal" size="16" />
</a>
</div>
</template>

6
web-src/src/pages/PageArtist.vue
View File

@ -25,12 +25,10 @@
class="button is-small is-light is-rounded"
@click="show_artist_details_modal = true"
>
<span class="icon"
><mdicon name="dots-horizontal" size="16"
/></span>
<mdicon class="icon" name="dots-horizontal" size="16" />
</a>
<a class="button is-small is-dark is-rounded" @click="play">
<span class="icon"><mdicon name="shuffle" size="16" /></span>
<mdicon class="icon" name="shuffle" size="16" />
<span v-text="$t('page.artist.shuffle')" />
</a>
</div>

6
web-src/src/pages/PageArtistTracks.vue
View File

@ -26,12 +26,10 @@
class="button is-small is-light is-rounded"
@click="show_artist_details_modal = true"
>
<span class="icon"
><mdicon name="dots-horizontal" size="16"
/></span>
<mdicon class="icon" name="dots-horizontal" size="16" />
</a>
<a class="button is-small is-dark is-rounded" @click="play">
<span class="icon"><mdicon name="shuffle" size="16" /></span>
<mdicon class="icon" name="shuffle" size="16" />
<span v-text="$t('page.artist.shuffle')" />
</a>
</div>

6
web-src/src/pages/PageAudiobooksAlbum.vue
View File

@ -8,16 +8,14 @@
</h2>
<div class="buttons fd-is-centered-mobile fd-has-margin-top">
<a class="button is-small is-dark is-rounded" @click="play">
<span class="icon"><mdicon name="play" size="16" /></span>
<mdicon class="icon" name="play" size="16" />
<span v-text="$t('page.audiobooks.album.play')" />
</a>
<a
class="button is-small is-light is-rounded"
@click="show_album_details_modal = true"
>
<span class="icon"
><mdicon name="dots-horizontal" size="16"
/></span>
<mdicon class="icon" name="dots-horizontal" size="16" />
</a>
</div>
</template>

6
web-src/src/pages/PageAudiobooksArtist.vue
View File

@ -10,12 +10,10 @@
class="button is-small is-light is-rounded"
@click="show_artist_details_modal = true"
>
<span class="icon"
><mdicon name="dots-horizontal" size="16"
/></span>
<mdicon class="icon" name="dots-horizontal" size="16" />
</a>
<a class="button is-small is-dark is-rounded" @click="play">
<span class="icon"><mdicon name="play" size="16" /></span>
<mdicon class="icon" name="play" size="16" />
<span v-text="$t('page.audiobooks.artist.play')" />
</a>
</div>

6
web-src/src/pages/PageComposer.vue
View File

@ -10,12 +10,10 @@
class="button is-small is-light is-rounded"
@click="show_composer_details_modal = true"
>
<span class="icon"
><mdicon name="dots-horizontal" size="16"
/></span>
<mdicon class="icon" name="dots-horizontal" size="16" />
</a>
<a class="button is-small is-dark is-rounded" @click="play">
<span class="icon"><mdicon name="shuffle" size="16" /></span>
<mdicon class="icon" name="shuffle" size="16" />
<span v-text="$t('page.composer.shuffle')" />
</a>
</div>

6
web-src/src/pages/PageComposerTracks.vue
View File

@ -26,12 +26,10 @@
class="button is-small is-light is-rounded"
@click="show_composer_details_modal = true"
>
<span class="icon"
><mdicon name="dots-horizontal" size="16"
/></span>
<mdicon class="icon" name="dots-horizontal" size="16" />
</a>
<a class="button is-small is-dark is-rounded" @click="play">
<span class="icon"><mdicon name="shuffle" size="16" /></span>
<mdicon class="icon" name="shuffle" size="16" />
<span v-text="$t('page.composer.shuffle')" />
</a>
</div>

6
web-src/src/pages/PageFiles.vue
View File

@ -11,12 +11,10 @@
class="button is-small is-light is-rounded"
@click="show_details_modal = true"
>
<span class="icon"
><mdicon name="dots-horizontal" size="16"
/></span>
<mdicon class="icon" name="dots-horizontal" size="16" />
</a>
<a class="button is-small is-dark is-rounded" @click="play">
<span class="icon"><mdicon name="play" size="16" /></span>
<mdicon class="icon" name="play" size="16" />
<span v-text="$t('page.files.play')" />
</a>
</div>

6
web-src/src/pages/PageGenre.vue
View File

@ -13,12 +13,10 @@
class="button is-small is-light is-rounded"
@click="show_genre_details_modal = true"
>
<span class="icon"
><mdicon name="dots-horizontal" size="16"
/></span>
<mdicon class="icon" name="dots-horizontal" size="16" />
</a>
<a class="button is-small is-dark is-rounded" @click="play">
<span class="icon"><mdicon name="shuffle" size="16" /></span>
<mdicon class="icon" name="shuffle" size="16" />
<span v-text="$t('page.genre.shuffle')" />
</a>
</div>

6
web-src/src/pages/PageGenreTracks.vue
View File

@ -26,12 +26,10 @@
class="button is-small is-light is-rounded"
@click="show_genre_details_modal = true"
>
<span class="icon"
><mdicon name="dots-horizontal" size="16"
/></span>
<mdicon class="icon" name="dots-horizontal" size="16" />
</a>
<a class="button is-small is-dark is-rounded" @click="play">
<span class="icon"><mdicon name="shuffle" size="16" /></span>
<mdicon class="icon" name="shuffle" size="16" />
<span v-text="$t('page.genre.shuffle')" />
</a>
</div>

6
web-src/src/pages/PagePlaylist.vue
View File

@ -10,12 +10,10 @@
class="button is-small is-light is-rounded"
@click="show_playlist_details_modal = true"
>
<span class="icon"
><mdicon name="dots-horizontal" size="16"
/></span>
<mdicon class="icon" name="dots-horizontal" size="16" />
</a>
<a class="button is-small is-dark is-rounded" @click="play">
<span class="icon"><mdicon name="shuffle" size="16" /></span>
<mdicon class="icon" name="shuffle" size="16" />
<span v-text="$t('page.playlist.shuffle')" />
</a>
</div>

6
web-src/src/pages/PagePodcast.vue
View File

@ -10,12 +10,10 @@
class="button is-small is-light is-rounded"
@click="show_details_modal = true"
>
<span class="icon"
><mdicon name="dots-horizontal" size="16"
/></span>
<mdicon class="icon" name="dots-horizontal" size="16" />
</a>
<a class="button is-small is-dark is-rounded" @click="play">
<span class="icon"><mdicon name="play" size="16" /></span>
<mdicon class="icon" name="play" size="16" />
<span v-text="$t('page.podcast.play')" />
</a>
</div>

6
web-src/src/pages/PagePodcasts.vue
View File

@ -7,7 +7,7 @@
<template #heading-right>
<div class="buttons is-centered">
<a class="button is-small" @click="mark_all_played">
<span class="icon"><mdicon name="pencil" size="16" /></span>
<mdicon class="icon" name="pencil" size="16" />
<span v-text="$t('page.podcasts.mark-all-played')" />
</a>
</div>
@ -31,11 +31,11 @@
<template #heading-right>
<div class="buttons is-centered">
<a v-if="rss.tracks > 0" class="button is-small" @click="update_rss">
<span class="icon"><mdicon name="refresh" size="16" /></span>
<mdicon class="icon" name="refresh" size="16" />
<span v-text="$t('page.podcasts.update')" />
</a>
<a class="button is-small" @click="open_add_podcast_dialog">
<span class="icon"><mdicon name="rss" size="16" /></span>
<mdicon class="icon" name="rss" size="16" />
<span v-text="$t('page.podcasts.add')" />
</a>
</div>

24
web-src/src/pages/PageQueue.vue
View File

@ -15,13 +15,11 @@
:class="{ 'is-info': show_only_next_items }"
@click="update_show_next_items"
>
<span class="icon"
><mdicon name="arrow-collapse-down" size="16"
/></span>
<mdicon class="icon" name="arrow-collapse-down" size="16" />
<span v-text="$t('page.queue.hide-previous')" />
</a>
<a class="button is-small" @click="open_add_stream_dialog">
<span class="icon"><mdicon name="web" size="16" /></span>
<mdicon class="icon" name="web" size="16" />
<span v-text="$t('page.queue.add-stream')" />
</a>
<a
@ -29,11 +27,11 @@
:class="{ 'is-info': edit_mode }"
@click="edit_mode = !edit_mode"
>
<span class="icon"><mdicon name="pencil" size="16" /></span>
<mdicon class="icon" name="pencil" size="16" />
<span v-text="$t('page.queue.edit')" />
</a>
<a class="button is-small" @click="queue_clear">
<span class="icon"><mdicon name="delete-empty" size="16" /></span>
<mdicon class="icon" name="delete-empty" size="16" />
<span v-text="$t('page.queue.clear')" />
</a>
<a
@ -42,7 +40,7 @@
:disabled="queue_items.length === 0"
@click="save_dialog"
>
<span class="icon"><mdicon name="content-save" size="16" /></span>
<mdicon class="icon" name="content-save" size="16" />
<span v-text="$t('page.queue.save')" />
</a>
</div>
@ -64,17 +62,17 @@
>
<template #actions>
<a v-if="!edit_mode" @click.prevent.stop="open_dialog(element)">
<span class="icon has-text-dark"
><mdicon name="dots-vertical" size="16"
/></span>
<mdicon
class="icon has-text-dark"
name="dots-vertical"
size="16"
/>
</a>
<a
v-if="element.id !== state.item_id && edit_mode"
@click.prevent.stop="remove(element)"
>
<span class="icon has-text-grey"
><mdicon name="delete" size="18"
/></span>
<mdicon class="icon has-text-grey" name="delete" size="18" />
</a>
</template>
</list-item-queue-item>

4
web-src/src/pages/PageSearch.vue
View File

@ -16,9 +16,7 @@
:placeholder="$t('page.search.placeholder')"
autocomplete="off"
/>
<span class="icon is-left"
><mdicon name="magnify" size="16"
/></span>
<mdicon class="icon is-left" name="magnify" size="16" />
</p>
<p class="help has-text-centered">
<span v-html="$t('page.search.help')" />

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

@ -12,16 +12,14 @@
</h2>
<div class="buttons fd-is-centered-mobile fd-has-margin-top">
<a class="button is-small is-dark is-rounded" @click="play">
<span class="icon"><mdicon name="shuffle" size="16" /></span>
<mdicon class="icon" name="shuffle" size="16" />
<span v-text="$t('page.spotify.album.shuffle')" />
</a>
<a
class="button is-small is-light is-rounded"
@click="show_album_details_modal = true"
>
<span class="icon"
><mdicon name="dots-horizontal" size="16"
/></span>
<mdicon class="icon" name="dots-horizontal" size="16" />
</a>
</div>
</template>
@ -50,9 +48,11 @@
>
<template #actions>
<a @click.prevent.stop="open_track_dialog(track)">
<span class="icon has-text-dark"
><mdicon name="dots-vertical" size="16"
/></span>
<mdicon
class="icon has-text-dark"
name="dots-vertical"
size="16"
/>
</a>
</template>
</spotify-list-item-track>

14
web-src/src/pages/SpotifyPageArtist.vue
View File

@ -10,12 +10,10 @@
class="button is-small is-light is-rounded"
@click="show_artist_details_modal = true"
>
<span class="icon"
><mdicon name="dots-horizontal" size="16"
/></span>
<mdicon class="icon" name="dots-horizontal" size="16" />
</a>
<a class="button is-small is-dark is-rounded" @click="play">
<span class="icon"><mdicon name="shuffle" size="16" /></span>
<mdicon class="icon" name="shuffle" size="16" />
<span v-text="$t('page.spotify.artist.shuffle')" />
</a>
</div>
@ -43,9 +41,11 @@
</template>
<template #actions>
<a @click.prevent.stop="open_dialog(album)">
<span class="icon has-text-dark"
><mdicon name="dots-vertical" size="16"
/></span>
<mdicon
class="icon has-text-dark"
name="dots-vertical"
size="16"
/>
</a>
</template>
</spotify-list-item-album>

16
web-src/src/pages/SpotifyPageBrowse.vue
View File

@ -25,9 +25,11 @@
</template>
<template #actions>
<a @click.prevent.stop="open_album_dialog(album)">
<span class="icon has-text-dark"
><mdicon name="dots-vertical" size="16"
/></span>
<mdicon
class="icon has-text-dark"
name="dots-vertical"
size="16"
/>
</a>
</template>
</spotify-list-item-album>
@ -65,9 +67,11 @@
>
<template #actions>
<a @click.prevent.stop="open_playlist_dialog(playlist)">
<span class="icon has-text-dark"
><mdicon name="dots-vertical" size="16"
/></span>
<mdicon
class="icon has-text-dark"
name="dots-vertical"
size="16"
/>
</a>
</template>
</spotify-list-item-playlist>

8
web-src/src/pages/SpotifyPageBrowseFeaturedPlaylists.vue
View File

@ -16,9 +16,11 @@
>
<template #actions>
<a @click.prevent.stop="open_playlist_dialog(playlist)">
<span class="icon has-text-dark"
><mdicon name="dots-vertical" size="16"
/></span>
<mdicon
class="icon has-text-dark"
name="dots-vertical"
size="16"
/>
</a>
</template>
</spotify-list-item-playlist>

8
web-src/src/pages/SpotifyPageBrowseNewReleases.vue
View File

@ -24,9 +24,11 @@
</template>
<template #actions>
<a @click.prevent.stop="open_album_dialog(album)">
<span class="icon has-text-dark"
><mdicon name="dots-vertical" size="16"
/></span>
<mdicon
class="icon has-text-dark"
name="dots-vertical"
size="16"
/>
</a>
</template>
</spotify-list-item-album>

14
web-src/src/pages/SpotifyPagePlaylist.vue
View File

@ -10,12 +10,10 @@
class="button is-small is-light is-rounded"
@click="show_playlist_details_modal = true"
>
<span class="icon"
><mdicon name="dots-horizontal" size="16"
/></span>
<mdicon class="icon" name="dots-horizontal" size="16" />
</a>
<a class="button is-small is-dark is-rounded" @click="play">
<span class="icon"><mdicon name="shuffle" size="16" /></span>
<mdicon class="icon" name="shuffle" size="16" />
<span v-text="$t('page.spotify.playlist.shuffle')" />
</a>
</div>
@ -36,9 +34,11 @@
>
<template #actions>
<a @click.prevent.stop="open_track_dialog(track)">
<span class="icon has-text-dark"
><mdicon name="dots-vertical" size="16"
/></span>
<mdicon
class="icon has-text-dark"
name="dots-vertical"
size="16"
/>
</a>
</template>
</spotify-list-item-track>

37
web-src/src/pages/SpotifyPageSearch.vue
View File

@ -16,9 +16,8 @@
:placeholder="$t('page.spotify.search.placeholder')"
autocomplete="off"
/>
<span class="icon is-left"
><mdicon name="magnify" size="16"
/></span>
<mdicon class="icon is-left" name="magnify" size="16" />
</p>
</div>
</form>
@ -51,9 +50,11 @@
>
<template #actions>
<a @click.prevent.stop="open_track_dialog(track)">
<span class="icon has-text-dark"
><mdicon name="dots-vertical" size="16"
/></span>
<mdicon
class="icon has-text-dark"
name="dots-vertical"
size="16"
/>
</a>
</template>
</spotify-list-item-track>
@ -104,9 +105,11 @@
>
<template #actions>
<a @click.prevent.stop="open_artist_dialog(artist)">
<span class="icon has-text-dark"
><mdicon name="dots-vertical" size="16"
/></span>
<mdicon
class="icon has-text-dark"
name="dots-vertical"
size="16"
/>
</a>
</template>
</spotify-list-item-artist>
@ -167,9 +170,11 @@
</template>
<template #actions>
<a @click.prevent.stop="open_album_dialog(album)">
<span class="icon has-text-dark"
><mdicon name="dots-vertical" size="16"
/></span>
<mdicon
class="icon has-text-dark"
name="dots-vertical"
size="16"
/>
</a>
</template>
</spotify-list-item-album>
@ -219,9 +224,11 @@
>
<template #actions>
<a @click.prevent.stop="open_playlist_dialog(playlist)">
<span class="icon has-text-dark"
><mdicon name="dots-vertical" size="16"
/></span>
<mdicon
class="icon has-text-dark"
name="dots-vertical"
size="16"
/>
</a>
</template>
</spotify-list-item-playlist>

8
web-src/src/templates/ContentWithHeading.vue
View File

@ -15,18 +15,14 @@
class="button is-small is-white"
@click="scroll_to_top"
>
<span class="icon is-small"
><mdicon name="chevron-down" size="16"
/></span>
<mdicon class="icon is-small" name="chevron-down" size="16" />
</a>
<a
v-else
class="button is-small is-white"
@click="scroll_to_content"
>
<span class="icon is-small"
><mdicon name="chevron-up" size="16"
/></span>
<mdicon class="icon is-small" name="chevron-up" size="16" />
</a>
</nav>
</section>