#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 25 additions and 23 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

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