MyFavMirrors/owntone-server
1
0
Fork 0
mirror of https://github.com/owntone/owntone-server.git synced 2025-04-04 03:40:36 -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">
<!-- Link to queue -->
<navbar-item-link to="/" exact>
<navbar-item-link to="/" exact class="mr-auto">
<mdicon class="icon" name="playlist-play" size="24" />
</navbar-item-link>
<!-- Now playing artist/title (not visible on "now playing" page) -->
@ -39,7 +39,7 @@
<!-- Skip previous (not visible on "now playing" page) -->
<player-button-previous
v-if="is_now_playing_page"
class="navbar-item ml-auto"
class="navbar-item"
:icon_size="24"
/>
<player-button-seek-back
@ -68,40 +68,27 @@
/>
<!-- Player menu button (only visible on mobile and tablet) -->
<a
class="navbar-item ml-auto is-hidden-desktop"
class="navbar-item ml-auto px-4"
@click="show_player_menu = !show_player_menu"
>
<mdicon
class="icon"
:name="show_player_menu ? 'chevron-down' : 'chevron-up'"
size="18"
/>
</a>
</div>
<!-- Player menu dropup menu (only visible on desktop) -->
<div
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"
@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-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"
>
<a class="button is-white is-small" @click="toggle_mute_volume">
<span class="icon"
><mdicon
:name="player.volume > 0 ? 'volume-high' : 'volume-off'"
@ -187,7 +174,6 @@
</div>
</div>
</div>
</div>
<!-- Player menu (only visible on mobile and tablet) -->
<div
class="navbar-menu is-hidden-desktop"
@ -197,10 +183,10 @@
<div class="navbar-end">
<!-- Repeat/shuffle/consume -->
<div class="navbar-item">
<div class="buttons is-centered">
<player-button-repeat class="button" :icon_size="18" />
<player-button-shuffle class="button" :icon_size="18" />
<player-button-consume class="button" :icon_size="18" />
<div class="buttons has-addons is-centered">
<player-button-repeat class="button" />
<player-button-shuffle class="button" />
<player-button-consume class="button" />
</div>
</div>
<hr class="my-3" />
@ -230,6 +216,7 @@
</div>
</div>
</div>
<hr class="my-3" />
<!-- Outputs: speaker volumes -->
<navbar-item-output
v-for="output in outputs"

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

@ -18,9 +18,7 @@
}
a.navbar-item {
outline: 0;
line-height: 1.5;
padding: 0.5rem 1rem;
padding: 0 1rem;
}
.fd-is-not-allowed {
@ -150,9 +148,6 @@ a.navbar-item {
}
/* 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 {
margin-top: -1.3rem !important;
}