NeoAnd/netbox
1
0
Fork 0
mirror of https://github.com/netbox-community/netbox.git synced 2025-07-27 19:08:38 -06:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

#6372: Template cleanup & fix form width

Browse Source
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
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 %} {% load form_helpers %}
{% block form %} {% block form %}
{% render_errors form %} {% render_errors form %}
<div class="field-group">
<h4 >Device</h4> <div class="field-group">
{% render_field form.name %} <h4>Device</h4>
{% render_field form.device_role %} {% render_field form.name %}
{% render_field form.tags %} {% render_field form.device_role %}
</div> {% render_field form.tags %}
<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>
</div> </div>
<div class="form-floating mb-3">
<div class="input-group"> <div class="field-group">
<input class="form-control" value="{{ obj.parent_bay.name }}" disabled /> <h4>Hardware</h4>
<label>Parent Bay</label> {% render_field form.manufacturer %}
<a href="{% url 'dcim:devicebay_depopulate' pk=obj.parent_bay.pk %}" title="Regenerate Slug" class="btn btn-danger d-inline-flex align-items-center"> {% render_field form.device_type %}
<i class="mdi mdi-close-thick"></i>&nbsp;Remove {% render_field form.serial %}
</a> {% render_field form.asset_tag %}
</div>
</div> </div>
{% else %}
{% render_field form.face %} <div class="field-group">
{% render_field form.position %} <h4>Location</h4>
{% endif %} {% render_field form.region %}
</div> {% render_field form.site_group %}
<div class="field-group"> {% render_field form.site %}
<h4>Management</h4> {% render_field form.location %}
{% render_field form.status %} {% render_field form.rack %}
{% render_field form.platform %}
{% if obj.pk %} {% if obj.device_type.is_child_device and obj.parent_bay %}
{% render_field form.primary_ip4 %} <div class="form-floating mb-3">
{% render_field form.primary_ip6 %} <input class="form-control" value="{{ obj.parent_bay.device }}" disabled />
{% endif %} <label>Parent Device</label>
</div> </div>
<div class="field-group"> <div class="form-floating mb-3">
<h4>Virtualization</h4> <div class="input-group">
{% render_field form.cluster_group %} <input class="form-control" value="{{ obj.parent_bay.name }}" disabled />
{% render_field form.cluster %} <label>Parent Bay</label>
</div> <a href="{% url 'dcim:devicebay_depopulate' pk=obj.parent_bay.pk %}" title="Regenerate Slug" class="btn btn-danger d-inline-flex align-items-center">
<div class="field-group"> <i class="mdi mdi-close-thick"></i>&nbsp;Remove
<h4>Tenancy</h4> </a>
{% render_field form.tenant_group %} </div>
{% render_field form.tenant %} </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 %} {% 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">
<h4>Comments</h4> <div class="field-group">
{% render_field form.comments %} <h4>Comments</h4>
</div> {% render_field form.comments %}
</div>
{% endblock %} {% endblock %}

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

@ -6,73 +6,89 @@
{% block controls %} {% block controls %}
{% if settings.DOCS_ROOT %} {% 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"> <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> <i class="mdi mdi-help-circle"></i>
</button> </button>
{% endif %} {% endif %}
{% 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="col col-md-8 offset-md-2">
{% block tabs %}{% endblock %}
{% block form %}
{% if form.Meta.fieldsets %}
{# Render grouped fields according to Form #} <div class="row">
{% for group, fields in form.Meta.fieldsets %} <div class="col col-md-8 offset-md-2 col-lg-6 offset-lg-3">
<div class="field-group"> {% block tabs %}{% endblock %}
<h4 class="mb-3">{{ group }}</h4> {% block form %}
{% for name in fields %}{% render_field form|getfield:name %}{% endfor %} {% if form.Meta.fieldsets %}
</div>
{# Render grouped fields according to Form #}
{% endfor %} {% for group, fields in form.Meta.fieldsets %}
{% if form.custom_fields %} <div class="field-group">
<div class="field-group">
<h4 class="mb-3">Custom Fields</h4> <h4>{{ group }}</h4>
{% render_custom_fields form %}
{% 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> </div>
{% endif %} </div>
{% if form.comments %}
<div class="field-group"> <div class="row my-3">
<h4 class="mb-3">Comments</h4> <div class="col col-md-8 offset-md-2 text-end">
{% render_field form.comments %} {% block buttons %}
</div> <a class="btn btn-outline-danger" href="{{ return_url }}">Cancel</a>
{% endif %}
{% else %} {% if obj.pk %}
{# Render all fields in a single group #} <button type="submit" name="_update" class="btn btn-primary">
<div class="field-group"> Save
<h4 class="mb-3">{{ obj_type|capfirst }}</h4> </button>
{% block form_fields %}{% render_form form %}{% endblock %}
{% 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>
{% endif %}
{% endblock form %}
</div> </div>
</div> </form>
<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>
{% 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 %}

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

@ -33,83 +33,90 @@
</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 }}">
{{ field.label }} {{ field.label }}
</label> </label>
<button id="reslug" type="button" title="Regenerate Slug" class="btn btn-outline-dark"> <button id="reslug" type="button" title="Regenerate Slug" class="btn btn-outline-dark">
<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 }}">
{{ 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 }} {{ field.label }}
</label> </label>
<button type="button" class="btn btn-outline-gray dropdown-toggle" data-bs-toggle="dropdown"> <div class="col col-md-9">
</button> {{ field }}
<ul class="dropdown-menu dropdown-menu-end"> </div>
<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>
{% 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 %} {% 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 %}