bootstrap 5 template updates

netbox/templates/dcim/cable_connect.html

@@ -1,168 +1,138 @@
-{% extends 'base.html' %}
+{% extends 'layout.html' %}
 {% load static %}
 {% load helpers %}
 {% load form_helpers %}
 
+{% block title %}Connect {{ form.instance.termination_a.device }} {{ form.instance.termination_a }} to {{ termination_b_type|bettertitle }}{% endblock %}
+
 {% block content %}
-<form method="post" class="form form-horizontal">
+{% with termination_a=form.instance.termination_a %}
+{% render_errors form %}
+<form method="post">
     {% csrf_token %}
     {% for field in form.hidden_fields %}
         {{ field }}
     {% endfor %}
-    {% if form.non_field_errors %}
-        <div class="row">
-            <div class="col-md-6 col-md-offset-3">
-                <div class="panel panel-danger">
-                    <div class="panel-heading"><strong>Errors</strong></div>
-                    <div class="panel-body">
-                        {{ form.non_field_errors }}
-                    </div>
+    <div class="row my-3">
+        <div class="col-md-5">
+            <div class="card h-100">
+                <h5 class="card-header">
+                    A Side
+                </h5>
+                <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>
+                        <div class="form-floating mb-3">
+                            <input class="form-control" value="{{ termination_a.device.site }}" disabled />
+                            <label>Site</label>
+                        </div>
+                        <div class="form-floating mb-3">
+                            <input class="form-control" value="{{ termination_a.device.rack|default:"None" }}" disabled />
+                            <label>Rack</label>
+                        </div>
+                        <div class="form-floating mb-3">
+                            <input class="form-control" value="{{ termination_a.device }}" disabled />
+                            <label>Device</label>
+                        </div>
+                        <div class="form-floating mb-3">
+                            <input class="form-control" value="{{ termination_a|meta:"verbose_name"|capfirst }}" disabled />
+                            <label>Type</label>
+                        </div>
+                        <div class="form-floating mb-3">
+                            <input class="form-control" value="{{ termination_a }}" disabled />
+                            <label>Name</label>
+                        </div>
+                    {% else %}
+                        {# Circuit termination #}
+                        <div class="form-floating mb-3">
+                            <input class="form-control" value="{{ termination_a.site }}" disabled />
+                            <label>Site</label>
+                        </div>
+                        <div class="form-floating mb-3">
+                            <input class="form-control" value="{{ termination_a.circuit.provider }}" disabled />
+                            <label>Provider</label>
+                        </div>
+                        <div class="form-floating mb-3">
+                            <input class="form-control" value="{{ termination_a.circuit.cid }}" disabled />
+                            <label>Circuit</label>
+                        </div>
+                        <div class="form-floating mb-3">
+                            <input class="form-control" value="{{ termination_a.term_side }}" disabled />
+                            <label>Side</label>
+                        </div>
+                    {% endif %}
                 </div>
             </div>
         </div>
-    {% endif %}
-    {% with termination_a=form.instance.termination_a %}
-        <h3>{% block title %}Connect {{ termination_a.device }} {{ termination_a }} to {{ termination_b_type|bettertitle }}{% endblock %}</h3>
-        <div class="row">
-            <div class="col-md-5">
-                <div class="panel panel-default">
-                    <div class="panel-heading text-center">
-                        <strong>A Side</strong>
-                    </div>
-                    <div class="panel-body">
-                        {% if termination_a.device %}
-                            {# Device component #}
-                            <div class="form-group">
-                                <label class="col-md-3 control-label required">Region</label>
-                                <div class="col-md-9">
-                                    <p class="form-control-static">{{ termination_a.device.site.region }}</p>
-                                </div>
-                            </div>
-                            <div class="form-group">
-                                <label class="col-md-3 control-label required">Site</label>
-                                <div class="col-md-9">
-                                    <p class="form-control-static">{{ termination_a.device.site }}</p>
-                                </div>
-                            </div>
-                            <div class="form-group">
-                                <label class="col-md-3 control-label required">Rack</label>
-                                <div class="col-md-9">
-                                    <p class="form-control-static">{{ termination_a.device.rack|default:"None" }}</p>
-                                </div>
-                            </div>
-                            <div class="form-group">
-                                <label class="col-md-3 control-label required">Device</label>
-                                <div class="col-md-9">
-                                    <p class="form-control-static">{{ termination_a.device }}</p>
-                                </div>
-                            </div>
-                            <div class="form-group">
-                                <label class="col-md-3 control-label required">Type</label>
-                                <div class="col-md-9">
-                                    <p class="form-control-static">{{ termination_a|meta:"verbose_name"|capfirst }}</p>
-                                </div>
-                            </div>
-                            <div class="form-group">
-                                <label class="col-md-3 control-label required">Name</label>
-                                <div class="col-md-9">
-                                    <p class="form-control-static">{{ termination_a }}</p>
-                                </div>
-                            </div>
-                        {% else %}
-                            {# Circuit termination #}
-                            <div class="form-group">
-                                <label class="col-md-3 control-label required">Site</label>
-                                <div class="col-md-9">
-                                    <p class="form-control-static">{{ termination_a.site }}</p>
-                                </div>
-                            </div>
-                            <div class="form-group">
-                                <label class="col-md-3 control-label required">Provider</label>
-                                <div class="col-md-9">
-                                    <p class="form-control-static">{{ termination_a.circuit.provider }}</p>
-                                </div>
-                            </div>
-                            <div class="form-group">
-                                <label class="col-md-3 control-label required">Circuit</label>
-                                <div class="col-md-9">
-                                    <p class="form-control-static">{{ termination_a.circuit.cid }}</p>
-                                </div>
-                            </div>
-                            <div class="form-group">
-                                <label class="col-md-3 control-label required">Side</label>
-                                <div class="col-md-9">
-                                    <p class="form-control-static">{{ termination_a.term_side }}</p>
-                                </div>
-                            </div>
-                        {% endif %}
-                    </div>
-                </div>
-            </div>
-            <div class="col-md-2 text-center" style="padding-top: 90px;">
-                <i class="mdi mdi-swap-horizontal-bold mdi-48px"></i>
-            </div>
-            <div class="col-md-5">
-                <div class="panel panel-default">
-                    <div class="panel-heading text-center">
-                        <strong>B Side</strong>
-                    </div>
-                    <div class="panel-body">
-                        {% if tabs %}
-                            <ul class="nav nav-tabs">
-                                {% for url, link in tabs %}
-                                    <li role="presentation"><a href="{{ url }}">{{ link }}</a></li>
-                                {% endfor %}
-                            </ul>
-                        {% endif %}
-                        {% if 'termination_b_provider' in form.fields %}
-                            {% render_field form.termination_b_provider %}
-                        {% endif %}
-                        {% if 'termination_b_region' in form.fields %}
-                            {% render_field form.termination_b_region %}
-                        {% endif %}
-                        {% if 'termination_b_site' in form.fields %}
-                            {% render_field form.termination_b_site %}
-                        {% endif %}
-                        {% if 'termination_b_rackgroup' in form.fields %}
-                            {% render_field form.termination_b_rackgroup %}
-                        {% endif %}
-                        {% if 'termination_b_rack' in form.fields %}
-                            {% render_field form.termination_b_rack %}
-                        {% endif %}
-                        {% if 'termination_b_device' in form.fields %}
-                            {% render_field form.termination_b_device %}
-                        {% endif %}
-                        {% if 'termination_b_type' in form.fields %}
-                            {% render_field form.termination_b_type %}
-                        {% endif %}
-                        {% if 'termination_b_powerpanel' in form.fields %}
-                            {% render_field form.termination_b_powerpanel %}
-                        {% endif %}
-                        {% if 'termination_b_circuit' in form.fields %}
-                            {% render_field form.termination_b_circuit %}
-                        {% endif %}
-                        <div class="form-group">
-                            <label class="col-md-3 control-label required">Type</label>
-                            <div class="col-md-9">
-                                <p class="form-control-static">{{ termination_b_type|capfirst }}</p>
-                            </div>
-                        </div>
-                        {% render_field form.termination_b_id %}
+        <div class="col-md-2 d-flex flex-column justify-content-center align-items-center">
+            <i class="mdi mdi-swap-horizontal-bold mdi-48px"></i>
+        </div>
+        <div class="col-md-5">
+            <div class="card h-100">
+                <h5 class="card-header">
+                    B Side
+                </h5>
+                <div class="card-body">
+                    {% if tabs %}
+                        <ul class="nav nav-tabs">
+                            {% for url, link in tabs %}
+                                <li class="nav-item" role="presentation">
+                                    <a class="nav-link" href="{{ url }}">{{ link }}</a>
+                                </li>
+                            {% endfor %}
+                        </ul>
+                    {% endif %}
+                    {% if 'termination_b_provider' in form.fields %}
+                        {% render_field form.termination_b_provider %}
+                    {% endif %}
+                    {% if 'termination_b_region' in form.fields %}
+                        {% render_field form.termination_b_region %}
+                    {% endif %}
+                    {% if 'termination_b_site' in form.fields %}
+                        {% render_field form.termination_b_site %}
+                    {% endif %}
+                    {% if 'termination_b_rackgroup' in form.fields %}
+                        {% render_field form.termination_b_rackgroup %}
+                    {% endif %}
+                    {% if 'termination_b_rack' in form.fields %}
+                        {% render_field form.termination_b_rack %}
+                    {% endif %}
+                    {% if 'termination_b_device' in form.fields %}
+                        {% render_field form.termination_b_device %}
+                    {% endif %}
+                    {% if 'termination_b_type' in form.fields %}
+                        {% render_field form.termination_b_type %}
+                    {% endif %}
+                    {% if 'termination_b_powerpanel' in form.fields %}
+                        {% render_field form.termination_b_powerpanel %}
+                    {% endif %}
+                    {% 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>
+                    {% render_field form.termination_b_id %}
                 </div>
             </div>
         </div>
-        <div class="row">
-            <div class="col-md-6 col-md-offset-3">
-                {% include 'dcim/inc/cable_form.html' %}
-            </div>
+    </div>
+    <div class="row my-3 justify-content-center">
+        <div class="col-md-8">
+            {% include 'dcim/inc/cable_form.html' %}
         </div>
-        <div class="form-group">
-            <div class="col-md-12 text-center">
-                <button type="submit" name="_update" class="btn btn-primary">Connect</button>
-                <a href="{{ return_url }}" class="btn btn-default">Cancel</a>
-            </div>
+    </div>
+    <div class="row my-3">
+        <div class="col-md-12 text-center">
+            <a href="{{ return_url }}" class="btn btn-outline-danger">Cancel</a>
+            <button type="submit" name="_update" class="btn btn-primary">Connect</button>
         </div>
-    {% endwith %}
+    </div>
 </form>
+{% endwith %}
 {% endblock %}

netbox/templates/dcim/inc/cable_form.html

@@ -1,39 +1,25 @@
 {% load form_helpers %}
-<div class="field-group">
-    <h4>Cable</h4>
-    {% render_field form.status %}
-    {% render_field form.type %}
-    {% render_field form.label %}
-    {% render_field form.color %}
-    <div class="field-group">
-        <label class="col-md-3 control-label" for="id_length">{{ form.length.label }}</label>
-        <div class="col-md-5">
-            {{ form.length }}
-            {% if form.length.errors %}
-                <ul>
-                {% for error in form.length.errors %}
-                    <li class="text-danger">{{ error }}</li>
-                {% endfor %}
-                </ul>
-            {% endif %}
+<div class="card">
+    <h5 class="card-header">Cable</h5>
+    <div class="card-body">
+        {% render_field form.status %}
+        {% render_field form.type %}
+        {% render_field form.label %}
+        {% render_field form.color %}
+        <div class="row">
+            <div class="col">
+                {% render_field form.length %}
+            </div>
+            <div class="col">
+                {% render_field form.length_unit %}
+            </div>
         </div>
-        <div class="col-md-4">
-            {{ form.length_unit }}
-            {% if form.length_unit.errors %}
-                <ul>
-                    {% for error in form.length_unit.errors %}
-                        <li class="text-danger">{{ error }}</li>
-                    {% endfor %}
-                </ul>
-            {% endif %}
+        {% render_field form.tags %}
+        {% if form.custom_fields %}
+        <div class="field-group">
+            <h4>Custom Fields</h4>
+            {% render_custom_fields form %}
         </div>
+        {% endif %}
     </div>
-    {% render_field form.tags %}
-    
 </div>
-{% if form.custom_fields %}
-<div class="field-group">
-    <h4>Custom Fields</h4>
-    {% render_custom_fields form %}
-</div>
-{% endif %}

netbox/templates/dcim/virtualchassis.html

@@ -5,11 +5,11 @@
 {% load plugins %}
 
 {% block breadcrumbs %}
-  <li><a href="{% url 'dcim:virtualchassis_list' %}">Virtual Chassis</a></li>
+  <li class="breadcrumb-item"><a href="{% url 'dcim:virtualchassis_list' %}">Virtual Chassis</a></li>
   {% if object.master %}
-    <li><a href="{% url 'dcim:virtualchassis_list' %}?site={{ object.master.site.slug }}">{{ object.master.site }}</a></li>
+    <li class="breadcrumb-item"><a href="{% url 'dcim:virtualchassis_list' %}?site={{ object.master.site.slug }}">{{ object.master.site }}</a></li>
   {% endif %}
-  <li>{{ object }}</li>
+  <li class="breadcrumb-item">{{ object }}</li>
 {% endblock %}
 
 {% block buttons %}
@@ -24,58 +24,62 @@
 {% block content %}
 <div class="row">
 	<div class="col-md-4">
-        <div class="panel panel-default">
-            <div class="panel-heading">
-                <strong>Virtual Chassis</strong>
+        <div class="card">
+            <h5 class="card-header">
+                Virtual Chassis
+            </h5>
+            <div class="card-body">
+                <table class="table table-hover attr-table">
+                    <tr>
+                        <th scope="row">Domain</th>
+                        <td>{{ object.domain|placeholder }}</td>
+                    </tr>
+                    <tr>
+                        <th scope="row">Master</th>
+                        <td>
+                            {% if object.master %}
+                                <a href="{{ object.master.get_absolute_url }}">{{ object.master }}</a>
+                            {% else %}
+                                <span class="text-muted">&mdash;</span>
+                            {% endif %}
+                        </td>
+                    </tr>
+                </table>
             </div>
-            <table class="table table-hover panel-body attr-table">
-                <tr>
-                    <td>Domain</td>
-                    <td>{{ object.domain|placeholder }}</td>
-                </tr>
-                <tr>
-                    <td>Master</td>
-                    <td>
-                        {% if object.master %}
-                            <a href="{{ object.master.get_absolute_url }}">{{ object.master }}</a>
-                        {% else %}
-                            <span class="text-muted">&mdash;</span>
-                        {% endif %}
-                    </td>
-                </tr>
-            </table>
         </div>
         {% include 'inc/custom_fields_panel.html' %}
         {% include 'extras/inc/tags_panel.html' with tags=object.tags.all url='dcim:virtualchassis_list' %}
         {% plugin_left_page object %}
     </div>
     <div class="col-md-8">
-        <div class="panel panel-default">
-            <div class="panel-heading">
-                <strong>Members</strong>
-            </div>
-            <table class="table table-hover panel-body attr-table">
-                <tr>
-                    <th>Device</th>
-                    <th>Position</th>
-                    <th>Master</th>
-                    <th>Priority</th>
-                </tr>
-                {% for vc_member in members %}
-                    <tr{% if vc_member == device %} class="info"{% endif %}>
-                        <td>
-                            <a href="{{ vc_member.get_absolute_url }}">{{ vc_member }}</a>
-                        </td>
-                        <td><span class="badge badge-default">{{ vc_member.vc_position }}</span></td>
-                        <td>{% if object.master == vc_member %}<i class="mdi mdi-check-bold text-success"></i>{% endif %}</td>
-                        <td>{{ vc_member.vc_priority|placeholder }}</td>
+        <div class="card">
+            <h5 class="card-header">
+                Members
+            </h5>
+            <div class="card-body">
+                <table class="table table-hover attr-table">
+                    <tr>
+                        <th>Device</th>
+                        <th>Position</th>
+                        <th>Master</th>
+                        <th>Priority</th>
                     </tr>
-                {% endfor %}
-            </table>
+                    {% for vc_member in members %}
+                        <tr{% if vc_member == device %} class="info"{% endif %}>
+                            <td>
+                                <a href="{{ vc_member.get_absolute_url }}">{{ vc_member }}</a>
+                            </td>
+                            <td><span class="badge badge-default">{{ vc_member.vc_position }}</span></td>
+                            <td>{% if object.master == vc_member %}<i class="mdi mdi-check-bold text-success"></i>{% endif %}</td>
+                            <td>{{ vc_member.vc_priority|placeholder }}</td>
+                        </tr>
+                    {% endfor %}
+                </table>
+            </div>
             {% if perms.dcim.change_virtualchassis %}
-                <div class="panel-footer text-right noprint">
-                    <a href="{% url 'dcim:virtualchassis_add_member' pk=object.pk %}?site={{ object.master.site.pk }}&rack={{ object.master.rack.pk }}" class="btn btn-primary btn-xs">
-                        <span class="mdi mdi-plus-thick" aria-hidden="true"></span> Add Member
+                <div class="card-footer text-end noprint">
+                    <a href="{% url 'dcim:virtualchassis_add_member' pk=object.pk %}?site={{ object.master.site.pk }}&rack={{ object.master.rack.pk }}" class="btn btn-primary btn-sm">
+                        <i class="bi bi-plus" aria-hidden="true"></i> Add Member
                     </a>
                 </div>
             {% endif %}