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] 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>
<section>
<nav class="buttons is-centered fd-is-square" style="margin-bottom: 16px">
<nav class="buttons is-centered mb-4 fd-is-square">
<a
v-for="char in index"
:key="char"

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -23,7 +23,7 @@
</p>
</div>
</form>
<div class="tags" style="margin-top: 16px">
<div class="tags mt-4">
<a
v-for="recent_search in recent_searches"
: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')" />
<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 mt-5">
<div class="control">
<a
class="button is-danger"

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

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

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

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

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

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

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

@ -4,7 +4,7 @@
<div class="container">
<div class="columns is-centered">
<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">
<!-- Slot heading right -->
<slot name="heading-right" />