mirror/netbox-community-netbox
1
0
Fork 0
mirror of https://github.com/netbox-community/netbox.git synced 2024-05-10 07:54:54 +00:00
Code Activity

#6372: Migrate away from form-floating field styles

Browse Source
This commit is contained in:
checktheroads
2021-07-20 00:16:13 -07:00
parent 2b9326d75e
commit 07f34c2675
20 changed files with 232 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
netbox/templates/circuits/circuittermination_edit.html
View File

@@ -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 %}

96
netbox/templates/dcim/cable_connect.html
View File

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

77
netbox/templates/dcim/device_component_add.html
View File

@@ -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 %}

8
netbox/templates/dcim/device_component_edit.html
View File

@@ -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 %}

26
netbox/templates/dcim/device_edit.html
View File

@@ -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>&nbsp;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>&nbsp;Remove
</a>
</div>
</div>
</div>
{% else %}
{% render_field form.face %}

20
netbox/templates/dcim/devicebay_populate.html
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">
<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>

8
netbox/templates/dcim/devicetype_component_add.html
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">
<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>

12
netbox/templates/dcim/inc/cable_form.html
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 %}

8
netbox/templates/dcim/interface_edit.html
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">
<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 %}

9
netbox/templates/extras/tag.html
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 %}

2
netbox/templates/generic/object_edit.html
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>

10
netbox/templates/inc/advanced_search.html
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">
{{ field }}
{{ field.label_tag }}
<div class="mb-3">
<label class="form-label" for="{{ field.id_for_label }}">{{ field.label }}</label>
{{ field }}
</div>
{% endif %}
</div>

16
netbox/templates/ipam/service_edit.html
View File

@@ -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 %}

83
netbox/templates/utilities/render_field.html
View File

@@ -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 %}

8
netbox/templates/virtualization/vminterface_edit.html
View File

@@ -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 %}