#6372: Migrate away from form-floating field styles

This commit is contained in:
checktheroads 2021-07-20 00:16:13 -07:00
parent 2b9326d75e
commit 07f34c2675
20 changed files with 230 additions and 192 deletions

Binary file not shown.

File diff suppressed because one or more lines are too long

Binary file not shown.

File diff suppressed because one or more lines are too long

View File

@ -14,6 +14,7 @@ $spacing-m: $input-padding-x;
$spacing-s: $input-padding-x;
:root {
// Light Mode Variables.
--nbx-select-content-bg: #{$form-select-bg};
--nbx-select-option-selected-bg: #{$gray-300};
--nbx-select-option-hover-bg: #{$blue};
@ -21,6 +22,7 @@ $spacing-s: $input-padding-x;
--nbx-select-placeholder-color: #{$gray-600};
--nbx-select-value-color: #{$white};
& body[data-netbox-color-mode='dark'] {
// Dark Mode Variables.
--nbx-select-content-bg: #{$gray-900};
--nbx-select-option-selected-bg: #{$gray-500};
--nbx-select-option-hover-bg: #{$blue-200};
@ -30,11 +32,6 @@ $spacing-s: $input-padding-x;
}
}
div.form-floating div.ss-main div.ss-single-selected,
div.form-floating div.ss-main div.ss-multi-selected {
min-height: $form-floating-height;
}
@import './node_modules/slim-select/src/slim-select/slimselect.scss';
.ss-main {
@ -52,6 +49,7 @@ div.form-floating div.ss-main div.ss-multi-selected {
.ss-single-selected,
.ss-multi-selected {
padding: $form-select-padding-y $input-padding-x $form-select-padding-y $form-select-padding-x;
&[disabled] {
color: $form-select-disabled-color;
background-color: $form-select-disabled-bg;
@ -62,7 +60,7 @@ div.form-floating div.ss-main div.ss-multi-selected {
div.ss-multi-selected .ss-values .ss-disabled,
div.ss-single-selected span.placeholder .ss-disabled {
color: var(--nbx-select-placeholder-color);
font-size: $font-size-xs;
font-size: $form-select-font-size;
}
.ss-single-selected {
@ -87,7 +85,6 @@ div.form-floating div.ss-main div.ss-multi-selected {
background-color: $form-select-bg;
.ss-values {
padding-top: $spacer * 2 !important;
.ss-disabled {
padding: 4px 0px;
}

View File

@ -7,17 +7,23 @@
{% block form %}
<div class="field-group">
<h4 class="mb-3">Termination</h4>
<div class="form-floating mb-3">
<div class="row mb-3">
<label class="col-sm-3 col-form-label">Provider</label>
<div class="col">
<input class="form-control" value="{{ obj.circuit.provider }}" disabled />
<label>Provider</label>
</div>
<div class="form-floating mb-3">
</div>
<div class="row mb-3">
<label class="col-sm-3 col-form-label">Circuit</label>
<div class="col">
<input class="form-control" value="{{ obj.circuit.cid }}" disabled />
<label>Circuit</label>
</div>
<div class="form-floating mb-3">
</div>
<div class="row mb-3">
<label class="col-sm-3 col-form-label">Termination</label>
<div class="col">
<input class="form-control" value="{{ form.term_side.value }}" disabled />
<label>Termination</label>
</div>
</div>
{% render_field form.mark_connected %}
{% with providernetwork_tab_active=form.initial.provider_network %}

View File

@ -22,51 +22,73 @@
<div class="card-body">
{% if termination_a.device %}
{# Device component #}
<div class="form-floating mb-3">
<div class="row mb-3">
<label class="col-sm-3 col-form-label">Region</label>
<div class="col">
<input class="form-control" value="{{ termination_a.device.site.region }}" disabled />
<label>Region</label>
</div>
<div class="form-floating mb-3">
</div>
<div class="row mb-3">
<label class="col-sm-3 col-form-label">Site</label>
<div class="col">
<input class="form-control" value="{{ termination_a.device.site }}" disabled />
<label>Site</label>
</div>
<div class="form-floating mb-3">
</div>
<div class="row mb-3">
<label class="col-sm-3 col-form-label">Location</label>
<div class="col">
<input class="form-control" value="{{ termination_a.device.location|default:"None" }}" disabled />
<label>Location</label>
</div>
<div class="form-floating mb-3">
</div>
<div class="row mb-3">
<label class="col-sm-3 col-form-label">Rack</label>
<div class="col">
<input class="form-control" value="{{ termination_a.device.rack|default:"None" }}" disabled />
<label>Rack</label>
</div>
<div class="form-floating mb-3">
</div>
<div class="row mb-3">
<label class="col-sm-3 col-form-label">Device</label>
<div class="col">
<input class="form-control" value="{{ termination_a.device }}" disabled />
<label>Device</label>
</div>
<div class="form-floating mb-3">
</div>
<div class="row mb-3">
<label class="col-sm-3 col-form-label">Type</label>
<div class="col">
<input class="form-control" value="{{ termination_a|meta:"verbose_name"|capfirst }}" disabled />
<label>Type</label>
</div>
<div class="form-floating mb-3">
</div>
<div class="row mb-3">
<label class="col-sm-3 col-form-label">Name</label>
<div class="col">
<input class="form-control" value="{{ termination_a }}" disabled />
<label>Name</label>
</div>
</div>
{% else %}
{# Circuit termination #}
<div class="form-floating mb-3">
<div class="row mb-3">
<label class="col-sm-3 col-form-label">Site</label>
<div class="col">
<input class="form-control" value="{{ termination_a.site }}" disabled />
<label>Site</label>
</div>
<div class="form-floating mb-3">
</div>
<div class="row mb-3">
<label class="col-sm-3 col-form-label">Provider</label>
<div class="col">
<input class="form-control" value="{{ termination_a.circuit.provider }}" disabled />
<label>Provider</label>
</div>
<div class="form-floating mb-3">
</div>
<div class="row mb-3">
<label class="col-sm-3 col-form-label">Circuit</label>
<div class="col">
<input class="form-control" value="{{ termination_a.circuit.cid }}" disabled />
<label>Circuit</label>
</div>
<div class="form-floating mb-3">
</div>
<div class="row mb-3">
<label class="col-sm-3 col-form-label">Side</label>
<div class="col">
<input class="form-control" value="{{ termination_a.term_side }}" disabled />
<label>Side</label>
</div>
</div>
{% endif %}
</div>
@ -117,9 +139,11 @@
{% if 'termination_b_circuit' in form.fields %}
{% render_field form.termination_b_circuit %}
{% endif %}
<div class="form-floating mb-3">
<div class="row mb-3">
<label class="col-sm-3 col-form-label">Type</label>
<div class="col">
<input class="form-control" value="{{ termination_b_type|capfirst }}" disabled />
<label>Type</label>
</div>
</div>
{% render_field form.termination_b_id %}
</div>

View File

@ -10,22 +10,9 @@
<form action="" method="post" enctype="multipart/form-data">
{% csrf_token %}
<div class="row">
<div class="col col-md-8">
<div class="col col-md-8 offset-md-2 col-lg-6 offset-lg-3">
<div class="field-group">
<h4>{{ component_type|title }}</h4>
{% if form.non_field_errors %}
<div class="panel panel-danger">
<div class="panel-heading"><strong>Errors</strong></div>
<div class="panel-body">
{{ form.non_field_errors }}
</div>
</div>
{% endif %}
<div class="panel panel-default">
<div class="panel-heading">
<strong>{{ component_type|bettertitle }}</strong>
</div>
<div class="panel-body">
{% for field in form.hidden_fields %}
{{ field }}
{% endfor %}
@ -34,34 +21,34 @@
{% render_field field %}
{% endif %}
{% endfor %}
</div>
</div>
{% if form.custom_fields %}
<div class="panel panel-default">
<div class="panel-heading"><strong>Custom Fields</strong></div>
<div class="panel-body">
<div class="field-group">
<h4>Custom Fields</h4>
{% render_custom_fields form %}
</div>
</div>
{% endif %}
</div>
</div>
</div>
<div class="row my-3">
<div class="col col-md-8 text-end">
<div class="col col-md-8 offset-md-2 col-lg-6 offset-lg-3 text-end">
{% block buttons %}
<a class="btn btn-outline-danger" href="{{ return_url }}">Cancel</a>
{% if component_type == 'interface' and perms.ipam.add_ipaddress %}
<button type="submit" name="_assignip" class="btn btn-outline-success">
Create & Assign IP Address
</button>
{% endif %}
<button type="submit" name="_addanother" class="btn btn-outline-primary">
Create & Add Another
</button>
<button type="submit" name="_create" class="btn btn-primary">
Create
</button>
{% endblock %}
</div>
</div>

View File

@ -3,9 +3,11 @@
{% block form_fields %}
{% if form.instance.device %}
<div class="form-floating mb-3">
<div class="row mb-3">
<label class="col-sm-3 col-form-label">Device</label>
<div class="col">
<input class="form-control" value="{{ form.instance.device }}" disabled />
<label>Device</label>
</div>
</div>
{% endif %}
{% render_form form %}

View File

@ -28,19 +28,23 @@
{% render_field form.rack %}
{% if obj.device_type.is_child_device and obj.parent_bay %}
<div class="form-floating mb-3">
<div class="row mb-3">
<label class="col-sm-3 col-form-label">Parent Device</label>
<div class="col">
<input class="form-control" value="{{ obj.parent_bay.device }}" disabled />
<label>Parent Device</label>
</div>
<div class="form-floating mb-3">
</div>
<div class="row mb-3">
<label class="col-sm-3 col-form-label">Parent Bay</label>
<div class="col">
<div class="input-group">
<input class="form-control" value="{{ obj.parent_bay.name }}" disabled />
<label>Parent Bay</label>
<a href="{% url 'dcim:devicebay_depopulate' pk=obj.parent_bay.pk %}" title="Regenerate Slug" class="btn btn-danger d-inline-flex align-items-center">
<i class="mdi mdi-close-thick"></i>&nbsp;Remove
</a>
</div>
</div>
</div>
{% else %}
{% render_field form.face %}
{% render_field form.position %}

View File

@ -9,15 +9,19 @@
<div class="row mb-3">
<div class="col col-md-6 offset-md-3">
<div class="card">
<div class="card-header">{% block title %}Populate {{ device_bay }}{% endblock %}</div>
<h5 class="card-header">{% block title %}Populate {{ device_bay }}{% endblock %}</h5>
<div class="card-body">
<div class="form-floating mb-3">
<div class="row mb-3">
<label class="col-sm-3 col-form-label">Parent Device</label>
<div class="col">
<input class="form-control" value="{{ device_bay.device }}" disabled />
<label>Parent Device</label>
</div>
<div class="form-floating mb-3">
</div>
<div class="row mb-3">
<label class="col-sm-3 col-form-label">Bay</label>
<div class="col">
<input class="form-control" value="{{ device_bay }}" disabled />
<label>Bay</label>
</div>
</div>
{% render_form form %}
</div>
@ -25,7 +29,7 @@
</div>
</div>
<div class="row">
<div class="col col-md-6 text-end">
<div class="col col-md-6 offset-md-3 text-end">
<a href="{{ return_url }}" class="btn btn-outline-danger">Cancel</a>
<button type="submit" name="_update" class="btn btn-primary">Save</button>
</div>

View File

@ -12,9 +12,11 @@
<div class="col col-md-6">
<div class="field-group mb-3">
<h4>New {{ component_type }}</h4>
<div class="form-floating mb-3">
<div class="row mb-3">
<label class="col-sm-3 col-form-label">Device Type</label>
<div class="col">
<input class="form-control" value="{{ parent }}" disabled />
<label>Device Type</label>
</div>
</div>
{% render_form form %}
</div>

View File

@ -6,13 +6,15 @@
{% render_field form.type %}
{% render_field form.label %}
{% render_field form.color %}
<div class="row">
<div class="col">
{% render_field form.length %}
<div class="row mb-3">
<label class="col-sm-3 col-form-label">{{ form.length.label }}</label>
<div class="col-md-5">
{{ form.length }}
</div>
<div class="col">
{% render_field form.length_unit %}
<div class="col-md-4">
{{ form.length_unit }}
</div>
<div class="invalid-feedback"></div>
</div>
{% render_field form.tags %}
{% if form.custom_fields %}

View File

@ -5,9 +5,11 @@
<div class="field-group">
<h4 class="mb-3">Interface</h4>
{% if form.instance.device %}
<div class="form-floating mb-3">
<div class="row mb-3">
<label class="col-sm-3 col-form-label required" for="id_device">Device</label>
<div class="col">
<input class="form-control" value="{{ form.instance.device }}" disabled />
<label class="form-label required" for="id_device">Device</label>
</div>
</div>
{% endif %}
{% render_field form.name %}

View File

@ -3,8 +3,8 @@
{% load plugins %}
{% block breadcrumbs %}
<li><a href="{% url 'extras:tag_list' %}">Tags</a></li>
<li>{{ object }}</li>
<li class="breadcrumb-item"><a href="{% url 'extras:tag_list' %}">Tags</a></li>
<li class="breadcrumb-item">{{ object }}</li>
{% endblock %}
{% block content %}
@ -55,10 +55,5 @@
{% include 'inc/paginator.html' with paginator=items_table.paginator page=items_table.page %}
</div>
</div>
<div class="row">
<div class="col col-md-12">
{% include 'inc/paginator.html' with paginator=taggeditem_table.paginator page=taggeditem_table.page %}
</div>
</div>
{% plugin_full_width_page object %}
{% endblock %}

View File

@ -63,7 +63,7 @@
</div>
<div class="row my-3">
<div class="col col-md-8 offset-md-2 text-end">
<div class="col col-md-8 offset-md-2 col-lg-6 offset-lg-3 text-end">
{% block buttons %}
<a class="btn btn-outline-danger" href="{{ return_url }}">Cancel</a>

View File

@ -23,9 +23,9 @@
{{ field }}
</div>
{% else %}
<div class="form-floating mb-3 mx-3">
<div class="mb-3 mx-3">
<label class="form-label" for="{{ field.id_for_label }}">{{ field.label }}</label>
{{ field }}
{{ field.label_tag }}
</div>
{% endif %}
{% endwith %}
@ -41,9 +41,9 @@
{{ field }}
</div>
{% else %}
<div class="form-floating mb-3">
<div class="mb-3">
<label class="form-label" for="{{ field.id_for_label }}">{{ field.label }}</label>
{{ field }}
{{ field.label_tag }}
</div>
{% endif %}
</div>

View File

@ -5,14 +5,18 @@
<div class="field-group">
<h4>Service</h4>
{% if obj.device %}
<div class="form-floating mb-3">
<div class="row mb-3">
<label class="col-sm-3 col-form-label">Device</label>
<div class="col">
<input class="form-control" value="{{ obj.device }}" disabled />
<label class="form-label">Device</label>
</div>
</div>
{% else %}
<div class="form-floating mb-3">
<div class="row mb-3">
<label class="col-sm-3 col-form-label">Virtual Machine</label>
<div class="col">
<input class="form-control" value="{{ obj.virtual_machine }}" disabled />
<label class="form-label">Virtual Machine</label>
</div>
</div>
{% endif %}
{% render_field form.name %}

View File

@ -33,28 +33,30 @@
</div>
{% elif field|widget_type == 'slugwidget' %}
<div class="form-floating mb-3">
<div class="input-group">
{{ field }}
<label class="{% if field.field.required %}required{% endif %}" for="{{ field.id_for_label }}">
<div class="row mb-3">
<label class="col-sm-3 col-form-label{% if field.field.required %} required{% endif %}" for="{{ field.id_for_label }}">
{{ field.label }}
</label>
<div class="col">
<div class="input-group">
{{ field }}
<button id="reslug" type="button" title="Regenerate Slug" class="btn btn-outline-dark">
<i class="mdi mdi-undo-variant"></i>
</button>
</div>
</div>
</div>
{% elif field|widget_type == 'selectspeedwidget' %}
{# This is outside the widget because bootstrap requires a specific order for border-radius purposes. #}
<div class="form-floating mb-3">
<div class="input-group">
{{ field }}
<label class="{% if field.field.required %}required{% endif %}" for="{{ field.id_for_label }}">
<div class="row mb-3">
<label class="col-sm-3 col-form-label{% if field.field.required %} required{% endif %}" for="{{ field.id_for_label }}">
{{ field.label }}
</label>
<button type="button" class="btn btn-outline-gray dropdown-toggle" data-bs-toggle="dropdown">
</button>
<div class="col">
<div class="input-group">
{{ field }}
<button type="button" class="btn btn-outline-dark dropdown-toggle" data-bs-toggle="dropdown"></button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a href="#" target="{{ field.id_for_label }}" data="10000" class="set_speed dropdown-item">10 Mbps</a></li>
<li><a href="#" target="{{ field.id_for_label }}" data="100000" class="set_speed dropdown-item">100 Mbps</a></li>
@ -69,6 +71,7 @@
</ul>
</div>
</div>
</div>
{% elif field|widget_type == 'fileinput' or field|widget_type == 'clearablefileinput' %}
<div class="input-group mb-3">
@ -95,17 +98,21 @@
</div>
{% else %}
<div class="form-floating mb-3">
{{ field }}
<label for="{{ field.id_for_label }}" {% if field.field.required %}class="required"{% endif %}>
<div class="row mb-3">
<label for="{{ field.id_for_label }}" class="col-sm-3 col-form-label{% if field.field.required %} required{% endif %}">
{{ field.label }}
</label>
<div class="col">
{{ field }}
{% if field.help_text %}
<span class="form-text">{{ field.help_text|safe }}</span>
{% endif %}
<div class="invalid-feedback">{% if field.field.required %}<strong>{{ field.label }}</strong> field is required.{% endif %}</div>
<div class="invalid-feedback">
{% if field.field.required %}
<strong>{{ field.label }}</strong> field is required.
{% endif %}
</div>
</div>
</div>
{% endif %}

View File

@ -5,9 +5,11 @@
<div class="field-group">
<h4>Interface</h4>
{% if form.instance.virtual_machine %}
<div class="form-floating mb-3">
<div class="row mb-3">
<label class="col-sm-3 col-form-label required" for="id_device">Virtual Machine</label>
<div class="col">
<input class="form-control" value="{{ form.instance.virtual_machine }}" disabled />
<label class="form-label required" for="id_device">Virtual Machine</label>
</div>
</div>
{% endif %}
{% render_field form.name %}