NeoAnd/netbox
1
0
Fork 0
mirror of https://github.com/netbox-community/netbox.git synced 2025-12-27 15:47:46 -06:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Add basic support for smaller screens

Browse Source
This commit is contained in:
checktheroads
2021-04-30 15:55:37 -07:00
parent 58e1a1f1d8
commit 460a203c29
105 changed files with 384 additions and 353 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
netbox/project-static/dist/netbox.css vendored
View File

File diff suppressed because one or more lines are too long

2
netbox/project-static/dist/netbox.css.map vendored
View File

File diff suppressed because one or more lines are too long

34
netbox/project-static/netbox.scss
View File

@@ -51,6 +51,11 @@
line-height: $line-height-sm;
}
// Automatically space out adjacent columns.
.col:not(:last-child):not(:only-child) {
margin-bottom: $spacer;
}
body {
background-color: var(--nbx-body-bg);
color: var(--nbx-body-color);
@@ -225,12 +230,6 @@ li.dropdown-item.dropdown-item-btns {
align-items: center;
}
@media (max-width: 767.98px) {
.sidebar {
top: 5rem;
}
}
.sidebar-sticky {
position: relative;
top: 0;
@@ -258,6 +257,14 @@ nav.nav.nav-pills {
}
}
// Prevent scrolling of body content when nav menu is open on mobile.
.sidebar.collapse.show ~ .content-container {
@media (max-width: map.get($grid-breakpoints, 'md')) {
position: fixed;
overflow-y: hidden;
}
}
.sidebar {
position: fixed;
top: 0;
@@ -266,9 +273,15 @@ nav.nav.nav-pills {
z-index: 100; /* Behind the navbar */
box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.1);
background-color: var(--nbx-sidebar-bg);
@media (max-width: map.get($grid-breakpoints, 'md')) {
top: 8.125rem;
}
.sidebar-nav-link {
color: var(--nbx-sidebar-link-color);
}
.accordion-body {
max-height: calc(100vh - 24rem);
overflow-y: auto;
@@ -284,8 +297,15 @@ nav.nav.nav-pills {
}
}
}
// Ensure navigation accounts for the height of the header on mobile when nav is expanded.
&.collapse.show div.position-sticky {
@media (max-width: map.get($grid-breakpoints, 'md')) {
height: calc(100vh - 16.125rem);
overflow-y: auto;
}
}
div.position-sticky {
height: calc(100% - 8rem);
height: calc(100vh - 8rem);
}
div.sidebar-bottom {
padding-left: 0.5rem;

4
netbox/project-static/theme-dark.scss
View File

@@ -129,6 +129,10 @@ $nav-tabs-link-active-border-color: $gray-800 $gray-800 $nav-tabs-link-active-bg
$nav-pills-link-active-color: $component-active-color;
$nav-pills-link-active-bg: $component-active-bg;
$navbar-light-color: $gray-500;
$navbar-light-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-light-toggler-border-color: $gray-700;
// Dropdowns
$dropdown-color: $body-color;
$dropdown-bg: $gray-900;