diff --git a/public/css/grocy.css b/public/css/grocy.css index c87669bb..5edda896 100755 --- a/public/css/grocy.css +++ b/public/css/grocy.css @@ -21,13 +21,9 @@ a.discrete-link { transition: all 0.3s !important; } -a.discrete-link:hover { - color: #337ab7 !important; - text-decoration: none !important; -} - +a.discrete-link:hover, a.discrete-link:focus { - color: #ab2230 !important; + color: #337ab7 !important; text-decoration: none !important; } diff --git a/public/css/grocy_menu_layout.css b/public/css/grocy_menu_layout.css index fae58d13..1d93c1fb 100644 --- a/public/css/grocy_menu_layout.css +++ b/public/css/grocy_menu_layout.css @@ -68,6 +68,9 @@ body.fixed-nav { #mainNav .navbar-collapse .navbar-nav>.nav-item.dropdown>.nav-link { position: relative; min-width: 45px; + max-width: 75%; + margin-left: auto; + margin-right: auto; } #mainNav .navbar-collapse .navbar-nav>.nav-item.dropdown>.nav-link:after { @@ -100,6 +103,14 @@ body.fixed-nav { width: 250px; } + .sidenav-toggled>#mainNav .navbar-brand { + width: 130px; + } + + #mainNav .navbar-collapse .navbar-nav>.nav-item.dropdown>.nav-link { + max-width: 100%; + } + #mainNav .navbar-collapse { overflow: visible; max-height: none; @@ -162,11 +173,26 @@ body.fixed-nav { } } +.navbar-nav, +.navbar-nav .dropdown-item { + text-align: center; +} + #mainNav.fixed-top .sidenav-toggler { display: none; } @media (min-width: 992px) { + + .navbar-nav, + .navbar-nav .dropdown-item { + text-align: left; + } + + .sidenav-toggled .navbar-nav { + text-align: center; + } + #mainNav.fixed-top .navbar-sidenav { height: calc(100vh - 112px); } @@ -306,7 +332,21 @@ body.sidenav-toggled .navbar-sidenav-tooltip.show { color: #adb5bd; } +#mainNav { + padding-left: 0.25rem; + padding-right: 0.25rem; +} + @media (min-width: 992px) { + #mainNav { + padding-left: 0.75rem; + padding-right: 0; + } + + .sidenav-toggled>#mainNav { + padding-left: 0.25rem; + } + #mainNav.navbar-dark .navbar-collapse .navbar-sidenav { background: #343a40; } @@ -426,21 +466,17 @@ body.sidenav-toggled .navbar-sidenav-tooltip.show { .navbar-sidenav>li:hover, .sidenav-second-level>li:hover, -.navbar-nav .dropdown-item:hover { +.navbar-nav .dropdown-item:hover, +.navbar-sidenav>li>a:focus, +.sidenav-second-level>li>a:focus, +.navbar-nav .dropdown-item:focus, +.active-page { box-shadow: inset 5px 0 0 #337ab7 !important; background-color: #d6d6d6 !important; } -.navbar-sidenav>li>a:focus, -.sidenav-second-level>li>a:focus, -.navbar-nav .dropdown-item:focus { - box-shadow: inset 5px 0 0 #ab2230 !important; - background-color: #d6d6d6 !important; -} - .active-page { - box-shadow: inset 5px 0 0 #ab2230 !important; - background-color: #d6d6d6 !important; + color: #337ab7 !important; } .navbar-brand { diff --git a/public/js/grocy_menu_layout.js b/public/js/grocy_menu_layout.js index cabdbc5a..90eaba80 100644 --- a/public/js/grocy_menu_layout.js +++ b/public/js/grocy_menu_layout.js @@ -12,10 +12,12 @@ $("#sidenavToggler").click(function(e) if ($("body").hasClass("sidenav-toggled")) { window.localStorage.setItem("sidebar_state", "collapsed"); + $(".container-fluid").removeClass("pl-md-3"); } else { window.localStorage.setItem("sidebar_state", "expanded"); + $(".container-fluid").addClass("pl-md-3"); } }); diff --git a/views/layout/default.blade.php b/views/layout/default.blade.php index b1b7e0b4..9bcd35b0 100644 --- a/views/layout/default.blade.php +++ b/views/layout/default.blade.php @@ -662,7 +662,7 @@
{{ $__t('About Grocy') }} (Version {{ $version }}) + href="#"> {{ $__t('About Grocy') }}