MyFavMirrors
/
owntone-server
mirror of https://github.com/owntone/owntone-server.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[web] Fix the centering of the player buttons 

The buttons of the player are not centered.
This commit is contained in:
Alain Nussbaumer 2023-07-07 13:24:43 +02:00
parent 6c3e74d159
commit 332a57040e
4 changed files with 112 additions and 130 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

34
htdocs/assets/index.js
View File

File diff suppressed because one or more lines are too long

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

@ -11,7 +11,7 @@
> >
<div class="navbar-brand is-flex-grow-1"> <div class="navbar-brand is-flex-grow-1">
<!-- Link to queue --> <!-- Link to queue -->
<navbar-item-link to="/" exact> <navbar-item-link to="/" exact class="mr-auto">
<mdicon class="icon" name="playlist-play" size="24" /> <mdicon class="icon" name="playlist-play" size="24" />
</navbar-item-link> </navbar-item-link>
<!-- Now playing artist/title (not visible on "now playing" page) --> <!-- Now playing artist/title (not visible on "now playing" page) -->
@ -39,7 +39,7 @@
<!-- Skip previous (not visible on "now playing" page) --> <!-- Skip previous (not visible on "now playing" page) -->
<player-button-previous <player-button-previous
v-if="is_now_playing_page" v-if="is_now_playing_page"
class="navbar-item ml-auto" class="navbar-item"
:icon_size="24" :icon_size="24"
/> />
<player-button-seek-back <player-button-seek-back
@ -68,124 +68,110 @@
/> />
<!-- Player menu button (only visible on mobile and tablet) --> <!-- Player menu button (only visible on mobile and tablet) -->
<a <a
class="navbar-item ml-auto is-hidden-desktop" class="navbar-item ml-auto px-4"
@click="show_player_menu = !show_player_menu" @click="show_player_menu = !show_player_menu"
> >
<mdicon <mdicon
class="icon" class="icon"
:name="show_player_menu ? 'chevron-down' : 'chevron-up'" :name="show_player_menu ? 'chevron-down' : 'chevron-up'"
size="18"
/> />
</a> </a>
<!-- Player menu dropup menu (only visible on desktop) --> </div>
<div <!-- Player menu dropup menu (only visible on desktop) -->
class="navbar-item has-dropdown has-dropdown-up ml-auto is-hidden-touch" <div
:class="{ 'is-active': show_player_menu }" class="navbar-item has-dropdown has-dropdown-up ml-auto is-hidden-touch"
> :class="{ 'is-active': show_player_menu }"
<a >
class="navbar-link is-arrowless" <div class="navbar-dropdown is-right">
@click="show_player_menu = !show_player_menu" <div class="navbar-item">
>
<mdicon
class="icon"
:name="show_player_menu ? 'chevron-down' : 'chevron-up'"
size="18"
/>
</a>
<div class="navbar-dropdown is-right">
<div class="navbar-item">
<!-- Outputs: master volume -->
<div class="level is-mobile">
<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
:name="player.volume > 0 ? 'volume-high' : 'volume-off'"
size="18"
/></span>
</a>
</div>
<div class="level-item">
<div>
<p class="heading" v-text="$t('navigation.volume')" />
<control-slider
v-model:value="player.volume"
:max="100"
@change="change_volume"
/>
</div>
</div>
</div>
</div>
</div>
<!-- Outputs: master volume --> <!-- Outputs: master volume -->
<hr class="my-3" /> <div class="level is-mobile">
<navbar-item-output <div class="level-left is-flex-grow-1">
v-for="output in outputs" <div class="level-item is-flex-grow-0">
:key="output.id" <a class="button is-white is-small" @click="toggle_mute_volume">
:output="output" <span class="icon"
/> ><mdicon
<!-- Outputs: stream volume --> :name="player.volume > 0 ? 'volume-high' : 'volume-off'"
<hr class="my-3" /> size="18"
<div class="navbar-item"> /></span>
<div class="level is-mobile"> </a>
<div class="level-left is-flex-grow-1"> </div>
<div class="level-item is-flex-grow-0"> <div class="level-item">
<a <div>
class="button is-clickable is-white is-small" <p class="heading" v-text="$t('navigation.volume')" />
:class="{ <control-slider
'has-text-grey-light': !playing && !loading, v-model:value="player.volume"
'is-loading': loading :max="100"
}" @change="change_volume"
@click="togglePlay" />
><mdicon class="icon" name="broadcast" size="18" />
</a>
</div>
<div class="level-item">
<div class="is-flex-grow-1">
<div
class="is-flex is-align-content-center"
:class="{ 'has-text-grey-light': !playing }"
>
<p class="heading" v-text="$t('navigation.stream')" />
<a href="stream.mp3" class="heading ml-2" target="_blank"
><mdicon
class="icon is-small"
name="open-in-new"
size="16"
/>
</a>
</div>
<control-slider
v-model:value="stream_volume"
:disabled="!playing"
:max="100"
:cursor="cursor"
@change="change_stream_volume"
/>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- Playback controls --> </div>
<hr class="my-3" /> <!-- Outputs: master volume -->
<div class="navbar-item is-justify-content-center"> <hr class="my-3" />
<div class="level"> <navbar-item-output
v-for="output in outputs"
:key="output.id"
:output="output"
/>
<!-- Outputs: stream volume -->
<hr class="my-3" />
<div class="navbar-item">
<div class="level is-mobile">
<div class="level-left is-flex-grow-1">
<div class="level-item is-flex-grow-0">
<a
class="button is-clickable is-white is-small"
:class="{
'has-text-grey-light': !playing && !loading,
'is-loading': loading
}"
@click="togglePlay"
><mdicon class="icon" name="broadcast" size="18" />
</a>
</div>
<div class="level-item"> <div class="level-item">
<div class="buttons has-addons"> <div class="is-flex-grow-1">
<player-button-repeat class="button" /> <div
<player-button-shuffle class="button" /> class="is-flex is-align-content-center"
<player-button-consume class="button" /> :class="{ 'has-text-grey-light': !playing }"
>
<p class="heading" v-text="$t('navigation.stream')" />
<a href="stream.mp3" class="heading ml-2" target="_blank"
><mdicon
class="icon is-small"
name="open-in-new"
size="16"
/>
</a>
</div>
<control-slider
v-model:value="stream_volume"
:disabled="!playing"
:max="100"
:cursor="cursor"
@change="change_stream_volume"
/>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- Playback controls -->
<hr class="my-3" />
<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" />
<player-button-shuffle class="button" />
<player-button-consume class="button" />
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
<!-- Player menu (only visible on mobile and tablet) --> <!-- Player menu (only visible on mobile and tablet) -->
@ -197,10 +183,10 @@
<div class="navbar-end"> <div class="navbar-end">
<!-- Repeat/shuffle/consume --> <!-- Repeat/shuffle/consume -->
<div class="navbar-item"> <div class="navbar-item">
<div class="buttons is-centered"> <div class="buttons has-addons is-centered">
<player-button-repeat class="button" :icon_size="18" /> <player-button-repeat class="button" />
<player-button-shuffle class="button" :icon_size="18" /> <player-button-shuffle class="button" />
<player-button-consume class="button" :icon_size="18" /> <player-button-consume class="button" />
</div> </div>
</div> </div>
<hr class="my-3" /> <hr class="my-3" />
@ -230,6 +216,7 @@
</div> </div>
</div> </div>
</div> </div>
<hr class="my-3" />
<!-- Outputs: speaker volumes --> <!-- Outputs: speaker volumes -->
<navbar-item-output <navbar-item-output
v-for="output in outputs" v-for="output in outputs"

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

@ -18,9 +18,7 @@
} }
a.navbar-item { a.navbar-item {
outline: 0; padding: 0 1rem;
line-height: 1.5;
padding: 0.5rem 1rem;
} }
.fd-is-not-allowed { .fd-is-not-allowed {
@ -150,9 +148,6 @@ a.navbar-item {
} }
/* Add a little bit of spacing between title and subtitle */ /* Add a little bit of spacing between title and subtitle */
.title:not(.is-spaced) + .subtitle {
margin-top: -1.3rem !important;
}
.title:not(.is-spaced) + .subtitle + .subtitle { .title:not(.is-spaced) + .subtitle + .subtitle {
margin-top: -1.3rem !important; margin-top: -1.3rem !important;
} }