diff --git a/netbox/project-static/dist/netbox-dark.css b/netbox/project-static/dist/netbox-dark.css index 33d0fd09d..a28b0e4ee 100644 Binary files a/netbox/project-static/dist/netbox-dark.css and b/netbox/project-static/dist/netbox-dark.css differ diff --git a/netbox/project-static/dist/netbox-light.css b/netbox/project-static/dist/netbox-light.css index 1258713ca..390c96186 100644 Binary files a/netbox/project-static/dist/netbox-light.css and b/netbox/project-static/dist/netbox-light.css differ diff --git a/netbox/project-static/dist/netbox.js b/netbox/project-static/dist/netbox.js index bc9f3bab6..6ca2fc7a2 100644 Binary files a/netbox/project-static/dist/netbox.js and b/netbox/project-static/dist/netbox.js differ diff --git a/netbox/project-static/dist/netbox.js.map b/netbox/project-static/dist/netbox.js.map index c060dd459..48669be3f 100644 Binary files a/netbox/project-static/dist/netbox.js.map and b/netbox/project-static/dist/netbox.js.map differ 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 @@