MyFavMirrors/owntone-server
1
0
Fork 0
mirror of https://github.com/owntone/owntone-server.git synced 2025-04-24 12:30:38 -04:00
Code Issues Packages Projects Releases Wiki Activity

[web] Use default Bulma styles instead of custom ones

Browse Source 
In the context of sliders - specifically the volume control - Bulma styles have been used instead of custom styles for an easier maintainability.
This commit is contained in:
Alain Nussbaumer 2023-06-24 15:10:33 +02:00
parent 9180710953
commit 0ec390907d
5 changed files with 27 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
htdocs/assets/index.css
View File

File diff suppressed because one or more lines are too long

2
htdocs/assets/index.js
View File

File diff suppressed because one or more lines are too long

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

@ -9,7 +9,7 @@
role="navigation" role="navigation"
aria-label="player controls" aria-label="player controls"
> >
<div class="navbar-brand fd-expanded"> <div class="navbar-brand is-flex-grow-1">
<!-- Link to queue --> <!-- Link to queue -->
<navbar-item-link to="/" exact> <navbar-item-link to="/" exact>
<span class="icon"><mdicon name="playlist-play" size="24" /></span> <span class="icon"><mdicon name="playlist-play" size="24" /></span>
@ -99,8 +99,8 @@
<div class="navbar-item"> <div class="navbar-item">
<!-- Outputs: master volume --> <!-- Outputs: master volume -->
<div class="level is-mobile"> <div class="level is-mobile">
<div class="level-left fd-expanded"> <div class="level-left is-flex-grow-1">
<div class="level-item" style="flex-grow: 0"> <div class="level-item is-flex-grow-0">
<a <a
class="button is-white is-small" class="button is-white is-small"
@click="toggle_mute_volume" @click="toggle_mute_volume"
@ -112,8 +112,8 @@
/></span> /></span>
</a> </a>
</div> </div>
<div class="level-item fd-expanded"> <div class="level-item">
<div class="fd-expanded"> <div>
<p class="heading" v-text="$t('navigation.volume')" /> <p class="heading" v-text="$t('navigation.volume')" />
<input <input
v-model="player.volume" v-model="player.volume"
@ -139,8 +139,8 @@
<hr class="fd-navbar-divider" /> <hr class="fd-navbar-divider" />
<div class="navbar-item"> <div class="navbar-item">
<div class="level is-mobile"> <div class="level is-mobile">
<div class="level-left fd-expanded"> <div class="level-left is-flex-grow-1">
<div class="level-item" style="flex-grow: 0"> <div class="level-item is-flex-grow-0">
<a <a
class="button is-white is-small" class="button is-white is-small"
:class="{ 'is-loading': loading }" :class="{ 'is-loading': loading }"
@ -155,17 +155,14 @@
/></span> /></span>
</a> </a>
</div> </div>
<div class="level-item fd-expanded"> <div class="level-item">
<div class="fd-expanded"> <div class="is-flex-grow-1">
<p <p
class="heading" class="heading"
:class="{ 'has-text-grey-light': !playing }" :class="{ 'has-text-grey-light': !playing }"
> >
<span v-text="$t('navigation.stream')" /> <span v-text="$t('navigation.stream')" />
<a <a href="stream.mp3" class="ml-2" target="_blank"
href="stream.mp3"
style="margin-left: 5px"
target="_blank"
><span class="icon" ><span class="icon"
><mdicon ><mdicon
name="open-in-new" name="open-in-new"
@ -191,8 +188,8 @@
</div> </div>
<!-- Playback controls --> <!-- Playback controls -->
<hr class="fd-navbar-divider" /> <hr class="fd-navbar-divider" />
<div class="navbar-item"> <div class="navbar-item is-justify-content-center">
<div class="level is-mobile fd-expanded"> <div class="level">
<div class="level-item"> <div class="level-item">
<div class="buttons has-addons"> <div class="buttons has-addons">
<player-button-repeat class="button" /> <player-button-repeat class="button" />
@ -224,8 +221,8 @@
<!-- Outputs: master volume --> <!-- Outputs: master volume -->
<div class="navbar-item"> <div class="navbar-item">
<div class="level is-mobile"> <div class="level is-mobile">
<div class="level-left fd-expanded"> <div class="level-left is-flex-grow-1">
<div class="level-item" style="flex-grow: 0"> <div class="level-item is-flex-grow-0">
<a class="button is-white is-small" @click="toggle_mute_volume"> <a class="button is-white is-small" @click="toggle_mute_volume">
<span class="icon" <span class="icon"
><mdicon ><mdicon
@ -234,8 +231,8 @@
/></span> /></span>
</a> </a>
</div> </div>
<div class="level-item fd-expanded"> <div class="level-item">
<div class="fd-expanded"> <div class="is-flex-grow-1">
<p class="heading" v-text="$t('navigation.volume')" /> <p class="heading" v-text="$t('navigation.volume')" />
<input <input
v-model="player.volume" v-model="player.volume"
@ -260,8 +257,8 @@
<hr class="fd-navbar-divider" /> <hr class="fd-navbar-divider" />
<div class="navbar-item mb-5"> <div class="navbar-item mb-5">
<div class="level is-mobile"> <div class="level is-mobile">
<div class="level-left fd-expanded"> <div class="level-left is-flex-grow-1">
<div class="level-item" style="flex-grow: 0"> <div class="level-item is-flex-grow-0">
<a <a
class="button is-white is-small" class="button is-white is-small"
:class="{ 'is-loading': loading }" :class="{ 'is-loading': loading }"
@ -277,17 +274,14 @@
</span> </span>
</a> </a>
</div> </div>
<div class="level-item fd-expanded"> <div class="level-item">
<div class="fd-expanded"> <div class="is-flex-grow-1">
<p <p
class="heading" class="heading"
:class="{ 'has-text-grey-light': !playing }" :class="{ 'has-text-grey-light': !playing }"
> >
<span v-text="$t('navigation.stream')" /> <span v-text="$t('navigation.stream')" />
<a <a href="stream.mp3" class="ml-2" target="_blank"
href="stream.mp3"
style="margin-left: 5px"
target="_blank"
><span class="icon" ><span class="icon"
><mdicon ><mdicon
name="open-in-new" name="open-in-new"

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

@ -1,8 +1,8 @@
<template> <template>
<div class="navbar-item"> <div class="navbar-item">
<div class="level is-mobile"> <div class="level is-mobile">
<div class="level-left fd-expanded"> <div class="level-left is-flex-grow-1">
<div class="level-item" style="flex-grow: 0"> <div class="level-item is-flex-grow-0">
<a class="button is-white is-small"> <a class="button is-white is-small">
<span <span
class="icon is-clickable" class="icon is-clickable"
@ -12,8 +12,8 @@
/></span> /></span>
</a> </a>
</div> </div>
<div class="level-item fd-expanded"> <div class="level-item">
<div class="fd-expanded"> <div class="is-flex-grow-1">
<p <p
class="heading" class="heading"
:class="{ 'has-text-grey-light': !output.selected }" :class="{ 'has-text-grey-light': !output.selected }"

5
web-src/src/mystyles.scss
View File

@ -23,11 +23,6 @@ a.navbar-item {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
} }
.fd-expanded {
flex-grow: 1;
flex-shrink: 1;
}
.fd-is-not-allowed { .fd-is-not-allowed {
cursor: not-allowed; cursor: not-allowed;
} }