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

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

@ -1,8 +1,8 @@
<template>
<div class="navbar-item">
<div class="level is-mobile">
<div class="level-left fd-expanded">
<div class="level-item" style="flex-grow: 0">
<div class="level-left is-flex-grow-1">
<div class="level-item is-flex-grow-0">
<a class="button is-white is-small">
<span
class="icon is-clickable"
@ -12,8 +12,8 @@
/></span>
</a>
</div>
<div class="level-item fd-expanded">
<div class="fd-expanded">
<div class="level-item">
<div class="is-flex-grow-1">
<p
class="heading"
: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;
}
.fd-expanded {
flex-grow: 1;
flex-shrink: 1;
}
.fd-is-not-allowed {
cursor: not-allowed;
}