begin bootstrap 5 migration, update templates

netbox/templates/generic/object.html

@@ -1,16 +1,65 @@
-{% extends 'base.html' %}
+{% extends 'layout.html' %}
 {% load buttons %}
 {% load custom_links %}
 {% load helpers %}
 {% load perms %}
 {% load plugins %}
 
+
+{% block title %}{{ object }}{% endblock %}
+
+{% block breadcrumb_main %}
+<nav class="breadcrumb-container" aria-label="breadcrumb">
+  <ol class="breadcrumb">
+    <li class="breadcrumb-item"><a href="#">Home</a></li>
+    {% block breadcrumbs %}{%endblock%}
+  </ol>
+</nav>
+{% endblock %}
+
+{% block controls %}
+{% plugin_buttons object %}
+<div class="container mb-2 mx-0">
+  <div class="d-flex flex-wrap justify-content-end">
+  {% block extra_controls %}{% endblock %}
+  {% if request.user|can_add:object %}
+    {% clone_button object %}
+  {% endif %}
+  {% if request.user|can_change:object %}
+    {% edit_button object %}
+  {% endif %}
+  {% if request.user|can_delete:object %}
+    {% delete_button object %}
+  {% endif %}
+  </div>
+</div>
+{% endblock %}
+
+{% block content %}
+{% block tabs %}
+<ul class="nav nav-tabs">
+  <li role="presentation"{% if not active_tab %} class="active"{% endif %}>
+    <a href="{{ object.get_absolute_url }}">{{ object|meta:"verbose_name"|bettertitle }}</a>
+  </li>
+  {% if perms.extras.view_objectchange %}
+    <li role="presentation"{% if active_tab == 'changelog' %} class="active"{% endif %}>
+      {# TODO: Fix changelog URL resolution hack #}
+      <a href="{{ object.get_absolute_url }}changelog/">Change Log</a>
+    </li>
+  {% endif %}
+</ul>
+{% endblock %}
+{% endblock %}
+
 {% block header %}
   <div class="row noprint">
     <div class="col-sm-8 col-md-9">
-      <ol class="breadcrumb">
-        {% block breadcrumbs %}{% endblock %}
-      </ol>
+      <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+          <li class="breadcrumb-item"><a href="#">Home</a></li>
+          {% comment %} {% block breadcumbs %}{%endblock%} {% endcomment %}
+        </ol>
+      </nav>
     </div>
     <div class="col-sm-4 col-md-3">
       {# TODO: Provide absolute search URL #}
@@ -26,7 +75,7 @@
       </form>
     </div>
   </div>
-  <div class="pull-right noprint">
+  {% comment %} <div class="pull-right noprint">
     {% plugin_buttons object %}
     {% block buttons %}
       {% if request.user|can_add:object %}
@@ -41,23 +90,12 @@
     {% endblock %}
   </div>
   <h1>{% block title %}{{ object }}{% endblock %}</h1>
+  {% endcomment %}
   {% include 'inc/created_updated.html' %}
-  <div class="pull-right noprint">
+  <div class="float-end noprint">
     {% block tab_buttons %}
       {% custom_links object %}
     {% endblock %}
   </div>
-  {% block tabs %}
-    <ul class="nav nav-tabs">
-      <li role="presentation"{% if not active_tab %} class="active"{% endif %}>
-        <a href="{{ object.get_absolute_url }}">{{ object|meta:"verbose_name"|bettertitle }}</a>
-      </li>
-      {% if perms.extras.view_objectchange %}
-        <li role="presentation"{% if active_tab == 'changelog' %} class="active"{% endif %}>
-          {# TODO: Fix changelog URL resolution hack #}
-          <a href="{{ object.get_absolute_url }}changelog/">Change Log</a>
-        </li>
-      {% endif %}
-    </ul>
-  {% endblock %}
+  
 {% endblock %}

netbox/templates/generic/object_bulk_add_component.html

@@ -1,8 +1,9 @@
-{% extends 'base.html' %}
+{% extends 'layout.html' %}
 {% load form_helpers %}
 
+{% block title %}Add {{ model_name|title }}{% endblock %}
+
 {% block content %}
-<h1>{% block title %}Add {{ model_name|title }}{% endblock %}</h1>
 <p>{{ table.rows|length }} {{ parent_model_name }} selected</p>
 <form action="." method="post" class="form form-horizontal">
     {% csrf_token %}
@@ -14,22 +15,22 @@
     {% endfor %}
     <div class="row">
         <div class="col-md-7">
-            <div class="panel panel-default">
+            <div class="card">
                 {% include 'inc/table.html' %}
             </div>
         </div>
         <div class="col-md-5">
             {% if form.non_field_errors %}
-                <div class="panel panel-danger">
-                    <div class="panel-heading"><strong>Errors</strong></div>
-                    <div class="panel-body">
+                <div class="panel bg-danger">
+                    <h5 class="card-header">Errors</h5>
+                    <div class="card-body">
                         {{ form.non_field_errors }}
                     </div>
                 </div>
             {% endif %}
-            <div class="panel panel-default">
-                <div class="panel-heading"><strong>{{ model_name|title }} to Add</strong></div>
-                <div class="panel-body">
+            <div class="card">
+                <h5 class="card-header">{{ model_name|title }} to Add</h5>
+                <div class="card-body">
                     {% for field in form.visible_fields %}
                         {% render_field field %}
                     {% endfor %}

netbox/templates/generic/object_bulk_delete.html

@@ -1,4 +1,4 @@
-{% extends 'base.html' %}
+{% extends 'layout.html' %}
 {% load helpers %}
 
 {% block title %}Delete {{ table.rows|length }} {{ obj_type_plural|bettertitle }}?{% endblock %}
@@ -6,9 +6,9 @@
 {% block content %}
     <div class="row">
         <div class="col-md-8 col-md-offset-2">
-            <div class="panel panel-danger">
-                <div class="panel-heading"><strong>Confirm Bulk Deletion</strong></div>
-                <div class="panel-body">
+            <div class="card bg-danger">
+                <h5 class="card-header">Confirm Bulk Deletion</h5>
+                <div class="card-body">
                     <p><strong>Warning:</strong> The following operation will delete {{ table.rows|length }} {{ obj_type_plural }}. Please carefully review the {{ obj_type_plural }} to be deleted and confirm below.</p>
                     {% block message_extra %}{% endblock %}
                 </div>
@@ -17,7 +17,7 @@
     </div>
     <div class="row">
         <div class="col-md-8 col-md-offset-2">
-            <div class="panel panel-default">
+            <div class="card">
                 {% include 'inc/table.html' %}
             </div>
         </div>

netbox/templates/generic/object_bulk_edit.html

@@ -1,13 +1,13 @@
-{% extends 'base.html' %}
+{% extends 'layout.html' %}
 {% load helpers %}
 {% load form_helpers %}
 
 {% block content %}
 <h1>{% block title %}Editing {{ table.rows|length }} {{ obj_type_plural|bettertitle }}{% endblock %}</h1>
 {% if form.errors %}
-    <div class="panel panel-danger">
-        <div class="panel-heading"><strong>Errors</strong></div>
-        <div class="panel-body">
+    <div class="card bg-danger">
+        <h5 class="card-header">Errors</h5>
+        <div class="card-body">
             {{ form.errors }}
         </div>
     </div>
@@ -22,22 +22,22 @@
     {% endfor %}
     <div class="row">
         <div class="col-md-8">
-            <div class="panel panel-default">
+            <div class="card">
                 {% include 'inc/table.html' %}
             </div>
         </div>
         <div class="col-md-4">
             {% if form.non_field_errors %}
-                <div class="panel panel-danger">
-                    <div class="panel-heading"><strong>Errors</strong></div>
-                    <div class="panel-body">
+                <div class="card bg-danger">
+                    <h5 class="card-header">Errors</h5>
+                    <div class="card-body">
                         {{ form.non_field_errors }}
                     </div>
                 </div>
             {% endif %}
-            <div class="panel panel-default">
-                <div class="panel-heading"><strong>{% block form_title %}Attributes{% endblock %}</strong></div>
-                <div class="panel-body">
+            <div class="card">
+                <h5 class="card-header">{% block form_title %}Attributes{% endblock %}</h5>
+                <div class="card-body">
                     {% for field in form.visible_fields %}
                         {% if field.name in form.nullable_fields %}
                             {% render_field field bulk_nullable=True %}

netbox/templates/generic/object_edit.html

@@ -1,92 +1,90 @@
-{% extends 'base.html' %}
-{% load form_helpers %}
-{% load helpers %}
+{% extends 'layout.html' %} {% load form_helpers %} {% load helpers %} 
+
+{% block title %}{% if obj.pk %}Editing {{ obj_type }} {{ obj }}{% else %}Add a new {{ obj_type }}{% endif %}{% endblock %}
+
+{% block controls %}
+{% if settings.DOCS_ROOT %}
+<button
+  type="button"
+  class="btn btn-sm btn-outline-secondary"
+  data-toggle="modal"
+  data-target="#docs_modal"
+  title="Help"
+>
+  <i class="bi bi-question"></i>
+</button>
+{% endif %}
+{% endblock %}
 
 {% block content %}
-    <form action="" method="post" enctype="multipart/form-data" class="form form-horizontal">
-        {% csrf_token %}
-        {% for field in form.hidden_fields %}
-            {{ field }}
-        {% endfor %}
-        <div class="row">
-            <div class="col-md-6 col-md-offset-3">
-                <h3>
-                    {% if settings.DOCS_ROOT %}
-                        <div class="pull-right">
-                            <button type="button" class="btn btn-link btn-xs" data-toggle="modal" data-target="#docs_modal" title="Help">
-                              <i class="mdi mdi-help-circle"></i>
-                            </button>
-                        </div>
-                    {% endif %}
-                    {% block title %}{% if obj.pk %}Editing {{ obj_type }} {{ obj }}{% else %}Add a new {{ obj_type }}{% endif %}{% endblock %}
-                </h3>
-                {% block tabs %}{% endblock %}
-                {% if form.non_field_errors %}
-                    <div class="panel panel-danger">
-                        <div class="panel-heading"><strong>Errors</strong></div>
-                        <div class="panel-body">
-                            {{ form.non_field_errors }}
-                        </div>
-                    </div>
-                {% endif %}
-                {% block form %}
-                  {% if form.Meta.fieldsets %}
-                    {# Render grouped fields accoring to Form #}
-                    {% for group, fields in form.Meta.fieldsets %}
-                      <div class="panel panel-default">
-                          <div class="panel-heading"><strong>{{ group }}</strong></div>
-                          <div class="panel-body">
-                            {% for name in fields %}
-                              {% render_field form|getfield:name %}
-                            {% endfor %}
-                          </div>
-                      </div>
-                    {% endfor %}
-                    {% if form.custom_fields %}
-                      <div class="panel panel-default">
-                        <div class="panel-heading"><strong>Custom Fields</strong></div>
-                        <div class="panel-body">
-                          {% render_custom_fields form %}
-                        </div>
-                      </div>
-                    {% endif %}
-                    {% if form.comments %}
-                      <div class="panel panel-default">
-                        <div class="panel-heading"><strong>Comments</strong></div>
-                        <div class="panel-body">
-                          {% render_field form.comments %}
-                        </div>
-                      </div>
-                    {% endif %}
-                  {% else %}
-                    {# Render all fields in a single group #}
-                    <div class="panel panel-default">
-                      <div class="panel-heading"><strong>{{ obj_type|capfirst }}</strong></div>
-                      <div class="panel-body">
-                        {% block form_fields %}
-                          {% render_form form %}
-                        {% endblock %}
-                      </div>
-                    </div>
-                  {% endif %}
-                {% endblock %}
-            </div>
+<form action="" method="post" enctype="multipart/form-data">
+  {% csrf_token %}
+  {% for field in form.hidden_fields %}{{ field }}{% endfor %}
+  <div class="row">
+    <div class="col-md-8 col-md-offset-3">
+      {% block tabs %}{% endblock %} {% if form.non_field_errors %}
+      <div class="card bg-danger">
+        <h5 class="card-header">Errors</h5>
+        <div class="card-body">
+          {{ form.non_field_errors }}
         </div>
-        <div class="row">
-            <div class="col-md-6 col-md-offset-3 text-right">
-                {% block buttons %}
-                    {% if obj.pk %}
-                        <button type="submit" name="_update" class="btn btn-primary">Update</button>
-                    {% else %}
-                        <button type="submit" name="_create" class="btn btn-primary">Create</button>
-                        <button type="submit" name="_addanother" class="btn btn-primary">Create and Add Another</button>
-                    {% endif %}
-                    <a href="{{ return_url }}" class="btn btn-default">Cancel</a>
-                {% endblock %}
-            </div>
+      </div>
+      {% endif %} 
+      
+      {% block form %}
+      {% if form.Meta.fieldsets %}
+
+      {# Render grouped fields accoring 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>
-    </form>
-    {% if obj and settings.DOCS_ROOT %}
-        {% include 'inc/modal.html' with name='docs' content=obj|get_docs %}
-    {% endif %}
+        
+      {% 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 %}
+      </div>
+      {% endif %}
+      {% endblock %}
+    </div>
+  </div>
+  <div class="row my-3">
+    <div class="col-md-8 col-md-offset-3 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">
+        Update
+      </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 %}
+    </div>
+  </div>
+</form>
+{% if obj and settings.DOCS_ROOT %} 
+  {% include 'inc/modal.html' with name='docs' content=obj|get_docs %}
+{% endif %}
 {% endblock %}

netbox/templates/generic/object_list.html

@@ -1,33 +1,46 @@
-{% extends 'base.html' %}
+{% extends 'layout.html' %}
 {% load buttons %}
 {% load helpers %}
 {% load static %}
 
-{% block content %}
-<div class="pull-right noprint">
-    {% block buttons %}{% endblock %}
-    {% if request.user.is_authenticated and table_config_form %}
-        <button type="button" class="btn btn-default" data-toggle="modal" data-target="#ObjectTable_config" title="Configure table"><i class="mdi mdi-cog"></i> Configure</button>
-    {% endif %}
-    {% if permissions.add and 'add' in action_buttons %}
+{% block title %}{{ content_type.model_class|meta:"verbose_name_plural"|bettertitle }}{% endblock %}
+
+{% block controls %}
+<div class="container mb-2 mx-0">
+  <div class="d-flex flex-wrap justify-content-end">
+  {% if permissions.add and 'add' in action_buttons %}
         {% add_button content_type.model_class|validated_viewname:"add" %}
     {% endif %}
-    {% if permissions.add and 'import' in action_buttons %}
-        {% import_button content_type.model_class|validated_viewname:"import" %}
-    {% endif %}
-    {% if 'export' in action_buttons %}
-        {% export_button content_type %}
-    {% endif %}
-</div>
-<h1>{% block title %}{{ content_type.model_class|meta:"verbose_name_plural"|bettertitle }}{% endblock %}</h1>
-<div class="row">
-    <div class="col-md-12">
-        {% if filter_form %}
-            <div class="col-md-3 pull-right right-side-panel noprint">
-                {% include 'inc/search_panel.html' %}
-                {% block sidebar %}{% endblock %}
-            </div>
+    <div class="d-flex flex-shrink-1">
+        <div class="btn-group m-1">
+        {% if permissions.add and 'import' in action_buttons %}
+            {% import_button content_type.model_class|validated_viewname:"import" %}
         {% endif %}
+        {% if 'export' in action_buttons %}
+            {% export_button content_type %}
+        {% endif %}
+        </div>
+    </div>
+    <div class="d-flex flex-shrink-1">
+    {% if request.user.is_authenticated and table_config_form %}
+
+      <button
+        type="button"
+        class="btn btn-sm btn-outline-secondary m-1"
+        data-toggle="modal" data-target="#ObjectTable_config"
+        title="Configure table"
+      >
+        <i class="bi bi-sliders"></i>
+      </button>
+      {% endif %}
+    </div>
+  </div>
+</div>
+{% endblock %}
+
+{% block content %}
+<div class="row mb-3">
+    <div class="col-9">
         {% with bulk_edit_url=content_type.model_class|validated_viewname:"bulk_edit" bulk_delete_url=content_type.model_class|validated_viewname:"bulk_delete" %}
         {% if permissions.change or permissions.delete %}
             <form method="post" class="form form-horizontal">
@@ -58,20 +71,23 @@
                     </div>
                 {% endif %}
                 {% include table_template|default:'responsive_table.html' %}
-                <div class="pull-left noprint">
+                <div class="noprint">
                     {% block bulk_buttons %}{% endblock %}
+                    <div class="btn-group my-3" role="group">
                     {% if bulk_edit_url and permissions.change %}
                         <button type="submit" name="_edit" formaction="{% url bulk_edit_url %}{% if request.GET %}?{{ request.GET.urlencode }}{% endif %}" class="btn btn-warning btn-sm">
-                            <span class="mdi mdi-pencil" aria-hidden="true"></span> Edit Selected
+                            <i class="bi bi-pencil-fill" aria-hidden="true"></i> Edit Selected
                         </button>
                     {% endif %}
                     {% if bulk_delete_url and permissions.delete %}
                         <button type="submit" name="_delete" formaction="{% url bulk_delete_url %}{% if request.GET %}?{{ request.GET.urlencode }}{% endif %}" class="btn btn-danger btn-sm">
-                            <span class="mdi mdi-trash-can-outline" aria-hidden="true"></span> Delete Selected
+                            <i class="bi bi-trash-fill" aria-hidden="true"></i> Delete Selected
                         </button>
                     {% endif %}
+                    </div>
                 </div>
             </form>
+            
         {% else %}
             {% include table_template|default:'responsive_table.html' %}
         {% endif %}
@@ -79,6 +95,12 @@
         {% include 'inc/paginator.html' with paginator=table.paginator page=table.page %}
         <div class="clearfix"></div>
     </div>
+    {% if filter_form %}
+    <div class="col-3 noprint">
+        {% block sidebar %}{% endblock %}
+        {% include 'inc/search_panel.html' %}
+    </div>
+    {% endif %}
 </div>
 {% table_config_form table table_name="ObjectTable" %}
 {% endblock %}