NeoAnd/netbox
1
0
Fork 0
mirror of https://github.com/netbox-community/netbox.git synced 2025-07-18 13:06:30 -06:00
Code Issues Actions 8 Packages Projects Releases Wiki Activity

#6372: Responsive layout improvements

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

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

Binary file not shown.

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

File diff suppressed because one or more lines are too long

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

Binary file not shown.

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; box-shadow: $box-shadow;
&:not(.show) { &:not(.show) {
opacity: 0; opacity: 0;
pointer-events: none;
} }
&.show { &.show {
opacity: 1; opacity: 1;
pointer-events: auto;
} }
} }
@ -389,9 +391,11 @@ div.content-container {
} }
// Prevent scrolling of body content when nav menu is open on mobile. // 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')) { @media (max-width: map.get($grid-breakpoints, 'md')) {
position: fixed; position: fixed;
top: 0;
left: 0;
overflow-y: hidden; overflow-y: hidden;
} }
} }
@ -412,8 +416,9 @@ div.content-container {
max-width: $sidebar-width; max-width: $sidebar-width;
} }
@media (max-width: map.get($grid-breakpoints, 'md')) { @include media-breakpoint-down(md) {
top: 8.125rem; top: 8.125rem;
background-color: var(--nbx-body-bg);
} }
div.accordion-item { div.accordion-item {
@ -468,6 +473,11 @@ div.content-container {
position: sticky; position: sticky;
height: 8rem; height: 8rem;
background-color: var(--nbx-sidebar-bg); background-color: var(--nbx-sidebar-bg);
@include media-breakpoint-down(md) {
background-color: var(--nbx-body-bg);
}
.nav-link { .nav-link {
padding: 0.5rem 0.25rem; 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"> <div class="d-block d-md-none mx-1 my-3 search-container">
{% search_options %} {% search_options %}
</div> </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' %} {% include 'inc/profile_button.html' %}
</div> </div>
{% nav %} {% nav %}
@ -65,8 +65,8 @@
{# Top bar #} {# Top bar #}
<nav class="navbar navbar-light sticky-top flex-md-nowrap p-3 search container-fluid"> <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"> <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' %}"> <a class="p-2 sidebar-logo d-block d-md-none" href="{% url 'home' %}">
<img src="{% static 'netbox_logo.svg' %}" alt="NetBox logo" /> <img src="{% static 'netbox_logo.svg' %}" alt="NetBox logo" width="100%" />
</a> </a>
<button <button
type="button" type="button"

2
netbox/templates/home.html
View File

@ -11,7 +11,7 @@
<div class="stats-container"> <div class="stats-container">
<div class="row masonry"> <div class="row masonry">
{% for section in stats %} {% 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"> <div class="card">
<h5 class="card-header text-primary">{{ section.label }}</h5> <h5 class="card-header text-primary">{{ section.label }}</h5>
<div class="card-body"> <div class="card-body">