mirror of
https://github.com/netbox-community/netbox.git
synced 2025-07-18 04:56:29 -06:00
#6372: Responsive layout improvements
This commit is contained in:
parent
c7afc9eb28
commit
18f1b93ae4
BIN
netbox/project-static/dist/netbox-dark.css
vendored
BIN
netbox/project-static/dist/netbox-dark.css
vendored
Binary file not shown.
File diff suppressed because one or more lines are too long
BIN
netbox/project-static/dist/netbox-light.css
vendored
BIN
netbox/project-static/dist/netbox-light.css
vendored
Binary file not shown.
File diff suppressed because one or more lines are too long
@ -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;
|
||||
}
|
||||
|
@ -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"
|
||||
|
@ -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">
|
||||
|
Loading…
Reference in New Issue
Block a user