MyFavMirrors/owntone-server
1
0
Fork 0
mirror of https://github.com/owntone/owntone-server.git synced 2024-12-26 23:25:56 -05:00
Code Issues Packages Projects Releases Wiki Activity

[web-src] Fix missing scrollbars in navbar menus

Browse Source
This commit is contained in:
chme 2020-05-02 08:13:33 +02:00
parent c8a5826e0b
commit 4188a54e37
3 changed files with 17 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,5 @@
<template>
<nav class="navbar is-white is-fixed-bottom" :style="zindex" :class="{ 'is-transparent': is_now_playing_page, 'is-dark': !is_now_playing_page }" role="navigation" aria-label="player controls">
<nav class="fd-bottom-navbar navbar is-white is-fixed-bottom" :style="zindex" :class="{ 'is-transparent': is_now_playing_page, 'is-dark': !is_now_playing_page }" role="navigation" aria-label="player controls">
<div class="navbar-brand fd-expanded">
<!-- Link to queue -->
@ -115,8 +115,7 @@
</div>
<!-- Player menu (only visible on mobile and tablet) -->
<div class="navbar-menu is-hidden-desktop" style="max-height: calc(100vh - 3.25rem); overflow: scroll"
:class="{ 'is-active': show_player_menu }">
<div class="navbar-menu is-hidden-desktop" :class="{ 'is-active': show_player_menu }">
<div class="navbar-start">
</div>
<div class="navbar-end">

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

@ -1,5 +1,5 @@
<template>
<nav class="navbar is-light is-fixed-top" :style="zindex" role="navigation" aria-label="main navigation">
<nav class="fd-top-navbar navbar is-light is-fixed-top" :style="zindex" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<navbar-item-link to="/playlists">
<span class="icon"><i class="mdi mdi-library-music"></i></span>

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

@ -226,3 +226,17 @@ section.fd-tabs-section + section.fd-content {
.dropdown-item:hover {
background-color: hsl(0, 0%, 96%)
}
/* Show scrollbar for navbar menu in desktop mode if content exceeds the screen size */
@media only screen and (min-width: 1024px) {
.navbar-dropdown {
max-height: calc(100vh - 3.25rem - 3.25rem - 2rem);
overflow: auto;
}
}
/* Limit the size of the bottom navbar menu to not be displayed behind the Safari browser menu on iOS */
.fd-bottom-navbar .navbar-menu {
max-height: calc(100vh - 3.25rem - 3.25rem - 1rem);
overflow: scroll;
}