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

[web] Remove inline styles whenever possible

Browse Source 
Most of the inline styles have been removed in favour of standard Bulma styles.
This commit is contained in:
Alain Nussbaumer 2023-07-01 18:19:29 +02:00
parent 60f1c84a21
commit 91c5a4fa67
18 changed files with 34 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,6 @@
<template> <template>
<section> <section>
<nav class="buttons is-centered fd-is-square" style="margin-bottom: 16px"> <nav class="buttons is-centered mb-4 fd-is-square">
<a <a
v-for="char in index" v-for="char in index"
:key="char" :key="char"

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

@ -32,11 +32,7 @@
</div> </div>
<div class="field"> <div class="field">
<label class="checkbox is-size-7 is-small"> <label class="checkbox is-size-7 is-small">
<input <input v-model="rescan_metadata" type="checkbox" class="mr-2" />
v-model="rescan_metadata"
type="checkbox"
style="margin-right: 5px"
/>
<span v-text="$t('dialog.update.rescan-metadata')" /> <span v-text="$t('dialog.update.rescan-metadata')" />
</label> </label>
</div> </div>

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

@ -92,10 +92,7 @@
size="18" size="18"
/> />
</a> </a>
<div <div class="navbar-dropdown is-right">
class="navbar-dropdown is-right is-boxed"
style="margin-right: 6px; margin-bottom: 6px; border-radius: 6px"
>
<div class="navbar-item"> <div class="navbar-item">
<!-- Outputs: master volume --> <!-- Outputs: master volume -->
<div class="level is-mobile"> <div class="level is-mobile">
@ -153,20 +150,19 @@
</div> </div>
<div class="level-item"> <div class="level-item">
<div class="is-flex-grow-1"> <div class="is-flex-grow-1">
<p <div
class="heading" class="is-flex is-align-content-center"
:class="{ 'has-text-grey-light': !playing }" :class="{ 'has-text-grey-light': !playing }"
> >
<span v-text="$t('navigation.stream')" /> <p class="heading" v-text="$t('navigation.stream')" />
<a href="stream.mp3" class="ml-2" target="_blank" <a href="stream.mp3" class="heading ml-2" target="_blank"
><mdicon ><mdicon
class="icon" class="icon is-small"
name="open-in-new" name="open-in-new"
size="16" size="16"
style="vertical-align: middle"
/> />
</a> </a>
</p> </div>
<input <input
v-model="stream_volume" v-model="stream_volume"
:disabled="!playing" :disabled="!playing"
@ -238,7 +234,7 @@
class="slider" class="slider"
max="100" max="100"
type="range" type="range"
:style="{ '--ratio': player.volume }" :style="{ '--ratio': player.volume / 100 }"
@change="change_volume" @change="change_volume"
/> />
</div> </div>
@ -270,20 +266,19 @@
</div> </div>
<div class="level-item"> <div class="level-item">
<div class="is-flex-grow-1"> <div class="is-flex-grow-1">
<p <div
class="heading" class="is-flex is-align-content-center"
:class="{ 'has-text-grey-light': !playing }" :class="{ 'has-text-grey-light': !playing }"
> >
<span v-text="$t('navigation.stream')" /> <p class="heading" v-text="$t('navigation.stream')" />
<a href="stream.mp3" class="ml-2" target="_blank" <a href="stream.mp3" class="heading ml-2" target="_blank"
><mdicon ><mdicon
class="icon" class="icon is-small"
name="open-in-new" name="open-in-new"
size="16" size="16"
style="vertical-align: middle"
/> />
</a> </a>
</p> </div>
<input <input
v-model="stream_volume" v-model="stream_volume"
:disabled="!playing" :disabled="!playing"

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

@ -118,10 +118,7 @@
<navbar-item-link to="/about">{{ <navbar-item-link to="/about">{{
$t('navigation.about') $t('navigation.about')
}}</navbar-item-link> }}</navbar-item-link>
<div <div class="navbar-item is-hidden-desktop" />
class="navbar-item is-hidden-desktop"
style="margin-bottom: 2.5rem"
/>
</div> </div>
</div> </div>
</div> </div>
@ -129,7 +126,6 @@
<div <div
v-show="show_settings_menu" v-show="show_settings_menu"
class="is-overlay" class="is-overlay"
style="z-index: 10; width: 100vw; height: 100vh"
@click="show_settings_menu = false" @click="show_settings_menu = false"
/> />
</nav> </nav>

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

@ -5,7 +5,7 @@
ref="setting" ref="setting"
type="checkbox" type="checkbox"
:checked="value" :checked="value"
style="margin-right: 5px" class="mr-2"
@change="set_update_timer" @change="set_update_timer"
/> />
<slot name="label" /> <slot name="label" />

3
web-src/src/components/SettingsIntfield.vue
View File

@ -12,10 +12,9 @@
<div class="control"> <div class="control">
<input <input
ref="setting" ref="setting"
class="input" class="column input is-one-fifth"
type="number" type="number"
min="0" min="0"
style="width: 10em"
:placeholder="placeholder" :placeholder="placeholder"
:value="value" :value="value"
@input="set_update_timer" @input="set_update_timer"

12
web-src/src/pages/PageAlbums.vue
View File

@ -6,11 +6,7 @@
<index-button-list :index="albums.indexList" /> <index-button-list :index="albums.indexList" />
<div class="columns"> <div class="columns">
<div class="column"> <div class="column">
<p <p class="heading mb-5" v-text="$t('page.albums.filter')" />
class="heading"
style="margin-bottom: 24px"
v-text="$t('page.albums.filter')"
/>
<div class="field"> <div class="field">
<div class="control"> <div class="control">
<input <input
@ -45,11 +41,7 @@
</div> </div>
</div> </div>
<div class="column"> <div class="column">
<p <p class="heading mb-5" v-text="$t('page.albums.sort-by.title')" />
class="heading"
style="margin-bottom: 24px"
v-text="$t('page.albums.sort-by.title')"
/>
<dropdown-menu <dropdown-menu
v-model="selected_groupby_option_id" v-model="selected_groupby_option_id"
:options="groupby_options" :options="groupby_options"

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

@ -4,11 +4,7 @@
<template #options> <template #options>
<div class="columns"> <div class="columns">
<div class="column"> <div class="column">
<p <p class="heading mb-5" v-text="$t('page.artist.sort-by.title')" />
class="heading"
style="margin-bottom: 24px"
v-text="$t('page.artist.sort-by.title')"
/>
<dropdown-menu <dropdown-menu
v-model="selected_groupby_option_id" v-model="selected_groupby_option_id"
:options="groupby_options" :options="groupby_options"

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

@ -5,11 +5,7 @@
<index-button-list :index="tracks.indexList" /> <index-button-list :index="tracks.indexList" />
<div class="columns"> <div class="columns">
<div class="column"> <div class="column">
<p <p class="heading mb-5" v-text="$t('page.artist.sort-by.title')" />
class="heading"
style="margin-bottom: 24px"
v-text="$t('page.artist.sort-by.title')"
/>
<dropdown-menu <dropdown-menu
v-model="selected_groupby_option_id" v-model="selected_groupby_option_id"
:options="groupby_options" :options="groupby_options"

12
web-src/src/pages/PageArtists.vue
View File

@ -6,11 +6,7 @@
<index-button-list :index="artists.indexList" /> <index-button-list :index="artists.indexList" />
<div class="columns"> <div class="columns">
<div class="column"> <div class="column">
<p <p class="heading mb-5" v-text="$t('page.artists.filter')" />
class="heading"
style="margin-bottom: 24px"
v-text="$t('page.artists.filter')"
/>
<div class="field"> <div class="field">
<div class="control"> <div class="control">
<input <input
@ -45,11 +41,7 @@
</div> </div>
</div> </div>
<div class="column"> <div class="column">
<p <p class="heading mb-5" v-text="$t('page.artists.sort-by.title')" />
class="heading"
style="margin-bottom: 24px"
v-text="$t('page.artists.sort-by.title')"
/>
<dropdown-menu <dropdown-menu
v-model="selected_groupby_option_id" v-model="selected_groupby_option_id"
:options="groupby_options" :options="groupby_options"

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

@ -5,11 +5,7 @@
<index-button-list :index="tracks.indexList" /> <index-button-list :index="tracks.indexList" />
<div class="columns"> <div class="columns">
<div class="column"> <div class="column">
<p <p class="heading mb-5" v-text="$t('page.artist.sort-by.title')" />
class="heading"
style="margin-bottom: 24px"
v-text="$t('page.artist.sort-by.title')"
/>
<dropdown-menu <dropdown-menu
v-model="selected_groupby_option_id" v-model="selected_groupby_option_id"
:options="groupby_options" :options="groupby_options"

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

@ -5,11 +5,7 @@
<index-button-list :index="tracks.indexList" /> <index-button-list :index="tracks.indexList" />
<div class="columns"> <div class="columns">
<div class="column"> <div class="column">
<p <p class="heading mb-5" v-text="$t('page.genre.sort-by.title')" />
class="heading"
style="margin-bottom: 24px"
v-text="$t('page.genre.sort-by.title')"
/>
<dropdown-menu <dropdown-menu
v-model="selected_groupby_option_id" v-model="selected_groupby_option_id"
:options="groupby_options" :options="groupby_options"

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

@ -23,7 +23,7 @@
</p> </p>
</div> </div>
</form> </form>
<div class="tags" style="margin-top: 16px"> <div class="tags mt-4">
<a <a
v-for="recent_search in recent_searches" v-for="recent_search in recent_searches"
:key="recent_search" :key="recent_search"

5
web-src/src/pages/SettingsPageOnlineServices.vue
View File

@ -47,10 +47,7 @@
<span v-text="$t('page.settings.services.spotify.scopes')" /> <span v-text="$t('page.settings.services.spotify.scopes')" />
<code v-text="spotify_required_scope.join(', ')" /> <code v-text="spotify_required_scope.join(', ')" />
</p> </p>
<div <div v-if="spotify.webapi_token_valid" class="field mt-5">
v-if="spotify.webapi_token_valid"
class="field mt-5"
>
<div class="control"> <div class="control">
<a <a
class="button is-danger" class="button is-danger"

2
web-src/src/pages/SettingsPageRemotesOutputs.vue
View File

@ -57,7 +57,7 @@
<input <input
v-model="output.selected" v-model="output.selected"
type="checkbox" type="checkbox"
style="margin-right: 5px" class="mr-2"
@change="output_toggle(output.id)" @change="output_toggle(output.id)"
/> />
<span v-text="output.name" /> <span v-text="output.name" />

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

@ -21,7 +21,7 @@
</p> </p>
</div> </div>
</form> </form>
<div class="tags" style="margin-top: 16px"> <div class="tags mt-4">
<a <a
v-for="recent_search in recent_searches" v-for="recent_search in recent_searches"
:key="recent_search" :key="recent_search"

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

@ -6,10 +6,7 @@
<section v-if="$slots['options']"> <section v-if="$slots['options']">
<div ref="options_ref" style="height: 1px" /> <div ref="options_ref" style="height: 1px" />
<slot name="options" /> <slot name="options" />
<nav <nav class="buttons is-centered mt-4 mb-2">
class="buttons is-centered"
style="margin-bottom: 6px; margin-top: 16px"
>
<a <a
v-if="!options_visible" v-if="!options_visible"
class="button is-small is-white" class="button is-small is-white"
@ -42,7 +39,7 @@
</div> </div>
</nav> </nav>
<slot name="content" /> <slot name="content" />
<div style="margin-top: 16px"> <div class="mt-4">
<slot name="footer" /> <slot name="footer" />
</div> </div>
</div> </div>

2
web-src/src/templates/ContentWithHero.vue
View File

@ -4,7 +4,7 @@
<div class="container"> <div class="container">
<div class="columns is-centered"> <div class="columns is-centered">
<div class="column is-four-fifths"> <div class="column is-four-fifths">
<div class="columns" style="flex-direction: row-reverse"> <div class="columns is-flex-direction-row-reverse">
<div class="column fd-has-cover"> <div class="column fd-has-cover">
<!-- Slot heading right --> <!-- Slot heading right -->
<slot name="heading-right" /> <slot name="heading-right" />