mirror of
https://github.com/netbox-community/netbox.git
synced 2025-07-17 20:46:30 -06:00
#6372: Migrate away from form-floating field styles
This commit is contained in:
checktheroads
parent
2b9326d75e
commit
07f34c2675
BIN
netbox/project-static/dist/netbox-dark.css
vendored
BIN
netbox/project-static/dist/netbox-dark.css
vendored
Binary file not shown.
File diff suppressed because one or more lines are too long
BIN
netbox/project-static/dist/netbox-light.css
vendored
BIN
netbox/project-static/dist/netbox-light.css
vendored
Binary file not shown.
File diff suppressed because one or more lines are too long
@ -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;
|
||||
}
|
||||
|
||||
@ -7,17 +7,23 @@
|
||||
{% block form %}
|
||||
<div class="field-group">
|
||||
<h4 class="mb-3">Termination</h4>
|
||||
<div class="form-floating mb-3">
|
||||
<input class="form-control" value="{{ obj.circuit.provider }}" disabled />
|
||||
<label>Provider</label>
|
||||
<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 />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-floating mb-3">
|
||||
<input class="form-control" value="{{ obj.circuit.cid }}" disabled />
|
||||
<label>Circuit</label>
|
||||
<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 />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-floating mb-3">
|
||||
<input class="form-control" value="{{ form.term_side.value }}" disabled />
|
||||
<label>Termination</label>
|
||||
<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 />
|
||||
</div>
|
||||
</div>
|
||||
{% render_field form.mark_connected %}
|
||||
{% with providernetwork_tab_active=form.initial.provider_network %}
|
||||
|
||||
@ -22,51 +22,73 @@
|
||||
<div class="card-body">
|
||||
{% if termination_a.device %}
|
||||
{# Device component #}
|
||||
<div class="form-floating mb-3">
|
||||
<input class="form-control" value="{{ termination_a.device.site.region }}" disabled />
|
||||
<label>Region</label>
|
||||
<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 />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-floating mb-3">
|
||||
<input class="form-control" value="{{ termination_a.device.site }}" disabled />
|
||||
<label>Site</label>
|
||||
<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 />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-floating mb-3">
|
||||
<input class="form-control" value="{{ termination_a.device.location|default:"None" }}" disabled />
|
||||
<label>Location</label>
|
||||
<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 />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-floating mb-3">
|
||||
<input class="form-control" value="{{ termination_a.device.rack|default:"None" }}" disabled />
|
||||
<label>Rack</label>
|
||||
<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 />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-floating mb-3">
|
||||
<input class="form-control" value="{{ termination_a.device }}" disabled />
|
||||
<label>Device</label>
|
||||
<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 />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-floating mb-3">
|
||||
<input class="form-control" value="{{ termination_a|meta:"verbose_name"|capfirst }}" disabled />
|
||||
<label>Type</label>
|
||||
<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 />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-floating mb-3">
|
||||
<input class="form-control" value="{{ termination_a }}" disabled />
|
||||
<label>Name</label>
|
||||
<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 />
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
{# Circuit termination #}
|
||||
<div class="form-floating mb-3">
|
||||
<input class="form-control" value="{{ termination_a.site }}" disabled />
|
||||
<label>Site</label>
|
||||
<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 />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-floating mb-3">
|
||||
<input class="form-control" value="{{ termination_a.circuit.provider }}" disabled />
|
||||
<label>Provider</label>
|
||||
<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 />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-floating mb-3">
|
||||
<input class="form-control" value="{{ termination_a.circuit.cid }}" disabled />
|
||||
<label>Circuit</label>
|
||||
<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 />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-floating mb-3">
|
||||
<input class="form-control" value="{{ termination_a.term_side }}" disabled />
|
||||
<label>Side</label>
|
||||
<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 />
|
||||
</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">
|
||||
<input class="form-control" value="{{ termination_b_type|capfirst }}" disabled />
|
||||
<label>Type</label>
|
||||
<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 />
|
||||
</div>
|
||||
</div>
|
||||
{% render_field form.termination_b_id %}
|
||||
</div>
|
||||
|
||||
@ -10,60 +10,47 @@
|
||||
<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 %}
|
||||
{% 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>
|
||||
{% 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 %}
|
||||
{% if form.custom_fields %}
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading"><strong>Custom Fields</strong></div>
|
||||
<div class="panel-body">
|
||||
{% render_custom_fields form %}
|
||||
</div>
|
||||
<div class="field-group">
|
||||
<h4>Custom Fields</h4>
|
||||
{% render_custom_fields form %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-3">
|
||||
<div class="col col-md-8 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 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>
|
||||
</div>
|
||||
</form>
|
||||
{% endblock %}
|
||||
|
||||
@ -3,9 +3,11 @@
|
||||
|
||||
{% block form_fields %}
|
||||
{% if form.instance.device %}
|
||||
<div class="form-floating mb-3">
|
||||
<input class="form-control" value="{{ form.instance.device }}" disabled />
|
||||
<label>Device</label>
|
||||
<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 />
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% render_form form %}
|
||||
|
||||
@ -28,18 +28,22 @@
|
||||
{% render_field form.rack %}
|
||||
|
||||
{% if obj.device_type.is_child_device and obj.parent_bay %}
|
||||
<div class="form-floating mb-3">
|
||||
<input class="form-control" value="{{ obj.parent_bay.device }}" disabled />
|
||||
<label>Parent Device</label>
|
||||
<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 />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-floating mb-3">
|
||||
<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> Remove
|
||||
</a>
|
||||
</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 />
|
||||
<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> Remove
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
{% render_field form.face %}
|
||||
|
||||
@ -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">
|
||||
<input class="form-control" value="{{ device_bay.device }}" disabled />
|
||||
<label>Parent Device</label>
|
||||
<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 />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-floating mb-3">
|
||||
<input class="form-control" value="{{ device_bay }}" disabled />
|
||||
<label>Bay</label>
|
||||
<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 />
|
||||
</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>
|
||||
|
||||
@ -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">
|
||||
<input class="form-control" value="{{ parent }}" disabled />
|
||||
<label>Device Type</label>
|
||||
<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 />
|
||||
</div>
|
||||
</div>
|
||||
{% render_form form %}
|
||||
</div>
|
||||
|
||||
@ -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 %}
|
||||
|
||||
@ -5,9 +5,11 @@
|
||||
<div class="field-group">
|
||||
<h4 class="mb-3">Interface</h4>
|
||||
{% if form.instance.device %}
|
||||
<div class="form-floating mb-3">
|
||||
<input class="form-control" value="{{ form.instance.device }}" disabled />
|
||||
<label class="form-label required" for="id_device">Device</label>
|
||||
<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 />
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% render_field form.name %}
|
||||
|
||||
@ -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 %}
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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">
|
||||
{{ field }}
|
||||
{{ field.label_tag }}
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="{{ field.id_for_label }}">{{ field.label }}</label>
|
||||
{{ field }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
@ -5,14 +5,18 @@
|
||||
<div class="field-group">
|
||||
<h4>Service</h4>
|
||||
{% if obj.device %}
|
||||
<div class="form-floating mb-3">
|
||||
<input class="form-control" value="{{ obj.device }}" disabled />
|
||||
<label class="form-label">Device</label>
|
||||
<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 />
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="form-floating mb-3">
|
||||
<input class="form-control" value="{{ obj.virtual_machine }}" disabled />
|
||||
<label class="form-label">Virtual Machine</label>
|
||||
<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 />
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% render_field form.name %}
|
||||
|
||||
@ -33,40 +33,43 @@
|
||||
</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 }}">
|
||||
{{ field.label }}
|
||||
</label>
|
||||
<button id="reslug" type="button" title="Regenerate Slug" class="btn btn-outline-dark">
|
||||
<i class="mdi mdi-undo-variant"></i>
|
||||
</button>
|
||||
<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 }}">
|
||||
{{ field.label }}
|
||||
</label>
|
||||
<button type="button" class="btn btn-outline-gray 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>
|
||||
<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="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="100000000" class="set_speed dropdown-item">100 Gbps</a></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="2048" class="set_speed dropdown-item">E1 (2.048 Mbps)</a></li>
|
||||
</ul>
|
||||
<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 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>
|
||||
<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="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="100000000" class="set_speed dropdown-item">100 Gbps</a></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="2048" class="set_speed dropdown-item">E1 (2.048 Mbps)</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -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>
|
||||
|
||||
{% 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="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>
|
||||
</div>
|
||||
|
||||
{% endif %}
|
||||
|
||||
@ -5,9 +5,11 @@
|
||||
<div class="field-group">
|
||||
<h4>Interface</h4>
|
||||
{% if form.instance.virtual_machine %}
|
||||
<div class="form-floating mb-3">
|
||||
<input class="form-control" value="{{ form.instance.virtual_machine }}" disabled />
|
||||
<label class="form-label required" for="id_device">Virtual Machine</label>
|
||||
<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 />
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% render_field form.name %}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user