#6372: Template cleanup & fix form width

netbox/templates/dcim/device_edit.html

@@ -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="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 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="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>Tenancy</h4>
+        {% render_field form.tenant_group %}
+        {% render_field form.tenant %}
     </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 %}

netbox/templates/generic/object_edit.html

@@ -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 %}
-
-      {# 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>
-      {% 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 %}
+  <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 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 %}
-      {% 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 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>
-  </div>
-</form>
+  </form>
+
 {% if obj and settings.DOCS_ROOT %} 
   {% include 'inc/modal.html' with name='docs' content=obj|get_docs %}
 {% endif %}
+
 {% endblock content %}

netbox/templates/utilities/render_field.html

@@ -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 }}">
-            {{ 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>
+    {# 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>
-</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>
+    <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 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>
-</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>
-    {% endif %}
+        <span class="form-text">{{ field.help_text|safe }}</span>
     {% endif %}
-    
 {% endif %}