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

View File

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

View File

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

View File

@ -10,60 +10,47 @@
<form action="" method="post" enctype="multipart/form-data"> <form action="" method="post" enctype="multipart/form-data">
{% csrf_token %} {% csrf_token %}
<div class="row"> <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"> <div class="field-group">
<h4>{{ component_type|title }}</h4> <h4>{{ component_type|title }}</h4>
{% if form.non_field_errors %} {% for field in form.hidden_fields %}
<div class="panel panel-danger"> {{ field }}
<div class="panel-heading"><strong>Errors</strong></div> {% endfor %}
<div class="panel-body"> {% for field in form.visible_fields %}
{{ form.non_field_errors }} {% if not form.custom_fields or field.name not in form.custom_fields %}
</div> {% render_field field %}
</div> {% endif %}
{% endif %} {% endfor %}
<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 %}
{% for field in form.visible_fields %}
{% if not form.custom_fields or field.name not in form.custom_fields %}
{% render_field field %}
{% endif %}
{% endfor %}
</div>
</div>
{% if form.custom_fields %} {% if form.custom_fields %}
<div class="panel panel-default"> <div class="field-group">
<div class="panel-heading"><strong>Custom Fields</strong></div> <h4>Custom Fields</h4>
<div class="panel-body"> {% render_custom_fields form %}
{% render_custom_fields form %}
</div>
</div> </div>
{% endif %} {% endif %}
</div> </div>
</div> </div>
</div> </div>
<div class="row my-3"> <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 %} {% block buttons %}
<a class="btn btn-outline-danger" href="{{ return_url }}">Cancel</a> <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"> {% if component_type == 'interface' and perms.ipam.add_ipaddress %}
Create & Assign IP Address <button type="submit" name="_assignip" class="btn btn-outline-success">
</button> Create & Assign IP Address
{% endif %} </button>
<button type="submit" name="_addanother" class="btn btn-outline-primary"> {% endif %}
Create & Add Another
</button> <button type="submit" name="_addanother" class="btn btn-outline-primary">
<button type="submit" name="_create" class="btn btn-primary"> Create & Add Another
Create </button>
</button>
{% endblock %} <button type="submit" name="_create" class="btn btn-primary">
Create
</button>
{% endblock %}
</div>
</div> </div>
</div>
</form> </form>
{% endblock %} {% endblock %}

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -63,7 +63,7 @@
</div> </div>
<div class="row my-3"> <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 %} {% block buttons %}
<a class="btn btn-outline-danger" href="{{ return_url }}">Cancel</a> <a class="btn btn-outline-danger" href="{{ return_url }}">Cancel</a>

View File

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

View File

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

View File

@ -33,40 +33,43 @@
</div> </div>
{% elif field|widget_type == 'slugwidget' %} {% elif field|widget_type == 'slugwidget' %}
<div class="form-floating mb-3"> <div class="row mb-3">
<div class="input-group"> <label class="col-sm-3 col-form-label{% if field.field.required %} required{% endif %}" for="{{ field.id_for_label }}">
{{ field }} {{ field.label }}
<label class="{% if field.field.required %}required{% endif %}" for="{{ field.id_for_label }}"> </label>
{{ field.label }} <div class="col">
</label> <div class="input-group">
<button id="reslug" type="button" title="Regenerate Slug" class="btn btn-outline-dark"> {{ field }}
<i class="mdi mdi-undo-variant"></i> <button id="reslug" type="button" title="Regenerate Slug" class="btn btn-outline-dark">
</button> <i class="mdi mdi-undo-variant"></i>
</button>
</div>
</div> </div>
</div> </div>
{% 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="form-floating mb-3"> <div class="row mb-3">
<div class="input-group"> <label class="col-sm-3 col-form-label{% if field.field.required %} required{% endif %}" for="{{ field.id_for_label }}">
{{ field }} {{ field.label }}
<label class="{% if field.field.required %}required{% endif %}" for="{{ field.id_for_label }}"> </label>
{{ field.label }} <div class="col">
</label> <div class="input-group">
<button type="button" class="btn btn-outline-gray dropdown-toggle" data-bs-toggle="dropdown"> {{ field }}
</button> <button type="button" class="btn btn-outline-dark dropdown-toggle" data-bs-toggle="dropdown"></button>
<ul class="dropdown-menu dropdown-menu-end"> <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="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> <li><a href="#" target="{{ field.id_for_label }}" data="100000" class="set_speed dropdown-item">100 Mbps</a></li>
<li><a href="#" target="{{ field.id_for_label }}" data="1000000" class="set_speed dropdown-item">1 Gbps</a></li> <li><a href="#" target="{{ field.id_for_label }}" data="1000000" class="set_speed dropdown-item">1 Gbps</a></li>
<li><a href="#" target="{{ field.id_for_label }}" data="10000000" class="set_speed dropdown-item">10 Gbps</a></li> <li><a href="#" target="{{ field.id_for_label }}" data="10000000" class="set_speed dropdown-item">10 Gbps</a></li>
<li><a href="#" target="{{ field.id_for_label }}" data="25000000" class="set_speed dropdown-item">25 Gbps</a></li> <li><a href="#" target="{{ field.id_for_label }}" data="25000000" class="set_speed dropdown-item">25 Gbps</a></li>
<li><a href="#" target="{{ field.id_for_label }}" data="40000000" class="set_speed dropdown-item">40 Gbps</a></li> <li><a href="#" target="{{ field.id_for_label }}" data="40000000" class="set_speed dropdown-item">40 Gbps</a></li>
<li><a href="#" target="{{ field.id_for_label }}" data="100000000" class="set_speed dropdown-item">100 Gbps</a></li> <li><a href="#" target="{{ field.id_for_label }}" data="100000000" class="set_speed dropdown-item">100 Gbps</a></li>
<li><hr class="dropdown-divider"/></li> <li><hr class="dropdown-divider"/></li>
<li><a href="#" target="{{ field.id_for_label }}" data="1544" class="set_speed dropdown-item">T1 (1.544 Mbps)</a></li> <li><a href="#" target="{{ field.id_for_label }}" data="1544" class="set_speed dropdown-item">T1 (1.544 Mbps)</a></li>
<li><a href="#" target="{{ field.id_for_label }}" data="2048" class="set_speed dropdown-item">E1 (2.048 Mbps)</a></li> <li><a href="#" target="{{ field.id_for_label }}" data="2048" class="set_speed dropdown-item">E1 (2.048 Mbps)</a></li>
</ul> </ul>
</div>
</div> </div>
</div> </div>
@ -95,17 +98,21 @@
</div> </div>
{% else %} {% else %}
<div class="form-floating mb-3"> <div class="row mb-3">
{{ field }} <label for="{{ field.id_for_label }}" class="col-sm-3 col-form-label{% if field.field.required %} required{% endif %}">
<label for="{{ field.id_for_label }}" {% if field.field.required %}class="required"{% endif %}>
{{ field.label }} {{ field.label }}
</label> </label>
<div class="col">
{% if field.help_text %} {{ field }}
<span class="form-text">{{ field.help_text|safe }}</span> {% if field.help_text %}
{% endif %} <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> </div>
{% endif %} {% endif %}

View File

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