From f1f0d9cd0d4b8098a9204a9de7061e5a5349ce47 Mon Sep 17 00:00:00 2001 From: thatmattlove Date: Fri, 15 Oct 2021 15:02:50 -0700 Subject: [PATCH] Fixes #7495: Fix sidenav overlapping elements --- docs/release-notes/version-3.0.md | 1 + netbox/project-static/dist/netbox-dark.css | Bin 788267 -> 788707 bytes netbox/project-static/dist/netbox-light.css | Bin 493227 -> 493565 bytes netbox/project-static/dist/netbox-print.css | Bin 1622455 -> 1623301 bytes netbox/project-static/dist/netbox.js | Bin 322556 -> 322534 bytes netbox/project-static/dist/netbox.js.map | Bin 310813 -> 310793 bytes netbox/project-static/src/sidenav.ts | 6 ++-- netbox/project-static/styles/sidenav.scss | 30 ++++++++++++++++++-- 8 files changed, 30 insertions(+), 7 deletions(-) diff --git a/docs/release-notes/version-3.0.md b/docs/release-notes/version-3.0.md index b49eb15ae..82770e856 100644 --- a/docs/release-notes/version-3.0.md +++ b/docs/release-notes/version-3.0.md @@ -4,6 +4,7 @@ ### Bug Fixes +* [#7495](https://github.com/netbox-community/netbox/issues/7495) - Fix navigation UI issue that caused improper element overlap * [#7529](https://github.com/netbox-community/netbox/issues/7529) - Restore horizontal scrolling for tables in narrow viewports * [#7534](https://github.com/netbox-community/netbox/issues/7534) - Avoid exception when utilizing "create and add another" twice in succession * [#7544](https://github.com/netbox-community/netbox/issues/7544) - Fix multi-value filtering of custom field objects diff --git a/netbox/project-static/dist/netbox-dark.css b/netbox/project-static/dist/netbox-dark.css index 48745de125ca9d55e5264e8424d5c1a17c8fba0d..4a6912458cc957244337335aac5de2cb0470ca60 100644 GIT binary patch delta 327 zcmZ48XYhEUK|>2;3sVbo3rh=Y3tJ0&3&$4D3E9&R%CL(}_ddYQKfS+$Q+fLRJWiqM zADTE>r}H;*vQ4)*z^#Ok*nTvd^EK0Sp5JUz(>c9Zd8hA?VV6}kG{`MhNKGtG)y>S) z%`YvnE-6aPE6yy*%+J$JNzF;Dw9+#yp6*!4sXJY+fKza~cLgiYbUAZQw(UImoRK2a z&7ZR=PZwz7)Pmc~I(>Hor|I&byPg;n5Auqw?fPQ~ITpra>$6a$;3w7tHCGlF$`P&vC0C(Inf V$&7ZY?E+n#K+LsWpo?3&763E?Z^{4w delta 122 zcmV-=0EPeKkua-{Fo1*sgaU*Egam{Iga(8Mgb1_=kZYF^p9>_H5N!z&w@PdY>jIZi zN(nKSkZ=hYx7%+CY!sI-fe94@EipBh(0B(Xm%xDu5|Wc}7>Wd1u>Wd5cd>*+hJ^%m! diff --git a/netbox/project-static/dist/netbox-light.css b/netbox/project-static/dist/netbox-light.css index 6ca1d7884d19cf22c2390e609cc385b786f53998..2c5aa81f04fc95fb043f2fe60980ed77e0c7c1b3 100644 GIT binary patch delta 305 zcmZ48EBCiwuAzmog{g(Pg=GtC+`j37Wh`RTuN-ETnEq!UD?f8`e%|zl8q5eGj_GIi zv5HLR?_*`#-o1~Nm1%lm8jIBQSuhujTE_Zc)L1J=dNu`y6^<>3fVHLQ2R;78x zsaPBUbm8=gXMi^3oo5x;-g|-d0JC&KKE#byML;)}WR|5`!%Q`7PrSmqJ@E>g*Cqgj Cymcx7 delta 120 zcmV-;0Ehqmj~=Uy9)N@agaU*Egaot&UcR@%z6CM@3}k6@aBN|DI&N=nWtV}z1rwKG z!UYMpc)#9m)ph#3YRO=1sb>f a(FL3Xlj0N=mr&LPB!}451-IDM1|_oDmM?z* diff --git a/netbox/project-static/dist/netbox-print.css b/netbox/project-static/dist/netbox-print.css index a159c81ec9a89b19b6db58d0ced00165e28fdcbe..741f7ea7431acdaa8bc82267f975768d3aae91c4 100644 GIT binary patch delta 545 zcmZvYO-lk{5XZ4v+g@CC$I1jliVhLRda#2+ht5&aCvdYR1aqTZ4`!gyRM4d@!NEgs z6wwP=kg!o+x^?sm)Hevab*ml|OUT0?o*DlCnR$NZdURtunneq?U@NvEhgNJy9y_oT zyRaK=D4-o3=tQvu_bIyb*j@BwfS-IB;K{fIj%Kc5Fuw}!-)e*$1?VJW4Q#Y?3Y;ZP zyM|?uDh3Svn1tJ}M2s}lm+%~%O*uBF6X-V@bvZnZB3BQ`u!}^Mx&|-Q_ zP52j-xSR@&1vEPTviH)_Ch%q@123aAeFj2K8nRO46vTW99Q1WjTkfULBHLoiHeQ>P zL~H(}(OLaNz1t))K@+!Z-p^2GJ*>WXlJ>z$*++(8{G1V~m%;i0e~w^n=34=TYQRgr zW9a{HtM&i9lWBEXj>hyqU1=Z_N+vX=2`a`iC-=MRR6O*410ISL ifiwGx;1p;s*e&KCz`HeD1|}C%4^uBwpE+B0FLK{0-^uO( delta 195 zcmZqeO5Wa_+|a_vzBG4k(BD6(#N9FYB z58|TJKU4|}PUo!_R+^S0%rV`dN?2e!kk`jL-Fd69!t{i4VXo;0&B8s~*EI?UYD-v` z6eZ>rr{x#rT7g+Pi6yBTx`w9H8$|iVrx$Dn8nX&$j6;<$|8}3X!Z#VG8|)C~+HSv5 l*nn^Pr8I7l>8C%6i?+|-FAT&YKn!Aw0kQb@`THf(SOL%mM=JmT diff --git a/netbox/project-static/dist/netbox.js b/netbox/project-static/dist/netbox.js index cc12e4855709dd686515e62961911c0a21a59033..6a60ff56def395459f1244adc618e97ed9a518a2 100644 GIT binary patch delta 28 kcmex!UHI8`;f5B*7N!>FEiC8nP5*e6MQ^+CeU_Iz0L$tPUjP6A delta 51 zcmaEMUHH#+;f5B*7N!>FEiC8n2^6Q6gk#=DVEdnY HEU$O~J*E{q diff --git a/netbox/project-static/dist/netbox.js.map b/netbox/project-static/dist/netbox.js.map index a67c6cbd814471217b565895629019f22877c9f2..ba7d8cd2f7dca3b93a9f961f1393011110461af4 100644 GIT binary patch delta 46 zcmV+}0MY-Q{1S=$5`csOgaU*Ev;<$cmu|QO90E^Nw~@F65di}^Q)rh@y95@uySW5n E1gd-y0{{R3 delta 60 zcmeDDBQ*DqP(ur23sVd87MA!OeBq9c;X0m { - this.bodyRemove('hide'); - this.bodyAdd('hidden'); - }, 300); + this.bodyRemove('hide'); + this.bodyAdd('hidden'); } } diff --git a/netbox/project-static/styles/sidenav.scss b/netbox/project-static/styles/sidenav.scss index ffc366c16..9dfdd855a 100644 --- a/netbox/project-static/styles/sidenav.scss +++ b/netbox/project-static/styles/sidenav.scss @@ -105,6 +105,11 @@ // Navbar brand .sidenav-brand { margin-right: 0; + transition: opacity 0.1s ease-in-out; + } + + .sidenav-brand-icon { + transition: opacity 0.1s ease-in-out; } .sidenav-inner { @@ -141,7 +146,17 @@ } .sidenav-toggle { - display: none; + // The sidenav toggle's default state is "hidden". Because modifying the `display` property + // isn't ideal for smooth transitions, combine opacity 0 (transparent) and position absolute + // to yield a similar result. + position: absolute; + display: inline-block; + opacity: 0; + // The transition itself is largely irrelevant, but CSS needs *something* to transition in + // order to apply a delay. + transition: opacity 10ms ease-in-out; + // Offset the transition delay so the icon isn't visible during the logo transition. + transition-delay: 0.1s; } .sidenav-collapse { @@ -350,13 +365,21 @@ .sidenav-brand { position: absolute; opacity: 0; - transform: translateX(-150%); } .sidenav-brand-icon { opacity: 1; } + .sidenav-toggle { + // Immediately hide the toggle when the sidenav is closed, so it doesn't linger and overlap + // with the logo elements. + opacity: 0; + position: absolute; + transition: unset; + transition-delay: 0ms; + } + .navbar-nav > .nav-item { > .nav-link { &:after { @@ -402,7 +425,8 @@ @include media-breakpoint-up(lg) { .sidenav-toggle { - display: inline-block; + position: relative; + opacity: 1; } } }