MyFavMirrors/owntone-server
1
0
Fork 0
mirror of https://github.com/owntone/owntone-server.git synced 2025-01-26 14:13:18 -05:00
Code Issues Packages Projects Releases Wiki Activity

[web-src] Add spacing in touch top menu to fix scrolling issue in iOS

Browse Source
This commit is contained in:
chme 2020-05-03 06:59:42 +02:00
parent 341acca184
commit 691fff20bf
3 changed files with 21 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -68,11 +68,11 @@
</div>
<!-- Outputs: master volume -->
<hr class="navbar-divider">
<hr class="fd-navbar-divider">
<navbar-item-output v-for="output in outputs" :key="output.id" :output="output"></navbar-item-output>
<!-- Outputs: stream volume -->
<hr class="navbar-divider">
<hr class="fd-navbar-divider">
<div class="navbar-item">
<div class="level is-mobile">
<div class="level-left fd-expanded">
@ -98,7 +98,7 @@
</div>
<!-- Playback controls -->
<hr class="navbar-divider">
<hr class="fd-navbar-divider">
<div class="navbar-item">
<div class="level is-mobile fd-expanded">
<div class="level-item">
@ -128,7 +128,7 @@
</div>
</div>
<hr style="margin: 12px 0;">
<hr class="fd-navbar-divider">
<!-- Outputs: master volume -->
<div class="navbar-item">
@ -160,7 +160,7 @@
<navbar-item-output v-for="output in outputs" :key="output.id" :output="output"></navbar-item-output>
<!-- Outputs: stream volume -->
<hr class="navbar-divider">
<hr class="fd-navbar-divider">
<div class="navbar-item fd-has-margin-bottom">
<div class="level is-mobile">
<div class="level-left fd-expanded">

15
web-src/src/components/NavbarTop.vue
View File

@ -46,20 +46,23 @@
<navbar-item-link to="/playlists"><span class="icon"><i class="mdi mdi-library-music"></i></span> <b>Playlists</b></navbar-item-link>
<navbar-item-link to="/music" exact><span class="icon"><i class="mdi mdi-music"></i></span> <b>Music</b></navbar-item-link>
<navbar-item-link to="/music/artists"><span style="padding-left: 1.5rem;">Artists</span></navbar-item-link>
<navbar-item-link to="/music/albums"><span style="padding-left: 1.5rem;">Albums</span></navbar-item-link>
<navbar-item-link to="/music/genres"><span style="padding-left: 1.5rem;">Genres</span></navbar-item-link>
<navbar-item-link to="/music/spotify" v-if="spotify_enabled"><span style="padding-left: 1.5rem;">Spotify</span></navbar-item-link>
<navbar-item-link to="/music/artists"><span class="fd-navbar-item-level2">Artists</span></navbar-item-link>
<navbar-item-link to="/music/albums"><span class="fd-navbar-item-level2">Albums</span></navbar-item-link>
<navbar-item-link to="/music/genres"><span class="fd-navbar-item-level2">Genres</span></navbar-item-link>
<navbar-item-link to="/music/spotify" v-if="spotify_enabled"><span class="fd-navbar-item-level2">Spotify</span></navbar-item-link>
<navbar-item-link to="/podcasts"><span class="icon"><i class="mdi mdi-microphone"></i></span> <b>Podcasts</b></navbar-item-link>
<navbar-item-link to="/audiobooks"><span class="icon"><i class="mdi mdi-book-open-variant"></i></span> <b>Audiobooks</b></navbar-item-link>
<navbar-item-link to="/files"><span class="icon"><i class="mdi mdi-folder-open"></i></span> <b>Files</b></navbar-item-link>
<navbar-item-link to="/search"><span class="icon"><i class="mdi mdi-magnify"></i></span> <b>Search</b></navbar-item-link>
<hr style="margin: 12px 0;">
<hr class="fd-navbar-divider">
<a class="navbar-item" href="/admin.html">Admin</a>
<hr style="margin: 12px 0;">
<hr class="fd-navbar-divider">
<navbar-item-link to="/settings/webinterface">Settings</navbar-item-link>
<navbar-item-link to="/about">About</navbar-item-link>
<div class="navbar-item is-hidden-desktop" style="margin-bottom: 2.5rem;"></div>
</div>
</div>
</div>

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

@ -227,6 +227,13 @@ section.fd-tabs-section + section.fd-content {
background-color: hsl(0, 0%, 96%)
}
.navbar-item .fd-navbar-item-level2 {
padding-left: 1.5rem;
}
hr.fd-navbar-divider {
margin: 12px 0;
}
/* Show scrollbar for navbar menu in desktop mode if content exceeds the screen size */
@media only screen and (min-width: 1024px) {
.navbar-dropdown {