Skip to content
GitLab
Commit 460a203c authored by checktheroads's avatar checktheroads
Browse files

Add basic support for smaller screens

parent 58e1a1f1
Expand all Hide whitespace changes
Inline Side-by-side
netbox/project-static/dist/netbox.css
View file @ 460a203c
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
netbox/project-static/dist/netbox.css.map
View file @ 460a203c
This diff is collapsed.
netbox/project-static/netbox.scss
View file @ 460a203c
......@@ -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;
......
netbox/project-static/theme-dark.scss
View file @ 460a203c
......@@ -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;
......
netbox/templates/500.html
View file @ 460a203c
......@@ -11,7 +11,7 @@
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 offset-md-3">
<div class="col col-md-6 offset-md-3">
<div class="card bg-danger mt-5">
<h5 class="card-header">
<i class="mdi mdi-alert"></i> Server Error
......
netbox/templates/circuits/circuit.html
View file @ 460a203c
......@@ -10,7 +10,7 @@
{% block content %}
<div class="row">
<div class="col-md-6">
<div class="col col-md-6">
<div class="card">
<h5 class="card-header">
Circuit
......@@ -81,14 +81,14 @@
</div>
{% plugin_left_page object %}
</div>
<div class="col-md-6">
<div class="col col-md-6">
{% include 'circuits/inc/circuit_termination.html' with termination=termination_a side='A' %}
{% include 'circuits/inc/circuit_termination.html' with termination=termination_z side='Z' %}
{% plugin_right_page object %}
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="col col-md-12">
{% plugin_full_width_page object %}
</div>
</div>
......
netbox/templates/circuits/circuittype.html
View file @ 460a203c
......@@ -9,7 +9,7 @@
{% block content %}
<div class="row mb-3">
<div class="col-md-6">
<div class="col col-md-6">
<div class="card">
<h5 class="card-header">
Circuit Type
......@@ -35,13 +35,13 @@
</div>
{% plugin_left_page object %}
</div>
<div class="col-md-6">
<div class="col col-md-6">
{% include 'inc/custom_fields_panel.html' %}
{% plugin_right_page object %}
</div>
</div>
<div class="row mb-3">
<div class="col-md-12">
<div class="col col-md-12">
<div class="card">
<h5 class="card-header">
Circuits
......
netbox/templates/circuits/provider.html
View file @ 460a203c
......@@ -4,13 +4,13 @@
{% load plugins %}
{% block breadcrumbs %}
<li><a href="{% url 'circuits:provider_list' %}">Providers</a></li>
<li>{{ object }}</li>
<li class="breadcrumb-item"><a href="{% url 'circuits:provider_list' %}">Providers</a></li>
<li class="breadcrumb-item">{{ object }}</li>
{% endblock %}
{% block content %}
<div class="row">
<div class="col-md-4">
<div class="col col-md-4">
<div class="card">
<h5 class="card-header">
Provider
......@@ -54,7 +54,7 @@
</div>
{% plugin_left_page object %}
</div>
<div class="col-md-6">
<div class="col col-md-6">
{% include 'inc/custom_fields_panel.html' %}
{% include 'extras/inc/tags_panel.html' with tags=object.tags.all url='circuits:provider_list' %}
<div class="card">
......@@ -71,7 +71,7 @@
</div>
{% plugin_right_page object %}
</div>
<div class="col-md-8">
<div class="col col-md-8">
<div class="card">
<h5 class="card-header">
Circuits
......@@ -91,7 +91,7 @@
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="col col-md-12">
{% plugin_full_width_page object %}
</div>
</div>
......
netbox/templates/circuits/providernetwork.html
View file @ 460a203c
......@@ -11,7 +11,7 @@
{% block content %}
<div class="row">
<div class="col-md-6">
<div class="col col-md-6">
<div class="card">
<h5 class="card-header">
Provider Network
......@@ -37,7 +37,7 @@
</div>
{% plugin_left_page object %}
</div>
<div class="col-md-6">
<div class="col col-md-6">
<div class="card">
<h5 class="card-header">
Comments
......@@ -56,7 +56,7 @@
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="col col-md-12">
<div class="card">
<h5 class="card-header">
Circuits
......@@ -69,7 +69,7 @@
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="col col-md-12">
{% plugin_full_width_page object %}
</div>
</div>
......
netbox/templates/dcim/cable.html
View file @ 460a203c
......@@ -25,7 +25,7 @@
{% block content %}
<div class="row">
<div class="col-md-6">
<div class="col col-md-6">
<div class="card">
<h5 class="card-header">
Cable
......@@ -73,7 +73,7 @@
{% include 'extras/inc/tags_panel.html' with tags=object.tags.all url='dcim:cable_list' %}
{% plugin_left_page object %}
</div>
<div class="col-md-6">
<div class="col col-md-6">
<div class="card">
<h5 class="card-header">
Termination A
......@@ -94,7 +94,7 @@
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="col col-md-12">
{% plugin_full_width_page object %}
</div>
</div>
......
netbox/templates/dcim/cable_connect.html
View file @ 460a203c
......@@ -14,7 +14,7 @@
{{ field }}
{% endfor %}
<div class="row my-3">
<div class="col-md-5">
<div class="col col-md-5">
<div class="card h-100">
<h5 class="card-header">
A Side
......@@ -68,10 +68,10 @@
</div>
</div>
</div>
<div class="col-md-2 d-flex flex-column justify-content-center align-items-center">
<div class="col col-md-2 d-flex flex-column justify-content-center align-items-center">
<i class="mdi mdi-swap-horizontal-bold mdi-48px"></i>
</div>
<div class="col-md-5">
<div class="col col-md-5">
<div class="card h-100">
<h5 class="card-header">
B Side
......@@ -123,12 +123,12 @@
</div>
</div>
<div class="row my-3 justify-content-center">
<div class="col-md-8">
<div class="col col-md-8">
{% include 'dcim/inc/cable_form.html' %}
</div>
</div>
<div class="row my-3">
<div class="col-md-12 text-center">
<div class="col col-md-12 text-center">
<a href="{{ return_url }}" class="btn btn-outline-danger">Cancel</a>
<button type="submit" name="_update" class="btn btn-primary">Connect</button>
</div>
......
netbox/templates/dcim/cable_trace.html
View file @ 460a203c
......@@ -7,7 +7,7 @@
{% block content %}
<div class="row">
<div class="col-md-5 col-sm-12">
<div class="col col-md-5">
<div class="cable-trace">
{% with traced_path=path.origin.trace %}
{% for near_end, cable, far_end in traced_path %}
......@@ -87,7 +87,7 @@
{% endwith %}
</div>
</div>
<div class="col-md-7 col-sm-12">
<div class="col col-md-7">
<div class="card">
<h5 class="card-header">
......
netbox/templates/dcim/connections_list.html
View file @ 460a203c
......@@ -7,7 +7,7 @@
{% block content %}
<div class="row mb-3">
<div class="col-md-9">
<div class="col col-md-9">
<div class="card">
<div class="card-body">
{% include 'responsive_table.html' %}
......@@ -15,7 +15,7 @@
</div>
{% include 'inc/paginator.html' with paginator=table.paginator page=table.page %}
</div>
<div class="col-md-3 float-end right-side-panel noprint">
<div class="col col-md-3 float-end right-side-panel noprint">
{% include 'inc/search_panel.html' %}
</div>
</div>
......
netbox/templates/dcim/consoleport.html
View file @ 460a203c
......@@ -9,7 +9,7 @@
{% block content %}
<div class="row">
<div class="col-md-6">
<div class="col col-md-6">
<div class="card">
<h5 class="card-header">
Console Port
......@@ -49,7 +49,7 @@
{% include 'extras/inc/tags_panel.html' with tags=object.tags.all %}
{% plugin_left_page object %}
</div>
<div class="col-md-6">
<div class="col col-md-6">
<div class="card">
<h5 class="card-header">
Connection
......@@ -145,7 +145,7 @@
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="col col-md-12">
{% plugin_full_width_page object %}
</div>
</div>
......
netbox/templates/dcim/consoleserverport.html
View file @ 460a203c
......@@ -9,7 +9,7 @@
{% block content %}
<div class="row">
<div class="col-md-6">
<div class="col col-md-6">
<div class="card">
<h5 class="card-header">
Console Server Port
......@@ -49,7 +49,7 @@
{% include 'extras/inc/tags_panel.html' with tags=object.tags.all %}
{% plugin_left_page object %}
</div>
<div class="col-md-6">
<div class="col col-md-6">
<div class="card">
<h5 class="card-header">
Connection
......@@ -145,7 +145,7 @@
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="col col-md-12">
{% plugin_full_width_page object %}
</div>
</div>
......
netbox/templates/dcim/device.html
View file @ 460a203c
......@@ -7,11 +7,11 @@
{% block content %}
<div class="row">
<div class="col-md-12">
<div class="col col-md-12">
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="details">
<div class="row">
<div class="col-md-6">
<div class="col col-md-6">
<div class="card">
<h5 class="card-header">
Device
......@@ -228,7 +228,7 @@
</div>
{% plugin_left_page object %}
</div>
<div class="col-md-6">
<div class="col col-md-6">
{% if object.powerports.exists and object.poweroutlets.exists %}
<div class="card">
<h5 class="card-header">
......@@ -369,7 +369,7 @@
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="col col-md-12">
{% plugin_full_width_page object %}
</div>
</div>
......
netbox/templates/dcim/device/config.html
View file @ 460a203c
......@@ -9,7 +9,7 @@
{% block content %}
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="col col-md-10">
<div class="card">
<div class="card-overlay">
<div class="spinner-border" role="status">
......
netbox/templates/dcim/device/status.html
View file @ 460a203c
......@@ -9,7 +9,7 @@
{% block content %}
<div class="row">
<div class="col-md-6">
<div class="col col-md-6">
<div class="card">
<div class="card-overlay d-none">
<div class="spinner-border" role="status">
......@@ -56,7 +56,7 @@
</div>
</div>
</div>
<div class="col-md-6">
<div class="col col-md-6">
<div class="card">
<div class="card-overlay d-none">
<div class="spinner-border" role="status">
......
netbox/templates/dcim/device_component_add.html
View file @ 460a203c
......@@ -9,7 +9,7 @@
<form action="" method="post" enctype="multipart/form-data">
{% csrf_token %}
<div class="row">
<div class="col-md-8">
<div class="col col-md-8">
<div class="field-group">
<h4>{{ component_type|title }}</h4>
{% render_form form %}
......@@ -17,7 +17,7 @@
</div>
</div>
<div class="row my-3">
<div class="col-md-8 text-end">
<div class="col col-md-8 text-end">
{% block buttons %}
<a class="btn btn-outline-danger" href="{{ return_url }}">Cancel</a>
<button type="submit" name="_addanother" class="btn btn-outline-primary">
......
netbox/templates/dcim/devicebay.html
View file @ 460a203c
......@@ -9,7 +9,7 @@
{% block content %}
<div class="row">
<div class="col-md-6">
<div class="col col-md-6">
<div class="card">
<h5 class="card-header">
Device Bay
......@@ -41,7 +41,7 @@
{% include 'extras/inc/tags_panel.html' with tags=object.tags.all %}
{% plugin_left_page object %}
</div>
<div class="col-md-6">
<div class="col col-md-6">
<div class="card">
<h5 class="card-header">
Installed Device
......@@ -73,7 +73,7 @@
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="col col-md-12">
{% plugin_full_width_page object %}
</div>
</div>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment