mirror of
https://github.com/owntone/owntone-server.git
synced 2025-11-29 21:33:35 -05:00
[web] Migrate to Bulma 1.0.2
This commit is contained in:
Alain Nussbaumer
@@ -5,13 +5,11 @@
|
||||
<div class="column is-four-fifths">
|
||||
<div class="content">
|
||||
<nav class="level">
|
||||
<!-- Left side -->
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<p class="title is-4" v-text="$t('page.about.library')" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- Right side -->
|
||||
<div class="level-right">
|
||||
<div v-if="library.updating">
|
||||
<a
|
||||
@@ -31,7 +29,7 @@
|
||||
<div class="media">
|
||||
<div
|
||||
class="media-content has-text-weight-bold"
|
||||
v-text="$t('page.about.library')"
|
||||
v-text="$t('page.about.name')"
|
||||
/>
|
||||
<div class="media-right" v-text="configuration.library_name" />
|
||||
</div>
|
||||
|
||||
@@ -6,13 +6,16 @@
|
||||
<p class="subtitle is-6 has-text-link">
|
||||
<a class="has-text-link" @click="open_artist" v-text="album.artist" />
|
||||
</p>
|
||||
<div class="buttons fd-is-centered-mobile mt-5">
|
||||
<a class="button is-small is-dark is-rounded" @click="play">
|
||||
<div class="buttons is-centered-mobile mt-5">
|
||||
<a
|
||||
class="button has-background-light is-small is-rounded"
|
||||
@click="play"
|
||||
>
|
||||
<mdicon class="icon" name="shuffle" size="16" />
|
||||
<span v-text="$t('page.album.shuffle')" />
|
||||
</a>
|
||||
<a
|
||||
class="button is-small is-light is-rounded"
|
||||
class="button is-small has-background-light is-rounded"
|
||||
@click="show_details_modal = true"
|
||||
>
|
||||
<mdicon class="icon" name="dots-horizontal" size="16" />
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
v-text="album.artists[0].name"
|
||||
/>
|
||||
</p>
|
||||
<div class="buttons fd-is-centered-mobile mt-5">
|
||||
<div class="buttons is-centered-mobile mt-5">
|
||||
<a class="button is-small is-dark is-rounded" @click="play">
|
||||
<mdicon class="icon" name="shuffle" size="16" />
|
||||
<span v-text="$t('page.spotify.album.shuffle')" />
|
||||
|
||||
@@ -7,22 +7,25 @@
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<p class="heading" v-text="$t('page.albums.filter')" />
|
||||
<div class="field">
|
||||
<control-switch v-model="uiStore.hide_singles">
|
||||
<template #label>
|
||||
<span v-text="$t('page.albums.hide-singles')" />
|
||||
</template>
|
||||
</control-switch>
|
||||
<p class="help" v-text="$t('page.albums.hide-singles-help')" />
|
||||
</div>
|
||||
<div v-if="spotify_enabled" class="field">
|
||||
<control-switch v-model="uiStore.hide_spotify">
|
||||
<template #label>
|
||||
<span v-text="$t('page.albums.hide-spotify')" />
|
||||
</template>
|
||||
</control-switch>
|
||||
<p class="help" v-text="$t('page.albums.hide-spotify-help')" />
|
||||
</div>
|
||||
<control-switch v-model="uiStore.hide_singles">
|
||||
<template #label>
|
||||
<span v-text="$t('page.albums.hide-singles')" />
|
||||
</template>
|
||||
<template #help>
|
||||
<span v-text="$t('page.albums.hide-singles-help')" />
|
||||
</template>
|
||||
</control-switch>
|
||||
<control-switch
|
||||
v-if="spotify_enabled"
|
||||
v-model="uiStore.hide_spotify"
|
||||
>
|
||||
<template #label>
|
||||
<span v-text="$t('page.albums.hide-spotify')" />
|
||||
</template>
|
||||
<template #help>
|
||||
<span v-text="$t('page.albums.hide-spotify-help')" />
|
||||
</template>
|
||||
</control-switch>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="heading" v-text="$t('page.albums.sort.title')" />
|
||||
|
||||
@@ -5,14 +5,17 @@
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<p class="heading" v-text="$t('page.artist.filter')" />
|
||||
<div v-if="spotify_enabled" class="field">
|
||||
<control-switch v-model="uiStore.hide_spotify">
|
||||
<template #label>
|
||||
<span v-text="$t('page.artist.hide-spotify')" />
|
||||
</template>
|
||||
</control-switch>
|
||||
<p class="help" v-text="$t('page.artist.hide-spotify-help')" />
|
||||
</div>
|
||||
<control-switch
|
||||
v-if="spotify_enabled"
|
||||
v-model="uiStore.hide_spotify"
|
||||
>
|
||||
<template #label>
|
||||
<span v-text="$t('page.artist.hide-spotify')" />
|
||||
</template>
|
||||
<template #help>
|
||||
<span v-text="$t('page.artist.hide-spotify-help')" />
|
||||
</template>
|
||||
</control-switch>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="heading" v-text="$t('page.artist.sort.title')" />
|
||||
|
||||
@@ -6,14 +6,17 @@
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<p class="heading" v-text="$t('page.artist.filter')" />
|
||||
<div v-if="spotify_enabled" class="field">
|
||||
<control-switch v-model="uiStore.hide_spotify">
|
||||
<template #label>
|
||||
<span v-text="$t('page.artist.hide-spotify')" />
|
||||
</template>
|
||||
</control-switch>
|
||||
<p class="help" v-text="$t('page.artist.hide-spotify-help')" />
|
||||
</div>
|
||||
<control-switch
|
||||
v-if="spotify_enabled"
|
||||
v-model="uiStore.hide_spotify"
|
||||
>
|
||||
<template #label>
|
||||
<span v-text="$t('page.artist.hide-spotify')" />
|
||||
</template>
|
||||
<template #help>
|
||||
<span v-text="$t('page.artist.hide-spotify-help')" />
|
||||
</template>
|
||||
</control-switch>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="heading" v-text="$t('page.artist.sort.title')" />
|
||||
|
||||
@@ -6,22 +6,24 @@
|
||||
<index-button-list :indices="artists.indices" />
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<p class="heading" v-text="$t('page.artists.filter')" />
|
||||
<div class="field">
|
||||
<control-switch v-model="uiStore.hide_singles">
|
||||
<template #label>
|
||||
<span v-text="$t('page.artists.hide-singles')" />
|
||||
</template>
|
||||
</control-switch>
|
||||
<p class="help" v-text="$t('page.artists.hide-singles-help')" />
|
||||
</div>
|
||||
<p v-text="$t('page.artists.filter')" class="heading" />
|
||||
<control-switch v-model="uiStore.hide_singles">
|
||||
<template #label>
|
||||
<span v-text="$t('page.artists.hide-singles')" />
|
||||
</template>
|
||||
<template #help>
|
||||
<span v-text="$t('page.artists.hide-singles-help')" />
|
||||
</template>
|
||||
</control-switch>
|
||||
<div v-if="spotify_enabled" class="field">
|
||||
<control-switch v-model="uiStore.hide_spotify">
|
||||
<template #label>
|
||||
<span v-text="$t('page.artists.hide-spotify')" />
|
||||
</template>
|
||||
<template #help>
|
||||
<span v-text="$t('page.artists.hide-spotify-help')" />
|
||||
</template>
|
||||
</control-switch>
|
||||
<p class="help" v-text="$t('page.artists.hide-spotify-help')" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
<p class="subtitle is-6 has-text-link">
|
||||
<a class="has-text-link" @click="open_artist" v-text="album.artist" />
|
||||
</p>
|
||||
<div class="buttons fd-is-centered-mobile mt-5">
|
||||
<div class="buttons is-centered-mobile mt-5">
|
||||
<a class="button is-small is-dark is-rounded" @click="play">
|
||||
<mdicon class="icon" name="play" size="16" />
|
||||
<span v-text="$t('page.audiobooks.album.play')" />
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
<nav class="level">
|
||||
<p class="level-item">
|
||||
<router-link
|
||||
class="button is-light is-small is-rounded"
|
||||
class="button is-small is-rounded"
|
||||
:to="{ name: 'music-recently-added' }"
|
||||
>
|
||||
{{ $t('page.music.show-more') }}
|
||||
@@ -32,7 +32,7 @@
|
||||
<nav class="level">
|
||||
<p class="level-item">
|
||||
<router-link
|
||||
class="button is-light is-small is-rounded"
|
||||
class="button is-small is-rounded"
|
||||
:to="{ name: 'music-recently-played' }"
|
||||
>
|
||||
{{ $t('page.music.show-more') }}
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
<p class="level-item">
|
||||
<router-link
|
||||
:to="{ name: 'music-spotify-new-releases' }"
|
||||
class="button is-light is-small is-rounded"
|
||||
class="button is-small is-rounded"
|
||||
>
|
||||
{{ $t('page.spotify.music.show-more') }}
|
||||
</router-link>
|
||||
@@ -36,7 +36,7 @@
|
||||
<p class="level-item">
|
||||
<router-link
|
||||
:to="{ name: 'music-spotify-featured-playlists' }"
|
||||
class="button is-light is-small is-rounded"
|
||||
class="button is-small is-rounded"
|
||||
>
|
||||
{{ $t('page.spotify.music.show-more') }}
|
||||
</router-link>
|
||||
|
||||
@@ -1,56 +1,56 @@
|
||||
<template>
|
||||
<div class="hero is-full-height">
|
||||
<div v-if="track.id > 0" class="hero-body is-flex is-align-items-center">
|
||||
<div class="container has-text-centered" style="max-width: 500px">
|
||||
<cover-artwork
|
||||
:url="track.artwork_url"
|
||||
:artist="track.artist"
|
||||
:album="track.album"
|
||||
class="is-clickable fd-has-shadow fd-cover-big-image"
|
||||
:class="{ 'is-masked': lyricsStore.pane }"
|
||||
@click="open_dialog(track)"
|
||||
/>
|
||||
<lyrics-pane v-if="lyricsStore.pane" />
|
||||
<control-slider
|
||||
v-model:value="track_progress"
|
||||
class="mt-5"
|
||||
:disabled="is_live"
|
||||
:max="track_progress_max"
|
||||
:cursor="cursor"
|
||||
@change="seek"
|
||||
@mousedown="start_dragging"
|
||||
@mouseup="end_dragging"
|
||||
/>
|
||||
<div class="is-flex is-justify-content-space-between">
|
||||
<p class="subtitle is-7" v-text="track_elapsed_time" />
|
||||
<p class="subtitle is-7" v-text="track_total_time" />
|
||||
</div>
|
||||
<p class="title is-5" v-text="track.title" />
|
||||
<p class="title is-6" v-text="track.artist" />
|
||||
<p
|
||||
v-if="composer"
|
||||
class="subtitle is-6 has-text-grey has-text-weight-bold"
|
||||
v-text="composer"
|
||||
/>
|
||||
<p v-if="track.album" class="subtitle is-6" v-text="track.album" />
|
||||
<p
|
||||
v-if="settingsStore.show_filepath_now_playing"
|
||||
class="subtitle is-6 has-text-grey"
|
||||
v-text="track.path"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="hero-body is-flex is-align-items-center">
|
||||
<div class="hero-body is-flex is-align-items-center">
|
||||
<div class="container has-text-centered">
|
||||
<p class="title is-5" v-text="$t('page.now-playing.title')" />
|
||||
<p class="subtitle" v-text="$t('page.now-playing.info')" />
|
||||
<div v-if="track.id" class="mx-auto" style="max-width: 32rem">
|
||||
<cover-artwork
|
||||
:url="track.artwork_url"
|
||||
:artist="track.artist"
|
||||
:album="track.album"
|
||||
class="is-clickable fd-has-shadow fd-cover-big-image"
|
||||
:class="{ 'is-masked': lyricsStore.pane }"
|
||||
@click="open_dialog(track)"
|
||||
/>
|
||||
<lyrics-pane v-if="lyricsStore.pane" />
|
||||
<control-slider
|
||||
v-model:value="track_progress"
|
||||
class="mt-5"
|
||||
:disabled="is_live"
|
||||
:max="track_progress_max"
|
||||
:cursor="cursor"
|
||||
@change="seek"
|
||||
@mousedown="start_dragging"
|
||||
@mouseup="end_dragging"
|
||||
/>
|
||||
<div class="is-flex is-justify-content-space-between">
|
||||
<p class="subtitle is-7" v-text="track_elapsed_time" />
|
||||
<p class="subtitle is-7" v-text="track_total_time" />
|
||||
</div>
|
||||
<p class="title is-5" v-text="track.title" />
|
||||
<p class="title is-6" v-text="track.artist" />
|
||||
<p
|
||||
v-if="composer"
|
||||
class="subtitle is-6 has-text-grey has-text-weight-bold"
|
||||
v-text="composer"
|
||||
/>
|
||||
<p v-if="track.album" class="subtitle is-6" v-text="track.album" />
|
||||
<p
|
||||
v-if="settingsStore.show_filepath_now_playing"
|
||||
class="subtitle is-6 has-text-grey"
|
||||
v-text="track.path"
|
||||
/>
|
||||
</div>
|
||||
<div v-else>
|
||||
<p class="title is-5" v-text="$t('page.now-playing.title')" />
|
||||
<p class="subtitle" v-text="$t('page.now-playing.info')" />
|
||||
</div>
|
||||
</div>
|
||||
<modal-dialog-queue-item
|
||||
:show="show_details_modal"
|
||||
:item="selected_item"
|
||||
@close="show_details_modal = false"
|
||||
/>
|
||||
</div>
|
||||
<modal-dialog-queue-item
|
||||
:show="show_details_modal"
|
||||
:item="selected_item"
|
||||
@close="show_details_modal = false"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
<p class="subtitle is-6">
|
||||
<br />
|
||||
</p>
|
||||
<div class="buttons fd-is-centered-mobile mt-5">
|
||||
<div class="buttons is-centered-mobile mt-5">
|
||||
<a class="button is-small is-dark is-rounded" @click="play">
|
||||
<mdicon class="icon" name="play" size="16" />
|
||||
<span v-text="$t('page.podcast.play')" />
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<input
|
||||
ref="search_field"
|
||||
v-model="search_query"
|
||||
class="input is-rounded is-shadowless"
|
||||
class="input is-rounded"
|
||||
type="text"
|
||||
:placeholder="$t('page.search.placeholder')"
|
||||
autocomplete="off"
|
||||
@@ -60,7 +60,7 @@
|
||||
<nav v-if="show_all_button(items)" class="level">
|
||||
<p class="level-item">
|
||||
<a
|
||||
class="button is-light is-small is-rounded"
|
||||
class="button is-small is-rounded"
|
||||
@click="expand(type)"
|
||||
v-text="
|
||||
$t(`page.search.show-${type}s`, items.total, {
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<input
|
||||
ref="search_field"
|
||||
v-model="search_query"
|
||||
class="input is-rounded is-shadowless"
|
||||
class="input is-rounded"
|
||||
type="text"
|
||||
:placeholder="$t('page.spotify.search.placeholder')"
|
||||
autocomplete="off"
|
||||
@@ -55,7 +55,7 @@
|
||||
<nav v-if="show_all_button(items)" class="level">
|
||||
<p class="level-item">
|
||||
<a
|
||||
class="button is-light is-small is-rounded"
|
||||
class="button is-small is-rounded"
|
||||
@click="expand(type)"
|
||||
v-text="
|
||||
$t(`page.spotify.search.show-${type}s`, items.total, {
|
||||
|
||||
@@ -9,18 +9,19 @@
|
||||
/>
|
||||
</template>
|
||||
<template #content>
|
||||
<div v-if="!spotify.spotify_installed" class="notification is-size-7">
|
||||
<div v-if="!spotify.spotify_installed" class="notification help">
|
||||
<p v-text="$t('page.settings.services.spotify.no-support')" />
|
||||
</div>
|
||||
<div v-if="spotify.spotify_installed">
|
||||
<div class="notification is-size-7">
|
||||
<span v-text="$t('page.settings.services.spotify.requirements')" />
|
||||
</div>
|
||||
<div class="mt-5">
|
||||
<div>
|
||||
<p
|
||||
class="content"
|
||||
v-text="$t('page.settings.services.spotify.grant-access')"
|
||||
/>
|
||||
<div class="notification help">
|
||||
<p v-text="$t('page.settings.services.spotify.requirements')" />
|
||||
<p v-text="spotify_required_scope.join(', ')" />
|
||||
</div>
|
||||
<p v-if="spotify.webapi_token_valid">
|
||||
<span v-text="$t('page.settings.services.spotify.user')" />
|
||||
<code v-text="spotify.webapi_user" />
|
||||
@@ -29,25 +30,21 @@
|
||||
<span v-text="$t('page.settings.services.spotify.reauthorize')" />
|
||||
<code v-text="spotify_missing_scope.join()" />
|
||||
</p>
|
||||
<div class="field mt-5">
|
||||
<div
|
||||
v-if="
|
||||
!spotify.webapi_token_valid || spotify_missing_scope.length > 0
|
||||
"
|
||||
class="field"
|
||||
>
|
||||
<div class="control">
|
||||
<a
|
||||
class="button"
|
||||
:class="{
|
||||
'is-info':
|
||||
!spotify.webapi_token_valid ||
|
||||
spotify_missing_scope.length > 0
|
||||
}"
|
||||
:href="spotify.oauth_uri"
|
||||
v-text="$t('page.settings.services.spotify.authorize')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<p class="help">
|
||||
<span v-text="$t('page.settings.services.spotify.scopes')" />
|
||||
<code v-text="spotify_required_scope.join(', ')" />
|
||||
</p>
|
||||
<div v-if="spotify.webapi_token_valid" class="field mt-5">
|
||||
<div v-if="spotify.webapi_token_valid" class="field">
|
||||
<div class="control">
|
||||
<a
|
||||
class="button is-danger"
|
||||
|
||||
@@ -50,17 +50,14 @@
|
||||
v-text="$t('page.settings.devices.speaker-pairing-info')"
|
||||
/>
|
||||
<div v-for="output in outputs" :key="output.id">
|
||||
<div class="field">
|
||||
<control-switch
|
||||
:id="output.id"
|
||||
v-model="output.selected"
|
||||
@update:model-value="toggleOutput(output.id)"
|
||||
>
|
||||
<template #label>
|
||||
<span v-text="output.name" />
|
||||
</template>
|
||||
</control-switch>
|
||||
</div>
|
||||
<control-switch
|
||||
v-model="output.selected"
|
||||
@update:model-value="toggleOutput(output.id)"
|
||||
>
|
||||
<template #label>
|
||||
<span v-text="output.name" />
|
||||
</template>
|
||||
</control-switch>
|
||||
<form
|
||||
v-if="output.needs_auth_key"
|
||||
class="mb-5"
|
||||
|
||||
Reference in New Issue
Block a user