#6372: Template cleanup & fix form width

This commit is contained in:
checktheroads 2021-05-26 08:53:05 -07:00
parent 595770b293
commit 01369b33f3
3 changed files with 214 additions and 180 deletions

View File

@ -2,27 +2,31 @@
{% load form_helpers %} {% load form_helpers %}
{% block form %} {% block form %}
{% render_errors form %} {% render_errors form %}
<div class="field-group">
<h4 >Device</h4> <div class="field-group">
<h4>Device</h4>
{% render_field form.name %} {% render_field form.name %}
{% render_field form.device_role %} {% render_field form.device_role %}
{% render_field form.tags %} {% render_field form.tags %}
</div> </div>
<div class="field-group">
<div class="field-group">
<h4>Hardware</h4> <h4>Hardware</h4>
{% render_field form.manufacturer %} {% render_field form.manufacturer %}
{% render_field form.device_type %} {% render_field form.device_type %}
{% render_field form.serial %} {% render_field form.serial %}
{% render_field form.asset_tag %} {% render_field form.asset_tag %}
</div> </div>
<div class="field-group">
<div class="field-group">
<h4>Location</h4> <h4>Location</h4>
{% render_field form.region %} {% render_field form.region %}
{% render_field form.site_group %} {% render_field form.site_group %}
{% render_field form.site %} {% render_field form.site %}
{% render_field form.location %} {% render_field form.location %}
{% 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="form-floating mb-3">
<input class="form-control" value="{{ obj.parent_bay.device }}" disabled /> <input class="form-control" value="{{ obj.parent_bay.device }}" disabled />
@ -41,8 +45,9 @@
{% render_field form.face %} {% render_field form.face %}
{% render_field form.position %} {% render_field form.position %}
{% endif %} {% endif %}
</div> </div>
<div class="field-group">
<div class="field-group">
<h4>Management</h4> <h4>Management</h4>
{% render_field form.status %} {% render_field form.status %}
{% render_field form.platform %} {% render_field form.platform %}
@ -50,29 +55,35 @@
{% render_field form.primary_ip4 %} {% render_field form.primary_ip4 %}
{% render_field form.primary_ip6 %} {% render_field form.primary_ip6 %}
{% endif %} {% endif %}
</div> </div>
<div class="field-group">
<div class="field-group">
<h4>Virtualization</h4> <h4>Virtualization</h4>
{% render_field form.cluster_group %} {% render_field form.cluster_group %}
{% render_field form.cluster %} {% render_field form.cluster %}
</div> </div>
<div class="field-group">
<div class="field-group">
<h4>Tenancy</h4> <h4>Tenancy</h4>
{% render_field form.tenant_group %} {% render_field form.tenant_group %}
{% render_field form.tenant %} {% render_field form.tenant %}
</div> </div>
{% if form.custom_fields %} {% if form.custom_fields %}
<div class="field-group"> <div class="field-group">
<h4>Custom Fields</h4> <h4>Custom Fields</h4>
{% render_custom_fields form %} {% render_custom_fields form %}
</div> </div>
{% endif %} {% endif %}
<div class="field-group"> <div class="field-group">
<h4>Local Config Context Data</h4> <h4>Local Config Context Data</h4>
{% render_field form.local_context_data %} {% render_field form.local_context_data %}
</div> </div>
<div class="field-group">
<div class="field-group">
<h4>Comments</h4> <h4>Comments</h4>
{% render_field form.comments %} {% render_field form.comments %}
</div> </div>
{% endblock %} {% endblock %}

View File

@ -13,11 +13,12 @@
{% endblock controls %} {% endblock controls %}
{% block content %} {% block content %}
<form action="" method="post" enctype="multipart/form-data"> <form action="" method="post" enctype="multipart/form-data">
{% csrf_token %} {% csrf_token %}
{% for field in form.hidden_fields %}{{ field }}{% endfor %} {% for field in form.hidden_fields %}{{ field }}{% endfor %}
<div class="row"> <div class="row">
<div class="col col-md-8 offset-md-2"> <div class="col col-md-8 offset-md-2 col-lg-6 offset-lg-3">
{% block tabs %}{% endblock %} {% block tabs %}{% endblock %}
{% block form %} {% block form %}
{% if form.Meta.fieldsets %} {% if form.Meta.fieldsets %}
@ -25,41 +26,52 @@
{# Render grouped fields according to Form #} {# Render grouped fields according to Form #}
{% for group, fields in form.Meta.fieldsets %} {% for group, fields in form.Meta.fieldsets %}
<div class="field-group"> <div class="field-group">
<h4 class="mb-3">{{ group }}</h4>
{% for name in fields %}{% render_field form|getfield:name %}{% endfor %}
</div>
<h4>{{ group }}</h4>
{% for name in fields %}
{% render_field form|getfield:name %}
{% endfor %} {% endfor %}
</div>
{% endfor %}
{% if form.custom_fields %} {% if form.custom_fields %}
<div class="field-group"> <div class="field-group">
<h4 class="mb-3">Custom Fields</h4> <h4>Custom Fields</h4>
{% render_custom_fields form %} {% render_custom_fields form %}
</div> </div>
{% endif %} {% endif %}
{% if form.comments %} {% if form.comments %}
<div class="field-group"> <div class="field-group">
<h4 class="mb-3">Comments</h4> <h4>Comments</h4>
{% render_field form.comments %} {% render_field form.comments %}
</div> </div>
{% endif %} {% endif %}
{% else %} {% else %}
{# Render all fields in a single group #} {# Render all fields in a single group #}
<div class="field-group"> <div class="field-group">
<h4 class="mb-3">{{ obj_type|capfirst }}</h4> <h4>{{ obj_type|capfirst }}</h4>
{% block form_fields %}{% render_form form %}{% endblock %} {% block form_fields %}{% render_form form %}{% endblock %}
</div> </div>
{% endif %} {% endif %}
{% endblock form %} {% endblock form %}
</div> </div>
</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 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 obj.pk %} {% if obj.pk %}
<button type="submit" name="_update" class="btn btn-primary"> <button type="submit" name="_update" class="btn btn-primary">
Save Save
</button> </button>
{% else %} {% else %}
<button type="submit" name="_addanother" class="btn btn-outline-primary"> <button type="submit" name="_addanother" class="btn btn-outline-primary">
Create & Add Another Create & Add Another
@ -67,12 +79,16 @@
<button type="submit" name="_create" class="btn btn-primary"> <button type="submit" name="_create" class="btn btn-primary">
Create Create
</button> </button>
{% endif %} {% endif %}
{% endblock buttons %} {% endblock buttons %}
</div> </div>
</div> </div>
</form> </form>
{% if obj and settings.DOCS_ROOT %} {% if obj and settings.DOCS_ROOT %}
{% include 'inc/modal.html' with name='docs' content=obj|get_docs %} {% include 'inc/modal.html' with name='docs' content=obj|get_docs %}
{% endif %} {% endif %}
{% endblock content %} {% endblock content %}

View File

@ -33,7 +33,7 @@
</div> </div>
{% elif field|widget_type == 'slugwidget' %} {% elif field|widget_type == 'slugwidget' %}
<div class="form-floating mb-3"> <div class="form-floating mb-3">
<div class="input-group"> <div class="input-group">
{{ field }} {{ field }}
<label class="{% if field.field.required %}required{% endif %}" for="{{ field.id_for_label }}"> <label class="{% if field.field.required %}required{% endif %}" for="{{ field.id_for_label }}">
@ -43,11 +43,11 @@
<i class="mdi mdi-undo-variant"></i> <i class="mdi mdi-undo-variant"></i>
</button> </button>
</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="form-floating mb-3">
<div class="input-group"> <div class="input-group">
{{ field }} {{ field }}
<label class="{% if field.field.required %}required{% endif %}" for="{{ field.id_for_label }}"> <label class="{% if field.field.required %}required{% endif %}" for="{{ field.id_for_label }}">
@ -68,9 +68,10 @@
<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>
{% elif field|widget_type == 'fileinput' or field|widget_type == 'clearablefileinput' %} {% elif field|widget_type == 'fileinput' or field|widget_type == 'clearablefileinput' %}
<div class="input-group mb-3"> <div class="input-group mb-3">
<input <input
class="form-control" class="form-control"
type="file" type="file"
@ -81,35 +82,41 @@
{% if field.is_required %}required{% endif %} {% if field.is_required %}required{% endif %}
/> />
<label for="{{ field.id_for_label }}" class="input-group-text">{{ field.label|bettertitle }}</label> <label for="{{ field.id_for_label }}" class="input-group-text">{{ field.label|bettertitle }}</label>
</div> </div>
{% elif field|widget_type == 'selectmultiple' %} {% elif field|widget_type == 'selectmultiple' %}
<div class="row"> <div class="row">
<label for="{{ field.id_for_label }}" class="form-label col col-md-3{% if field.field.required %} required{% endif %}"> <label for="{{ field.id_for_label }}" class="form-label col col-md-3{% if field.field.required %} required{% endif %}">
{{ field.label }} {{ field.label }}
</label> </label>
<div class="col col-md-9"> <div class="col col-md-9">
{{ field }} {{ field }}
</div> </div>
</div> </div>
{% else %} {% else %}
<div class="form-floating mb-3"> <div class="form-floating mb-3">
{{ field }} {{ field }}
<label for="{{ field.id_for_label }}" {% if field.field.required %}class="required"{% endif %}> <label for="{{ field.id_for_label }}" {% if field.field.required %}class="required"{% endif %}>
{{ field.label }} {{ field.label }}
</label> </label>
{% if field.help_text %} {% if field.help_text %}
<span class="form-text">{{ field.help_text|safe }}</span> <span class="form-text">{{ field.help_text|safe }}</span>
{% endif %} {% 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>
{% if bulk_nullable %}
{% endif %}
{% if bulk_nullable %}
<div class="form-check"> <div class="form-check">
<input type="checkbox" class="form-check-input" name="_nullify" value="{{ field.name }}" /> <input type="checkbox" class="form-check-input" name="_nullify" value="{{ field.name }}" />
<label class="form-check-label">Set Null</label> <label class="form-check-label">Set Null</label>
</div> </div>
{% if field.help_text %} {% 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 %}
{% endif %} {% endif %}