#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 18 additions and 8 deletions

Binary file not shown.

File diff suppressed because one or more lines are too long

Binary file not shown.

File diff suppressed because one or more lines are too long

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;
}

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"

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">