From fe54acef51d9e248e44a1d80208ccd9036a66633 Mon Sep 17 00:00:00 2001 From: Jeremy Stretch Date: Fri, 6 Aug 2021 17:43:02 -0400 Subject: [PATCH] v3.0 nav menu tweaks (#6906) * Clean up nav menu spacing & link colors * Shrink NetBox icon & collapsed sidebar * Fix gap between scrollbar and righthand window border --- netbox/project-static/dist/netbox-dark.css | Bin 806224 -> 806162 bytes netbox/project-static/dist/netbox-light.css | Bin 501086 -> 501024 bytes netbox/project-static/styles/netbox.scss | 2 +- netbox/project-static/styles/sidenav.scss | 34 +++++++++--------- netbox/project-static/styles/theme-base.scss | 5 ++- netbox/templates/base/sidenav.html | 2 +- netbox/templates/inc/profile_button.html | 6 ++-- .../templates/navigation/nav_items.html | 8 ++--- 8 files changed, 28 insertions(+), 29 deletions(-) diff --git a/netbox/project-static/dist/netbox-dark.css b/netbox/project-static/dist/netbox-dark.css index 6ef1beacb22b6cada9df3e09598e2ea8f122f80b..11e88124775e45861e7e2f1443faf4f1f861eede 100644 GIT binary patch delta 356 zcmcaG%W%>x!-f{d7N!>F7M2#)7Pc1l7LF~PuQC{or@zkN{LE-P`NBPo=>a*M?9=(O zIPXt?pT!vhlq<~R44?k4os(_*!fei8EV{bsMfs%#x*4g7DXB%(1&JvsnR)3}dPb&2 zsksVf(+)IE?vmUyM1W^CmW+UNI6s&vgXMj zMWm-UWwA<4KOn>=HoYL0m3MmoE>>-b{+=RE?de{foLtlA6mveA&KS%gJl(F9RRtnj zP{}Db{canl`1VI7oDW$hTRj$;ezTHu-gMzWR>A2XUUG9yzZ=BKF}=TvlW+R@Do*d| z6GONp&?L44CD<6*5>t{)lTxM!{^gcz|5D8f#9Z6IRCD*XavB3&u4$c{nK%93S8mDa PybhdV+jleaO!Wo;xnzOz delta 373 zcmbO<%kaW1!-f{d7N!>F7M2#)7Pc1l7LF~PuQC`-roYbM{LE-F`NBPo>HiBj*{Abm zao%S#GoSu8i!%f$ou9`UzIF7M3lnEqfS^r?>85y$Gbj_p+{-zI!V(=X9=ptePywMX9;d z9WJvfO#gSBm23Kf1FRg=H=JQ*-JZ9PwUt>kV;`JX9I7>d6oJq^Ey!VV0V%P{PbU zJ>W2F4D6jzVH~U<#hc^tnAx;jHkl%nolnhW0OD?yTE3aY;J0vGFeAnvi;pD*6r_3 Qv6(GrG~TXW#BOd304`~7qW}N^ delta 339 zcmZ2*O77k%xrP?T7N!>F7M3lnEqfSErnl~4y~t)#l$xtqJ3a3-tMv5py{sKfX6DoX z?`1Ut$`>ABHJx5?o|SET?mpHQ=IM@ySkJ^585^6Km{^zrwJGQsnL;UKQDca(b#7u& zdS;$(Nq&Kqo{@oxDFgyFz+{s0OG@%{ktC4zosznB55NWH7{Ib-d>imMllJo`6tmQ{6zl1NS?m(+n@+KA-*k%2Y&o-up6T|Nh3w|W05=PK!2kdN diff --git a/netbox/project-static/styles/netbox.scss b/netbox/project-static/styles/netbox.scss index 236d44f1b..82e836585 100644 --- a/netbox/project-static/styles/netbox.scss +++ b/netbox/project-static/styles/netbox.scss @@ -501,7 +501,7 @@ div.content-container { position: relative; display: flex; flex-direction: column; - width: calc(100% - 4.5rem); + width: calc(100% - 3rem); // $sidenav-width-closed min-height: 100vh; overflow-x: hidden; overflow-y: auto; diff --git a/netbox/project-static/styles/sidenav.scss b/netbox/project-static/styles/sidenav.scss index 0c7bbfb1e..25f9a886c 100644 --- a/netbox/project-static/styles/sidenav.scss +++ b/netbox/project-static/styles/sidenav.scss @@ -163,6 +163,12 @@ } } + .nav-group-header { + padding: $sidenav-link-spacing-y / 2 $sidenav-link-spacing-x; + margin-top: 0.5rem; + margin-bottom: 0; + } + // Child Link nav-item .nav .nav-item { display: flex; @@ -178,25 +184,15 @@ @include child-link() { width: 100%; - padding-top: $sidenav-link-spacing-y / 2.675; + padding-top: $sidenav-link-spacing-y / 2; padding-right: map.get($spacers, 1); - padding-bottom: $sidenav-link-spacing-y / 2.675; - /* stylelint-disable */ - padding-left: $sidenav-link-spacing-x + $sidenav-icon-width + $sidenav-link-spacing-x / 4; - /* stylelint-enable */ - margin-top: $sidenav-link-spacing-y / 3.3; - margin-bottom: $sidenav-link-spacing-y / 3.3; - font-size: $font-size-xs; + padding-bottom: $sidenav-link-spacing-y / 2; + padding-left: $sidenav-link-spacing-x; + margin-top: 0; + margin-bottom: 0; border-top-right-radius: $border-radius; border-bottom-right-radius: $border-radius; - .sidenav-normal { - color: $text-muted; - &:hover { - opacity: 0.8; - } - } - .sidenav-mini-icon { width: $sidenav-link-spacing-x; text-align: center; @@ -209,6 +205,7 @@ height: 100%; font-weight: $font-weight-bold; color: var(--nbx-sidenav-parent-color); + padding-left: $sidenav-link-spacing-x / 2; &.active { color: $accordion-button-active-color; @@ -273,7 +270,10 @@ &.active { position: relative; - color: var(--nbx-sidebar-link-hover-bg); + background-color: var(--nbx-sidebar-link-hover-bg); + } + + &:hover { background-color: var(--nbx-sidebar-link-hover-bg); } @@ -290,7 +290,7 @@ display: block; font-size: $font-size-xs; font-weight: $font-weight-bold; - color: $primary; + color: $secondary; text-transform: uppercase; white-space: nowrap; } diff --git a/netbox/project-static/styles/theme-base.scss b/netbox/project-static/styles/theme-base.scss index 9b7fa5c72..2357ec7eb 100644 --- a/netbox/project-static/styles/theme-base.scss +++ b/netbox/project-static/styles/theme-base.scss @@ -143,10 +143,9 @@ $sidebar-bottom-height: 4rem; $transition-100ms-ease-in-out: all 0.1s ease-in-out; // Sidebar/Sidenav -$sidenav-width-closed: 4rem; +$sidenav-width-closed: 3rem; $sidenav-width-open: 16rem; $sidenav-icon-width: 2rem; -$sidenav-link-px: 1rem; $sidenav-spacing-x: 1.5rem; $sidenav-link-spacing-x: 1rem; -$sidenav-link-spacing-y: 0.675rem; +$sidenav-link-spacing-y: 0.5rem; diff --git a/netbox/templates/base/sidenav.html b/netbox/templates/base/sidenav.html index b3fd5afea..0e1921754 100644 --- a/netbox/templates/base/sidenav.html +++ b/netbox/templates/base/sidenav.html @@ -13,7 +13,7 @@ {# Icon Logo #} - NetBox Logo + NetBox Logo {# Pin/Unpin Toggle #} diff --git a/netbox/templates/inc/profile_button.html b/netbox/templates/inc/profile_button.html index bec87f271..0c66cc203 100644 --- a/netbox/templates/inc/profile_button.html +++ b/netbox/templates/inc/profile_button.html @@ -1,10 +1,10 @@ {% if request.user.is_authenticated %} - +