From 35ecd1494f118107bc3b15b405d462e9fc4f0e95 Mon Sep 17 00:00:00 2001 From: checktheroads Date: Fri, 30 Jul 2021 00:35:38 -0700 Subject: [PATCH] #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 @@