From 2d32aeb97289d19d6a83c7f926d7eb3e78e5a75d Mon Sep 17 00:00:00 2001 From: checktheroads Date: Mon, 26 Jul 2021 14:46:05 -0700 Subject: [PATCH 1/9] Migrate to collapsed sidebar layout --- netbox/project-static/dist/netbox-dark.css | Bin 712291 -> 715917 bytes netbox/project-static/dist/netbox-light.css | Bin 442787 -> 445645 bytes netbox/project-static/styles/netbox.scss | 178 ++++++++++++++++-- netbox/project-static/styles/theme-dark.scss | 6 +- netbox/templates/base/layout.html | 99 +++------- netbox/templates/base/profile_button.html | 93 +++++++++ netbox/templates/base/sidebar.html | 24 +++ .../templates/navigation/nav_items.html | 89 ++++----- .../utilities/templates/search/searchbar.html | 2 +- 9 files changed, 351 insertions(+), 140 deletions(-) create mode 100644 netbox/templates/base/profile_button.html create mode 100644 netbox/templates/base/sidebar.html diff --git a/netbox/project-static/dist/netbox-dark.css b/netbox/project-static/dist/netbox-dark.css index 98c5e443af9411b5f18079e25cc2afa4b1f38546..b591d585187fd29e1415becf0ccba8aa6a1da4a9 100644 GIT binary patch delta 2275 zcmb_eO>7%Q6jrEr?Mw*7>b;yZg#ER zjqP+BN>ES{RYS$1K8Ztng9=blDab)W6+aT(K;eK$TaY4793Z`MK&Z_652vydB5@eW zvwlDGzW2Rv=GV_h&##QWve340-@>+qz$e__M|mlAV2qB#wNlxp*7(fYi=$ z#|^V!k(`pHS|;nrF-gj2Ya3jk$&;Fc)0(bhk|&x@k~&qUNfECzH}lj=>t+ELWisQK zN_{`;J^taoUDHG}MBUHo2%@d2)F64cps7w)9v8i}KWmyU$` zP`!o(tbQCCeza*EJZUxq`xSYwm7LV?27C@G3Rn|Qq_CrY8 z-ON}J+0n7C87E!uYDw5WW7yPD9E%vX=4hrNr%c_n1j&Yh2ZM*CO+uti!@;(8ipt`_ ziG)R`VSbo<4F6}ZnD0Wq+LDVHPk8-vhx<29;&nt5v5igStdBaw+KGxJGmskeM364}I`q#bINq2Ayyn!`%G{97P#rgb#mrrH>iq`GV7NJ?{NWvR{|sYYnV z?jc3h>>OjGoYrYk$q`l6jEwAKspQOR8%feO^%;jMMAtF~W*NX;;!)=`u`-&0b((hM zad_@Dza3VGxre)yaw`j!5t@)BxU+rI+cPLTmOdwcdqk2 zJWfct;z)VeyZm8S%6yUs)9JJVt15TIn-BNH`P(S$ebE_iIuI2k?!n}xlum5>xLXYu zOT`Jy|H%zKvN5Wa9yeeMYuEW+5y#je>)=jKDmBDoO42N1J4;lvP)1acggETZAW7ar zB7eI6t$S`=$%nTV=bpO9CKBTlKx8g5&^%66oUm?YV6`LI4L9CFgDt4nU~AT8&G$61 zMe~$wPQ;1?`f8eDN zxYWz-JG3caW{oY4z*M0q^QL<}Z{m_9DV`A7-$Eu;%giwz8G=~*#V#G9Qp<(+Uqi1R zYkr`bZG)FT3pit$GdZ_5`kKKsoZ_+qRJu@B1~~dnun)d_8-?K0*U>}p=1-w^kbgwD z#iVVROk~OY>r#amZ-frCz^_FFw<=2&rHP3!-^)cVQtru8b`Cw!8TK`{E)M<+0hW*P zLvZ2>3c$vez5KlF5NtbUI;Y4 zHnvrCoJIA}{cv>=Jpk<&(5}))7trapM#J*6#3S$Zluo>bmY#+`_6D)9Q9I!IpV0^K NOm*7}2Y*4M{{UX&I4S@D delta 262 zcmeCZsr`75c0&te3sVbo3(FSPzkyS~vr10RKgz~rVlZ7Mi1jvGN@}W6s#*KrAXXq| z17da{<^W>O?SF%~j%!R-I;%XLqn1l;yJQVlJmdDm-CTCOlM9ZrGMgA!Pv;F{G?;Gi zoQrk3%}g#={`|7kqO_d+a;uEYl$6xG=@V1AY~j*E0*OWGnR&W7sc9uvMivGI6_Ym# zs=%cMwttz)70Ci~Afw6jhnqOmrq5r*#XUWD4j13{Rr9!JGQy;R?w_2vTx7cREH3-) gTNiLudQInl!m2#o_YIfm^n%x18>VO4GJ?4d0PA#OivR!s diff --git a/netbox/project-static/dist/netbox-light.css b/netbox/project-static/dist/netbox-light.css index ca4707ab715b273c62b8ce757b369f3a826ffb19..734701442161a278b0e267a7c6708089ce841df8 100644 GIT binary patch delta 2129 zcmb7FO^@3|7*^_JQnjF}?55pq3Uzm>NLt3Sv)v7`F9;5(q7px#Eikbs$tV+#Ydc?! zR@oI<6(oeJM(v0L5>kHvAdvP3RNN|YDCbIuJ4o#jPK@nMHc68v&BY(_`|&*Q^FH(7 zv-Iy@r+0d>-jSZvi}w;gfq%QN7`Gs?E!@%zg#!P32fVc}?|^hHf!eI@^JgDOD_xs4 zUE~-QOv)8s*HpDp89cxyE>?*TON3I08i-I-q}ZsT799JWHLzQvtO;8>s{70sKDYG> zu`FzF*ATH48djARkBC>O(PV+t)1q zTN|9kFD79Og-9~VM1CWmpT)$1c|pp`{IMBds?KP53YXR0(Frl{Q;~{Q6e>4FBdXI2)R=B+QsUbHI9c0h|L~N3jpkPU_@& zndHR$4}~&W?tFM=$cp7MM~KHhyc1^;vV>vq{2uspWBTN$LG~-3Y|`NHM^<9^olq`f^*aAn041>#d(RXMe>~q z@xmZs$3d1w>~ds2n!-QclU^UU0seFsr1r1ug8!1M5hN2)GZWyFp&a>DmOr@-*7xs! a0Wx`B_2S3*FTa8Zy!vBwm*TC5;L`u?dj6FF delta 120 zcmX>*Q+jc;bVCbc3sVbo3rh>@7Pg=D(|E@)Sl~@^B7!*|0ZeKlx UP1Ah(z0+("); $accordion-button-active-icon: url("data:image/svg+xml,"); diff --git a/netbox/templates/base/layout.html b/netbox/templates/base/layout.html index 6d9200a90..8167739bf 100644 --- a/netbox/templates/base/layout.html +++ b/netbox/templates/base/layout.html @@ -6,84 +6,20 @@ {% load static %} {% block layout %} +
-
+
{# Sidebar #} - + {% include 'base/sidebar.html' %} {# Body #}
{# Top bar #} - {% if settings.BANNER_TOP %} @@ -104,11 +96,51 @@ {# Page footer #}
-
-
+
+ + {# Docs & Community Links #} +
+ +
+ + {# System Info #} +
{% annotated_now %} {% now 'T' %} {{ settings.HOSTNAME }} (v{{ settings.VERSION }})
+
diff --git a/netbox/templates/base/sidebar.html b/netbox/templates/base/sidebar.html deleted file mode 100644 index a72f2a02b..000000000 --- a/netbox/templates/base/sidebar.html +++ /dev/null @@ -1,24 +0,0 @@ -{% load nav %} -{% load static %} - -
- - {# Logo Container #} - - - {# Navigation Items #} - {% nav %} - -
diff --git a/netbox/templates/base/sidenav.html b/netbox/templates/base/sidenav.html new file mode 100644 index 000000000..1b1b55381 --- /dev/null +++ b/netbox/templates/base/sidenav.html @@ -0,0 +1,38 @@ +{% load nav %} +{% load static %} + + diff --git a/netbox/utilities/templates/navigation/nav_items.html b/netbox/utilities/templates/navigation/nav_items.html index a6bac1b95..ec996ec7e 100644 --- a/netbox/utilities/templates/navigation/nav_items.html +++ b/netbox/utilities/templates/navigation/nav_items.html @@ -1,70 +1,57 @@ {% load helpers %} -
    - {% comment %}
  • - - - -
    • {% endcomment %} +
      + {% for menu in nav_items %} +
    • + + -
      • - {% endfor %} - + {% endfor %} +
    +
+ + {% endfor %} From 7aa89c2e7305dd8ee294e902821d0b1f81738a78 Mon Sep 17 00:00:00 2001 From: checktheroads Date: Thu, 29 Jul 2021 18:11:48 -0700 Subject: [PATCH 5/9] #6797: Fix new sidenav styles --- netbox/project-static/dist/netbox-dark.css | Bin 736464 -> 736378 bytes netbox/project-static/dist/netbox-light.css | Bin 458285 -> 458233 bytes netbox/project-static/styles/sidenav.scss | 12 +++++------- 3 files changed, 5 insertions(+), 7 deletions(-) diff --git a/netbox/project-static/dist/netbox-dark.css b/netbox/project-static/dist/netbox-dark.css index 7d85ada3721400424af6ff661c97df8ad5ccbaa7..33d0fd09dfe28ec06905b91a0bc0679a50e0a3ec 100644 GIT binary patch delta 65 zcmcccQ|H$YorV_17N!>F7M2#)7Pc1lEga4Nr#rE5`cKbiF7M2#)7Pc1lEga4Nr^o-|P~NJ;IfrGka;@$335=Wy)7#&1 i2v6T@#jQO3z<-YH=?hpnwc15kIf0mKy9g_HnmGW?%^TJL diff --git a/netbox/project-static/dist/netbox-light.css b/netbox/project-static/dist/netbox-light.css index 551c9469223ef8599b93e230d13c3ed39681d80c..1258713ca3bf173794315342b5ea5d8eea1bfc46 100644 GIT binary patch delta 50 zcmZ4cNBZY)>4p}@7N!>F7M3lnYOT{3^)gFOck5skn%>jFYQ9~qm6esb{cs2C_QM@) GS)~93CKE;g delta 66 zcmV-I0KNbD`x~wN8-RoXgaU*Egaot&CWW_(g#`rzm!l#B6O)e)2$wU61t6DWg#{A< YESEur1xc3yi3KW$xrha~xrhcpbu7sj1poj5 diff --git a/netbox/project-static/styles/sidenav.scss b/netbox/project-static/styles/sidenav.scss index 0a8c14349..ccd1f0a75 100644 --- a/netbox/project-static/styles/sidenav.scss +++ b/netbox/project-static/styles/sidenav.scss @@ -292,12 +292,16 @@ $transition-100ms-ease-in-out: all 0.1s ease-in-out; color: var(--nbx-sidenav-pin-color); transform: rotate(90deg); } + @include media-breakpoint-up(xl) { + + .content-container { + margin-left: $sidenav-width-open; + } + } } @include sidenav-peek() { .sidenav-toggle-icon { transform: rotate(0deg); - // transform: rotate(90deg); } } @@ -321,12 +325,6 @@ $transition-100ms-ease-in-out: all 0.1s ease-in-out; @include media-breakpoint-down(lg) { transform: translateX(0); } - - @include media-breakpoint-up(xl) { - + .content-container { - margin-left: $sidenav-width-open; - } - } } @include sidenav-closed() { From d18c83beb0f5d6ca6f1f739669248e372ab9ff04 Mon Sep 17 00:00:00 2001 From: checktheroads Date: Fri, 30 Jul 2021 00:35:38 -0700 Subject: [PATCH 6/9] #6828: Fix various mobile UI issues --- netbox/project-static/dist/netbox-dark.css | Bin 736378 -> 737394 bytes netbox/project-static/dist/netbox-light.css | Bin 458233 -> 458909 bytes netbox/project-static/dist/netbox.js | Bin 312245 -> 312222 bytes netbox/project-static/dist/netbox.js.map | Bin 1115457 -> 1115424 bytes netbox/project-static/src/search.ts | 4 +- netbox/project-static/styles/netbox.scss | 60 +++++++++++++++-- netbox/project-static/styles/sidenav.scss | 17 ++++- netbox/templates/base/base.html | 2 +- netbox/templates/base/layout.html | 30 +++++---- netbox/templates/base/sidenav.html | 9 ++- netbox/templates/inc/table_controls.html | 4 +- netbox/templates/search.html | 2 +- .../templates/navigation/nav_items.html | 1 + .../utilities/templates/search/searchbar.html | 63 +++++++++--------- 14 files changed, 132 insertions(+), 60 deletions(-) diff --git a/netbox/project-static/dist/netbox-dark.css b/netbox/project-static/dist/netbox-dark.css index 33d0fd09dfe28ec06905b91a0bc0679a50e0a3ec..a28b0e4ee8e15295ceb03ac626c4bd6ba43b8bc9 100644 GIT binary patch delta 499 zcmezML+4Y2ZbJ)W3sVbo3rh=Y3tJ2O7LJ&AlkFOnryG3c;M6E6%1_J8N!3j%Eh)** z(@oCLD@n}EOD&2{&PgmTj;&6~EH21NthAbbfQM6O`iFNM?5eo5z}4pE=cP`c|A#|# z^0vt;?G5iZwl}=ve06?$f+Q=8aBhAQ&^}bPALUrZr=POm=9%92hl73k2WeKh=>eZP zL?&l1=bF~bri)c)T25-k?pn7`j4mN{nGOT>lJ-%@0 zPk(RC%_@QLB-|Asv#e3Ad}qzg#sO10-QSSaWV*lsF7fS+`?yr(WcAYW^Gi~TstXcR zQZn<>tqk={i&AqH3=|B3)a1nFBGZ3=)3)O3%#GP09y`ajuocCAK$w e;d&!BecdfC?&+*IxU{EV;Ns@lKA)TWwgCVLv%o(9 delta 99 zcmV-p0G$8wfGzs?EP#XogaU*Egam{Iga(8Mv?uPyu>mEy@I0rw9K4T-K5fzlKec~Xgjlf}F%ktE8O#t@O;yO^Z@< z6%2tyt={yQR#x?PhYHs14i#*(4aI>j(ap_I0=ff5_w)xw%;MAes#$ra*Ge<1PWP-~ z<(|wGBWHp|eOgXx1<-j283iP^Zb^Q@^z)IdhSLiUv+;q<;bl!tEK1Ip-nWZQf~!0; zr6j}3(7-@-GGmOqTrpS*5fmtHs-4cghD~z&rjE`S~TOMb$808tQ>PX#n=- z^o6I`#HRO4vT#a4mE|TDrDx{pCglTzI@ihq6cpQI_pveYgFOYcHa{s#w>UK?HMu0e zs5&>XLN_BdGd-ik%G|Up!#ck#wJ0qozg)M{DzUUAzjk}vSvGP0>GoF4Y|~>!nK`FB O-eFVUKIaZwtReujdbk|` delta 78 zcmV-U0I~m_fgJh!8-RoXgaU*Egaot&7kHO%d<6-Y;DrSshrM_Ox4n1$pT2HK*S<;*o2QSjPp# z+(66&#JoVvw>@GV|K4^kM++yNawkXUJeTQmW&%E(md^T4I=+tD&fAO41gwxrVPTy<9BiC-WjthvnftUw~d4ZU3yV*Ma zz3rUNMNT@}&W^5*)BlA+D%E)2tW(?w+Y}dCCxXj3CxSiQb HK=w2MwjVf) diff --git a/netbox/project-static/src/search.ts b/netbox/project-static/src/search.ts index 6818a7283..4eaae06e5 100644 --- a/netbox/project-static/src/search.ts +++ b/netbox/project-static/src/search.ts @@ -32,9 +32,7 @@ function handleSearchDropdownClick(event: Event, button: HTMLButtonElement) { * Initialize Search Bar Elements. */ function initSearchBar() { - for (const dropdown of getElements( - 'div.search-container ul.search-obj-selector', - )) { + for (const dropdown of getElements('.search-obj-selector')) { for (const button of dropdown.querySelectorAll( 'li > button.dropdown-item', )) { diff --git a/netbox/project-static/styles/netbox.scss b/netbox/project-static/styles/netbox.scss index d588a1ba6..026927470 100644 --- a/netbox/project-static/styles/netbox.scss +++ b/netbox/project-static/styles/netbox.scss @@ -172,6 +172,34 @@ table td > .progress { min-width: 6rem; } +.nav-mobile { + display: none; + flex-direction: column; + align-items: center; + justify-content: space-between; + width: 100%; + + @include media-breakpoint-down(lg) { + display: flex; + } + + .nav-mobile-top { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + } +} + +.search-container { + display: flex; + width: 100%; + + @include media-breakpoint-down(lg) { + display: none; + } +} + .card > .table.table-flush { margin-bottom: 0; overflow: hidden; @@ -414,6 +442,18 @@ main.login-container { } } +.footer { + padding-top: map.get($spacers, 4); + padding-right: 0; + padding-bottom: map.get($spacers, 3); + padding-left: 0; + + @include media-breakpoint-down(md) { + // Pad the bottom of the footer on mobile devices to account for mobile browser controls. + margin-bottom: 8rem; + } +} + footer.login-footer { height: 4rem; margin-top: auto; @@ -658,6 +698,11 @@ div.content-container { } .search-obj-selector { + @include media-breakpoint-down(lg) { + // Limit the height and enable scrolling on mobile devices. + max-height: 75vh; + overflow-y: auto; + } .dropdown-item, .dropdown-header { font-size: $font-size-sm; @@ -833,7 +878,7 @@ div.field-group:not(:first-of-type) { label.required { font-weight: $font-weight-bold; - &::after { + &:after { font-family: 'Material Design Icons'; content: '\f06C4'; font-weight: normal; @@ -853,29 +898,34 @@ div.bulk-buttons { display: flex; justify-content: space-between; margin: $spacer / 2 0; + // Each group of buttons needs to be contained separately for alignment purposes. This way, you // can put some buttons in a group that aligns left, and other buttons in a group that aligns // right. - & > div.bulk-button-group { + > div.bulk-button-group { display: flex; + flex-wrap: wrap; + &:first-of-type:not(:last-of-type) { // If there are multiple bulk button groups and this is the first, the first button in the // group should *not* have left spacing applied, so the button group aligns with the rest // of the page elements. - & > *:first-child { + > *:first-child { margin-left: 0; } } + &:last-of-type:not(:first-of-type) { // If there are multiple bulk button groups and this is the last, the last button in the // group should *not* have right spacing applied, so the button group aligns with the rest // of the page elements. - & > *:last-child { + > *:last-child { margin-right: 0; } } + // However, the rest of the buttons should have spacing applied in all directions. - & > * { + > * { margin: $spacer / 4; } } diff --git a/netbox/project-static/styles/sidenav.scss b/netbox/project-static/styles/sidenav.scss index ccd1f0a75..ceb063486 100644 --- a/netbox/project-static/styles/sidenav.scss +++ b/netbox/project-static/styles/sidenav.scss @@ -80,12 +80,22 @@ $transition-100ms-ease-in-out: all 0.1s ease-in-out; border-right: 1px solid $border-color; transition: $transition-100ms-ease-in-out; - // Media fixes for iPhone 5 like resolutions + // Media fixes for mobile resolutions. @include media-breakpoint-down(lg) { transform: translateX(-$sidenav-width-closed); + + .content-container[class] { margin-left: 0; } + + .profile-button-container[class] { + display: block; + } + } + + .profile-button-container { + display: none; + padding: $sidenav-link-spacing-y $sidenav-link-spacing-x; } + .content-container { @@ -322,6 +332,7 @@ $transition-100ms-ease-in-out: all 0.1s ease-in-out; position: absolute; opacity: 0; } + @include media-breakpoint-down(lg) { transform: translateX(0); } @@ -331,14 +342,17 @@ $transition-100ms-ease-in-out: all 0.1s ease-in-out; .sidenav-header { padding: $spacer * 0.5; } + .sidenav-brand { position: absolute; opacity: 0; transform: translateX(-150%); } + .sidenav-brand-icon { opacity: 1; } + .navbar-nav > .nav-item { > .nav-link { &:after { @@ -354,6 +368,7 @@ $transition-100ms-ease-in-out: all 0.1s ease-in-out; .nav-link-text { opacity: 0; } + @include parent-link() { &.active { margin-right: 0; diff --git a/netbox/templates/base/base.html b/netbox/templates/base/base.html index a83566e6f..556c9e079 100644 --- a/netbox/templates/base/base.html +++ b/netbox/templates/base/base.html @@ -15,7 +15,7 @@ {# Page title #} diff --git a/netbox/templates/base/layout.html b/netbox/templates/base/layout.html index dd0a982b3..c7d8ca49b 100644 --- a/netbox/templates/base/layout.html +++ b/netbox/templates/base/layout.html @@ -19,17 +19,22 @@