RomanNum3ral
/
netbox
mirror of https://github.com/netbox-community/netbox.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

#6372: Responsive layout improvements

This commit is contained in:
checktheroads 2021-06-23 10:57:09 -07:00
parent c7afc9eb28
commit 18f1b93ae4
7 changed files with 20 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

@ -107,9 +107,11 @@ span.profile-button .dropdown-menu {
box-shadow: $box-shadow;
&:not(.show) {
opacity: 0;
pointer-events: none;
}
&.show {
opacity: 1;
pointer-events: auto;
}
}
@ -389,9 +391,11 @@ div.content-container {
}
// Prevent scrolling of body content when nav menu is open on mobile.
.sidebar.collapse.show ~ .content-container {
.sidebar.collapse.show ~ .content-container > .content {
@media (max-width: map.get($grid-breakpoints, 'md')) {
position: fixed;
top: 0;
left: 0;
overflow-y: hidden;
}
}
@ -412,8 +416,9 @@ div.content-container {
max-width: $sidebar-width;
}
@media (max-width: map.get($grid-breakpoints, 'md')) {
@include media-breakpoint-down(md) {
top: 8.125rem;
background-color: var(--nbx-body-bg);
}
div.accordion-item {
@ -468,6 +473,11 @@ div.content-container {
position: sticky;
height: 8rem;
background-color: var(--nbx-sidebar-bg);
@include media-breakpoint-down(md) {
background-color: var(--nbx-body-bg);
}
.nav-link {
padding: 0.5rem 0.25rem;
}

6
netbox/templates/base/layout.html
View File

@ -23,7 +23,7 @@
<div class="d-block d-md-none mx-1 my-3 search-container">
{% search_options %}
</div>
<div class="d-flex d-md-none mx-1 my-3 justify-content-end">
<div class="d-flex d-md-none mx-1 my-3 justify-content-center justify-content-md-end order-last order-md-0">
{% include 'inc/profile_button.html' %}
</div>
{% nav %}
@ -65,8 +65,8 @@
{# Top bar #}
<nav class="navbar navbar-light sticky-top flex-md-nowrap p-3 search container-fluid">
<div class="d-md-none w-100 d-flex justify-content-between align-items-center my-3">
<a class="px-2 sidebar-logo d-block d-md-none" href="{% url 'home' %}">
<img src="{% static 'netbox_logo.svg' %}" alt="NetBox logo" />
<a class="p-2 sidebar-logo d-block d-md-none" href="{% url 'home' %}">
<img src="{% static 'netbox_logo.svg' %}" alt="NetBox logo" width="100%" />
</a>
<button
type="button"

2
netbox/templates/home.html
View File

@ -11,7 +11,7 @@
<div class="stats-container">
<div class="row masonry">
{% for section in stats %}
<div class="col col-sm-12 col-md-4 my-2 masonry-item">
<div class="col col-sm-12 col-lg-6 col-xl-4 my-2 masonry-item">
<div class="card">
<h5 class="card-header text-primary">{{ section.label }}</h5>
<div class="card-body">