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

#6372: Template cleanup & fix form width

Browse Source
This commit is contained in:
checktheroads
2021-05-26 08:53:05 -07:00
parent e1eefd1165
commit b159def9b2
3 changed files with 214 additions and 180 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,77 +2,88 @@
{% load form_helpers %}
{% block form %}
{% render_errors form %}
<div class="field-group">
<h4 >Device</h4>
{% render_field form.name %}
{% render_field form.device_role %}
{% render_field form.tags %}
</div>
<div class="field-group">
<h4>Hardware</h4>
{% render_field form.manufacturer %}
{% render_field form.device_type %}
{% render_field form.serial %}
{% render_field form.asset_tag %}
</div>
<div class="field-group">
<h4>Location</h4>
{% render_field form.region %}
{% render_field form.site_group %}
{% render_field form.site %}
{% render_field form.location %}
{% 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>
{% render_errors form %}
<div class="field-group">
<h4>Device</h4>
{% render_field form.name %}
{% render_field form.device_role %}
{% render_field form.tags %}
</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="field-group">
<h4>Hardware</h4>
{% render_field form.manufacturer %}
{% render_field form.device_type %}
{% render_field form.serial %}
{% render_field form.asset_tag %}
</div>
{% else %}
{% render_field form.face %}
{% render_field form.position %}
{% endif %}
</div>
<div class="field-group">
<h4>Management</h4>
{% render_field form.status %}
{% render_field form.platform %}
{% if obj.pk %}
{% render_field form.primary_ip4 %}
{% render_field form.primary_ip6 %}
{% endif %}
</div>
<div class="field-group">
<h4>Virtualization</h4>
{% render_field form.cluster_group %}
{% render_field form.cluster %}
</div>
<div class="field-group">
<h4>Tenancy</h4>
{% render_field form.tenant_group %}
{% render_field form.tenant %}
</div>
<div class="field-group">
<h4>Location</h4>
{% render_field form.region %}
{% render_field form.site_group %}
{% render_field form.site %}
{% render_field form.location %}
{% 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>
<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>
{% else %}
{% render_field form.face %}
{% render_field form.position %}
{% endif %}
</div>
<div class="field-group">
<h4>Management</h4>
{% render_field form.status %}
{% render_field form.platform %}
{% if obj.pk %}
{% render_field form.primary_ip4 %}
{% render_field form.primary_ip6 %}
{% endif %}
</div>
<div class="field-group">
<h4>Virtualization</h4>
{% render_field form.cluster_group %}
{% render_field form.cluster %}
</div>
<div class="field-group">
<h4>Tenancy</h4>
{% render_field form.tenant_group %}
{% render_field form.tenant %}
</div>
{% if form.custom_fields %}
<div class="field-group">
<h4>Custom Fields</h4>
{% render_custom_fields form %}
</div>
{% endif %}
<div class="field-group">
<h4>Local Config Context Data</h4>
{% render_field form.local_context_data %}
</div>
<div class="field-group">
<h4>Comments</h4>
{% render_field form.comments %}
</div>
<div class="field-group">
<h4>Local Config Context Data</h4>
{% render_field form.local_context_data %}
</div>
<div class="field-group">
<h4>Comments</h4>
{% render_field form.comments %}
</div>
{% endblock %}

132
netbox/templates/generic/object_edit.html
View File

@ -6,73 +6,89 @@
{% block controls %}
{% if settings.DOCS_ROOT %}
<button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#docs_modal" title="Help">
<i class="mdi mdi-help-circle"></i>
</button>
<button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#docs_modal" title="Help">
<i class="mdi mdi-help-circle"></i>
</button>
{% endif %}
{% endblock controls %}
{% block content %}
<form action="" method="post" enctype="multipart/form-data">
{% csrf_token %}
{% for field in form.hidden_fields %}{{ field }}{% endfor %}
<div class="row">
<div class="col col-md-8 offset-md-2">
{% block tabs %}{% endblock %}
{% block form %}
{% if form.Meta.fieldsets %}
<form action="" method="post" enctype="multipart/form-data">
{% csrf_token %}
{% for field in form.hidden_fields %}{{ field }}{% endfor %}
{# Render grouped fields according to Form #}
{% for group, fields in form.Meta.fieldsets %}
<div class="field-group">
<h4 class="mb-3">{{ group }}</h4>
{% for name in fields %}{% render_field form|getfield:name %}{% endfor %}
</div>
{% endfor %}
{% if form.custom_fields %}
<div class="field-group">
<h4 class="mb-3">Custom Fields</h4>
{% render_custom_fields form %}
<div class="row">
<div class="col col-md-8 offset-md-2 col-lg-6 offset-lg-3">
{% block tabs %}{% endblock %}
{% block form %}
{% if form.Meta.fieldsets %}
{# Render grouped fields according to Form #}
{% for group, fields in form.Meta.fieldsets %}
<div class="field-group">
<h4>{{ group }}</h4>
{% for name in fields %}
{% render_field form|getfield:name %}
{% endfor %}
</div>
{% endfor %}
{% if form.custom_fields %}
<div class="field-group">
<h4>Custom Fields</h4>
{% render_custom_fields form %}
</div>
{% endif %}
{% if form.comments %}
<div class="field-group">
<h4>Comments</h4>
{% render_field form.comments %}
</div>
{% endif %}
{% else %}
{# Render all fields in a single group #}
<div class="field-group">
<h4>{{ obj_type|capfirst }}</h4>
{% block form_fields %}{% render_form form %}{% endblock %}
</div>
{% endif %}
{% endblock form %}
</div>
{% endif %}
{% if form.comments %}
<div class="field-group">
<h4 class="mb-3">Comments</h4>
{% render_field form.comments %}
</div>
{% endif %}
{% else %}
{# Render all fields in a single group #}
<div class="field-group">
<h4 class="mb-3">{{ obj_type|capfirst }}</h4>
{% block form_fields %}{% render_form form %}{% endblock %}
</div>
<div class="row my-3">
<div class="col col-md-8 offset-md-2 text-end">
{% block buttons %}
<a class="btn btn-outline-danger" href="{{ return_url }}">Cancel</a>
{% if obj.pk %}
<button type="submit" name="_update" class="btn btn-primary">
Save
</button>
{% else %}
<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>
{% endif %}
{% endblock buttons %}
</div>
{% endif %}
{% endblock form %}
</div>
</div>
<div class="row my-3">
<div class="col col-md-8 offset-md-2 text-end">
{% block buttons %}
<a class="btn btn-outline-danger" href="{{ return_url }}">Cancel</a>
{% if obj.pk %}
<button type="submit" name="_update" class="btn btn-primary">
Save
</button>
{% else %}
<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>
{% endif %}
{% endblock buttons %}
</div>
</div>
</form>
</form>
{% if obj and settings.DOCS_ROOT %}
{% include 'inc/modal.html' with name='docs' content=obj|get_docs %}
{% endif %}
{% endblock content %}

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

@ -33,83 +33,90 @@
</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="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>
</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 }}">
{# 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>
</div>
{% elif field|widget_type == 'fileinput' or field|widget_type == 'clearablefileinput' %}
<div class="input-group mb-3">
<input
class="form-control"
type="file"
name="{{ field.name }}"
placeholder="{{ field.placeholder }}"
id="id_{{ field.name }}"
accept="{{ field.field.widget.attrs.accept }}"
{% if field.is_required %}required{% endif %}
/>
<label for="{{ field.id_for_label }}" class="input-group-text">{{ field.label|bettertitle }}</label>
</div>
{% elif field|widget_type == 'selectmultiple' %}
<div class="row">
<label for="{{ field.id_for_label }}" class="form-label col col-md-3{% if field.field.required %} required{% endif %}">
{{ 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="col col-md-9">
{{ field }}
</div>
</div>
</div>
{% elif field|widget_type == 'fileinput' or field|widget_type == 'clearablefileinput' %}
<div class="input-group mb-3">
<input
class="form-control"
type="file"
name="{{ field.name }}"
placeholder="{{ field.placeholder }}"
id="id_{{ field.name }}"
accept="{{ field.field.widget.attrs.accept }}"
{% if field.is_required %}required{% endif %}
/>
<label for="{{ field.id_for_label }}" class="input-group-text">{{ field.label|bettertitle }}</label>
</div>
{% elif field|widget_type == 'selectmultiple' %}
<div class="row">
<label for="{{ field.id_for_label }}" class="form-label col col-md-3{% if field.field.required %} required{% endif %}">
{{ field.label }}
</label>
<div class="col col-md-9">
{{ field }}
</div>
</div>
{% else %}
<div class="form-floating mb-3">
{{ field }}
<label for="{{ field.id_for_label }}" {% if field.field.required %}class="required"{% endif %}>
{{ field.label }}
</label>
{% if field.help_text %}
<span class="form-text">{{ field.help_text|safe }}</span>
<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>
{% if bulk_nullable %}
{% endif %}
{% if bulk_nullable %}
<div class="form-check">
<input type="checkbox" class="form-check-input" name="_nullify" value="{{ field.name }}" />
<label class="form-check-label">Set Null</label>
</div>
{% if field.help_text %}
<span class="form-text">{{ field.help_text|safe }}</span>
<span class="form-text">{{ field.help_text|safe }}</span>
{% endif %}
{% endif %}
{% endif %}