#6797: Fix various mobile layout issues

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

Binary file not shown.

Binary file not shown.

View File

@ -255,7 +255,7 @@ div.title-container {
#content-title {
display: flex;
flex: 1 0 auto;
flex: 1 0;
flex-direction: column;
padding-bottom: map.get($spacers, 2);
}
@ -721,6 +721,8 @@ div.bulk-buttons {
> div.bulk-button-group {
display: flex;
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) {
// If there are multiple bulk button groups and this is the first, the first button in the

View File

@ -23,43 +23,43 @@
{% if termination_a.device %}
{# Device component #}
<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">
<input class="form-control" value="{{ termination_a.device.site.region }}" disabled />
</div>
</div>
<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">
<input class="form-control" value="{{ termination_a.device.site }}" disabled />
</div>
</div>
<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">
<input class="form-control" value="{{ termination_a.device.location|default:"None" }}" disabled />
</div>
</div>
<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">
<input class="form-control" value="{{ termination_a.device.rack|default:"None" }}" disabled />
</div>
</div>
<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">
<input class="form-control" value="{{ termination_a.device }}" disabled />
</div>
</div>
<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">
<input class="form-control" value="{{ termination_a|meta:"verbose_name"|capfirst }}" disabled />
</div>
</div>
<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">
<input class="form-control" value="{{ termination_a }}" disabled />
</div>
@ -94,7 +94,7 @@
</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>
</div>
<div class="col col-md-5">
@ -140,7 +140,7 @@
{% render_field form.termination_b_circuit %}
{% endif %}
<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">
<input class="form-control" value="{{ termination_b_type|capfirst }}" disabled />
</div>

View File

@ -34,7 +34,7 @@
</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="bulk-button-group">
{% if perms.dcim.change_interface %}

View File

@ -7,7 +7,7 @@
{% render_field form.label %}
{% render_field form.color %}
<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">
{{ form.length }}
</div>

View File

@ -30,7 +30,7 @@
{% render_field form.width %}
{% render_field form.u_height %}
<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">
{{ form.outer_width }}
<div class="form-text">Width</div>

View File

@ -6,14 +6,14 @@
<h5 class="text-center">Service</h5>
{% if obj.device %}
<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">
<input class="form-control" value="{{ obj.device }}" disabled />
</div>
</div>
{% else %}
<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">
<input class="form-control" value="{{ obj.virtual_machine }}" disabled />
</div>
@ -21,7 +21,7 @@
{% endif %}
{% render_field form.name %}
<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">
{{ form.protocol }}
</div>

View File

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