MyFavMirrors/owntone-server
1
0
Fork 0
mirror of https://github.com/owntone/owntone-server.git synced 2025-04-05 04:10:34 -04:00
Code Issues Packages Projects Releases Wiki Activity

[web] Fix the centering of the player buttons

Browse Source 
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

33
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,40 +68,27 @@
/> />
<!-- 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>
</div>
<!-- Player menu dropup menu (only visible on desktop) --> <!-- Player menu dropup menu (only visible on desktop) -->
<div <div
class="navbar-item has-dropdown has-dropdown-up ml-auto is-hidden-touch" class="navbar-item has-dropdown has-dropdown-up ml-auto is-hidden-touch"
:class="{ 'is-active': show_player_menu }" :class="{ 'is-active': show_player_menu }"
> >
<a
class="navbar-link is-arrowless"
@click="show_player_menu = !show_player_menu"
>
<mdicon
class="icon"
:name="show_player_menu ? 'chevron-down' : 'chevron-up'"
size="18"
/>
</a>
<div class="navbar-dropdown is-right"> <div class="navbar-dropdown is-right">
<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 is-flex-grow-1"> <div class="level-left is-flex-grow-1">
<div class="level-item is-flex-grow-0"> <div class="level-item is-flex-grow-0">
<a <a class="button is-white is-small" @click="toggle_mute_volume">
class="button is-white is-small"
@click="toggle_mute_volume"
>
<span class="icon" <span class="icon"
><mdicon ><mdicon
:name="player.volume > 0 ? 'volume-high' : 'volume-off'" :name="player.volume > 0 ? 'volume-high' : 'volume-off'"
@ -187,7 +174,6 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<!-- Player menu (only visible on mobile and tablet) --> <!-- Player menu (only visible on mobile and tablet) -->
<div <div
class="navbar-menu is-hidden-desktop" class="navbar-menu is-hidden-desktop"
@ -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;
} }