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

#6797: Fix various mobile layout issues

Browse Source
This commit is contained in:
Matt 2021-08-05 09:59:13 -07:00
parent 31cd6898d4
commit 79f726e6cd
9 changed files with 23 additions and 21 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.

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

Binary file not shown.

4
netbox/project-static/styles/netbox.scss
View File

@ -255,7 +255,7 @@ div.title-container {
#content-title { #content-title {
display: flex; display: flex;
flex: 1 0 auto; flex: 1 0;
flex-direction: column; flex-direction: column;
padding-bottom: map.get($spacers, 2); padding-bottom: map.get($spacers, 2);
} }
@ -721,6 +721,8 @@ div.bulk-buttons {
> div.bulk-button-group { > div.bulk-button-group {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
// For small screens: don't fill the available space (thereby expanding the size of the button).
align-items: flex-start;
&:first-of-type:not(:last-of-type) { &:first-of-type:not(:last-of-type) {
// If there are multiple bulk button groups and this is the first, the first button in the // If there are multiple bulk button groups and this is the first, the first button in the

18
netbox/templates/dcim/cable_connect.html
View File

@ -23,43 +23,43 @@
{% if termination_a.device %} {% if termination_a.device %}
{# Device component #} {# Device component #}
<div class="row mb-3"> <div class="row mb-3">
<label class="col-sm-3 col-form-label text-end">Region</label> <label class="col-sm-3 col-form-label text-lg-end">Region</label>
<div class="col"> <div class="col">
<input class="form-control" value="{{ termination_a.device.site.region }}" disabled /> <input class="form-control" value="{{ termination_a.device.site.region }}" disabled />
</div> </div>
</div> </div>
<div class="row mb-3"> <div class="row mb-3">
<label class="col-sm-3 col-form-label text-end">Site</label> <label class="col-sm-3 col-form-label text-lg-end">Site</label>
<div class="col"> <div class="col">
<input class="form-control" value="{{ termination_a.device.site }}" disabled /> <input class="form-control" value="{{ termination_a.device.site }}" disabled />
</div> </div>
</div> </div>
<div class="row mb-3"> <div class="row mb-3">
<label class="col-sm-3 col-form-label text-end">Location</label> <label class="col-sm-3 col-form-label text-lg-end">Location</label>
<div class="col"> <div class="col">
<input class="form-control" value="{{ termination_a.device.location|default:"None" }}" disabled /> <input class="form-control" value="{{ termination_a.device.location|default:"None" }}" disabled />
</div> </div>
</div> </div>
<div class="row mb-3"> <div class="row mb-3">
<label class="col-sm-3 col-form-label text-end">Rack</label> <label class="col-sm-3 col-form-label text-lg-end">Rack</label>
<div class="col"> <div class="col">
<input class="form-control" value="{{ termination_a.device.rack|default:"None" }}" disabled /> <input class="form-control" value="{{ termination_a.device.rack|default:"None" }}" disabled />
</div> </div>
</div> </div>
<div class="row mb-3"> <div class="row mb-3">
<label class="col-sm-3 col-form-label text-end">Device</label> <label class="col-sm-3 col-form-label text-lg-end">Device</label>
<div class="col"> <div class="col">
<input class="form-control" value="{{ termination_a.device }}" disabled /> <input class="form-control" value="{{ termination_a.device }}" disabled />
</div> </div>
</div> </div>
<div class="row mb-3"> <div class="row mb-3">
<label class="col-sm-3 col-form-label text-end">Type</label> <label class="col-sm-3 col-form-label text-lg-end">Type</label>
<div class="col"> <div class="col">
<input class="form-control" value="{{ termination_a|meta:"verbose_name"|capfirst }}" disabled /> <input class="form-control" value="{{ termination_a|meta:"verbose_name"|capfirst }}" disabled />
</div> </div>
</div> </div>
<div class="row mb-3"> <div class="row mb-3">
<label class="col-sm-3 col-form-label text-end">Name</label> <label class="col-sm-3 col-form-label text-lg-end">Name</label>
<div class="col"> <div class="col">
<input class="form-control" value="{{ termination_a }}" disabled /> <input class="form-control" value="{{ termination_a }}" disabled />
</div> </div>
@ -94,7 +94,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col col-md-2 d-flex flex-column justify-content-center align-items-center"> <div class="col col-md-2 flex-column justify-content-center align-items-center d-none d-md-flex">
<i class="mdi mdi-swap-horizontal-bold mdi-48px"></i> <i class="mdi mdi-swap-horizontal-bold mdi-48px"></i>
</div> </div>
<div class="col col-md-5"> <div class="col col-md-5">
@ -140,7 +140,7 @@
{% render_field form.termination_b_circuit %} {% render_field form.termination_b_circuit %}
{% endif %} {% endif %}
<div class="row mb-3"> <div class="row mb-3">
<label class="col-sm-3 col-form-label text-end">Type</label> <label class="col-sm-3 col-form-label text-lg-end">Type</label>
<div class="col"> <div class="col">
<input class="form-control" value="{{ termination_b_type|capfirst }}" disabled /> <input class="form-control" value="{{ termination_b_type|capfirst }}" disabled />
</div> </div>

2
netbox/templates/dcim/device/interfaces.html
View File

@ -34,7 +34,7 @@
</div> </div>
</div> </div>
</div> </div>
{% render_table interface_table 'inc/table.html' %} {% include 'inc/responsive_table.html' with table=interface_table %}
<div class="noprint bulk-buttons"> <div class="noprint bulk-buttons">
<div class="bulk-button-group"> <div class="bulk-button-group">
{% if perms.dcim.change_interface %} {% if perms.dcim.change_interface %}

2
netbox/templates/dcim/inc/cable_form.html
View File

@ -7,7 +7,7 @@
{% render_field form.label %} {% render_field form.label %}
{% render_field form.color %} {% render_field form.color %}
<div class="row mb-3"> <div class="row mb-3">
<label class="col-sm-3 col-form-label text-end">{{ form.length.label }}</label> <label class="col-sm-3 col-form-label text-lg-end">{{ form.length.label }}</label>
<div class="col-md-5"> <div class="col-md-5">
{{ form.length }} {{ form.length }}
</div> </div>

2
netbox/templates/dcim/rack_edit.html
View File

@ -30,7 +30,7 @@
{% render_field form.width %} {% render_field form.width %}
{% render_field form.u_height %} {% render_field form.u_height %}
<div class="row mb-3"> <div class="row mb-3">
<label class="col col-md-3 col-form-label text-end">Outer Dimensions</label> <label class="col col-md-3 col-form-label text-lg-end">Outer Dimensions</label>
<div class="col col-md-3"> <div class="col col-md-3">
{{ form.outer_width }} {{ form.outer_width }}
<div class="form-text">Width</div> <div class="form-text">Width</div>

6
netbox/templates/ipam/service_edit.html
View File

@ -6,14 +6,14 @@
<h5 class="text-center">Service</h5> <h5 class="text-center">Service</h5>
{% if obj.device %} {% if obj.device %}
<div class="row mb-3"> <div class="row mb-3">
<label class="col-sm-3 col-form-label text-end">Device</label> <label class="col-sm-3 col-form-label text-lg-end">Device</label>
<div class="col"> <div class="col">
<input class="form-control" value="{{ obj.device }}" disabled /> <input class="form-control" value="{{ obj.device }}" disabled />
</div> </div>
</div> </div>
{% else %} {% else %}
<div class="row mb-3"> <div class="row mb-3">
<label class="col-sm-3 col-form-label text-end">Virtual Machine</label> <label class="col-sm-3 col-form-label text-lg-end">Virtual Machine</label>
<div class="col"> <div class="col">
<input class="form-control" value="{{ obj.virtual_machine }}" disabled /> <input class="form-control" value="{{ obj.virtual_machine }}" disabled />
</div> </div>
@ -21,7 +21,7 @@
{% endif %} {% endif %}
{% render_field form.name %} {% render_field form.name %}
<div class="row"> <div class="row">
<label class="col-sm-3 col-form-label text-end">Port(s)</label> <label class="col-sm-3 col-form-label text-lg-end">Port(s)</label>
<div class="col-2"> <div class="col-2">
{{ form.protocol }} {{ form.protocol }}
</div> </div>

10
netbox/templates/utilities/render_field.html
View File

@ -26,7 +26,7 @@
{% elif field|widget_type == 'textarea' and not field.label %} {% elif field|widget_type == 'textarea' and not field.label %}
<div class="row mb-3"> <div class="row mb-3">
{% if label %} {% if label %}
<label class="col-sm-3 col-form-label text-end{% if field.field.required %} required{% endif %}" for="{{ field.id_for_label }}"> <label class="col-sm-3 col-form-label text-lg-end{% if field.field.required %} required{% endif %}" for="{{ field.id_for_label }}">
{{ label }} {{ label }}
</label> </label>
{% else %} {% else %}
@ -47,7 +47,7 @@
{% elif field|widget_type == 'slugwidget' %} {% elif field|widget_type == 'slugwidget' %}
<div class="row mb-3"> <div class="row mb-3">
<label class="col-sm-3 col-form-label text-end{% if field.field.required %} required{% endif %}" for="{{ field.id_for_label }}"> <label class="col-sm-3 col-form-label text-lg-end{% if field.field.required %} required{% endif %}" for="{{ field.id_for_label }}">
{{ field.label }} {{ field.label }}
</label> </label>
<div class="col"> <div class="col">
@ -63,7 +63,7 @@
{% elif field|widget_type == 'selectspeedwidget' %} {% elif field|widget_type == 'selectspeedwidget' %}
{# This is outside the widget because bootstrap requires a specific order for border-radius purposes. #} {# This is outside the widget because bootstrap requires a specific order for border-radius purposes. #}
<div class="row mb-3"> <div class="row mb-3">
<label class="col-sm-3 col-form-label text-end{% if field.field.required %} required{% endif %}" for="{{ field.id_for_label }}"> <label class="col-sm-3 col-form-label text-lg-end{% if field.field.required %} required{% endif %}" for="{{ field.id_for_label }}">
{{ field.label }} {{ field.label }}
</label> </label>
<div class="col"> <div class="col">
@ -102,7 +102,7 @@
{% elif field|widget_type == 'selectmultiple' %} {% elif field|widget_type == 'selectmultiple' %}
<div class="row"> <div class="row">
<label for="{{ field.id_for_label }}" class="form-label col col-md-3 text-end{% if field.field.required %} required{% endif %}"> <label for="{{ field.id_for_label }}" class="form-label col col-md-3 text-lg-end{% if field.field.required %} required{% endif %}">
{{ field.label }} {{ field.label }}
</label> </label>
<div class="col col-md-9"> <div class="col col-md-9">
@ -118,7 +118,7 @@
{% else %} {% else %}
<div class="row mb-3"> <div class="row mb-3">
<label for="{{ field.id_for_label }}" class="col-sm-3 col-form-label text-end{% if field.field.required %} required{% endif %}"> <label for="{{ field.id_for_label }}" class="col-sm-3 col-form-label text-lg-end{% if field.field.required %} required{% endif %}">
{{ field.label }} {{ field.label }}
</label> </label>
<div class="col"> <div class="col">