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

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>