From 0a03a7ed745fda3622f12dfcadd2e60c6a846d11 Mon Sep 17 00:00:00 2001
From: Jeremy Stretch <jstretch@netboxlabs.com>
Date: Fri, 29 Dec 2023 19:24:49 -0500
Subject: [PATCH] Update object list view

---
 netbox/templates/base/layout.html             | 16 ++++----
 netbox/templates/generic/object_list.html     | 38 +++++++++----------
 netbox/templates/inc/table_controls_htmx.html |  6 +--
 .../utilities/templates/builtins/badge.html   |  2 +-
 4 files changed, 30 insertions(+), 32 deletions(-)

diff --git a/netbox/templates/base/layout.html b/netbox/templates/base/layout.html
index 1d0f29b6f..423eb3503 100644
--- a/netbox/templates/base/layout.html
+++ b/netbox/templates/base/layout.html
@@ -115,7 +115,7 @@ Blocks:
     <div class="page-wrapper">
 
       {# Page header #}
-      <div class="page-header d-print-none">
+      <div class="page-header mt-2 d-print-none">
         <div class="container-xl">
 
           {% if config.BANNER_TOP %}
@@ -139,17 +139,18 @@ Blocks:
           {% endif %}
 
           {% block header %}
-            <div class="title-container px-3 pb-3">
+            <div class="row align-items-center">
 
               {# Title #}
-              <div id="content-title">
-                {# Center-align title in object-edit views #}
-                <h1 class="h2 w-100">{% block title %}{% endblock title %}</h1>
+              <div class="col">
+                <h2 class="page-title">{% block title %}{% endblock title %}</h2>
                 {% block subtitle %}{% endblock %}
               </div>
 
               {# Controls #}
-              {% block controls %}{% endblock controls %}
+              <div class="col-auto ms-auto d-print-none">
+                {% block controls %}{% endblock controls %}
+              </div>
 
             </div>
           {% endblock header %}
@@ -161,10 +162,9 @@ Blocks:
       <div class="page-body">
         <div class="container-xl">
           {% block tabs %}{% endblock %}
+          {# TODO: Remove content-wrapper block #}
           {% block content-wrapper %}
-            <div class="px-3">
               {% block content %}{% endblock %}
-            </div>
           {% endblock %}
           {# Bottom banner #}
           {% if config.BANNER_BOTTOM %}
diff --git a/netbox/templates/generic/object_list.html b/netbox/templates/generic/object_list.html
index c59fa0d18..2a1aa5c06 100644
--- a/netbox/templates/generic/object_list.html
+++ b/netbox/templates/generic/object_list.html
@@ -24,29 +24,27 @@ Context:
 {% block title %}{{ model|meta:"verbose_name_plural"|bettertitle }}{% endblock %}
 
 {% block controls %}
-  <div class="controls">
-    <div class="control-group">
-      {% plugin_list_buttons model %}
-      {% block extra_controls %}{% endblock %}
-      {% if 'add' in actions %}
-        {% add_button model %}
-      {% endif %}
-      {% if 'import' in actions %}
-        {% import_button model %}
-      {% endif %}
-      {% if 'export' in actions %}
-        {% export_button model %}
-      {% endif %}
-    </div>
+  <div class="btn-list">
+    {% plugin_list_buttons model %}
+    {% block extra_controls %}{% endblock %}
+    {% if 'add' in actions %}
+      {% add_button model %}
+    {% endif %}
+    {% if 'import' in actions %}
+      {% import_button model %}
+    {% endif %}
+    {% if 'export' in actions %}
+      {% export_button model %}
+    {% endif %}
   </div>
 {% endblock controls %}
 
 {% block tabs %}
-  <ul class="nav nav-tabs px-3">
+  <ul class="nav nav-tabs page-header-tabs px-3 mb-2" role="tablist">
     <li class="nav-item" role="presentation">
-      <button class="nav-link active" id="object-list-tab" data-bs-toggle="tab" data-bs-target="#object-list" type="button" role="tab" aria-controls="edit-form" aria-selected="true">
+      <a class="nav-link active" id="object-list-tab" data-bs-toggle="tab" data-bs-target="#object-list" type="button" role="tab" aria-controls="edit-form" aria-selected="true">
         {% trans "Results" %} {% badge table.page.paginator.count %}
-      </button>
+      </a>
     </li>
     {% if filter_form %}
       <li class="nav-item" role="presentation">
@@ -77,7 +75,7 @@ Context:
         {% csrf_token %}
         {# "Select all" form #}
         {% if table.paginator.num_pages > 1 %}
-          <div id="select-all-box" class="d-none card noprint">
+          <div id="select-all-box" class="d-none card d-print-none">
             <div class="form col-md-12">
               <div class="card-body">
                 <div class="float-end">
@@ -112,13 +110,13 @@ Context:
               {% endif %}
 
           <div class="card">
-            <div class="card-body htmx-container table-responsive" id="object_list">
+            <div class="card-body htmx-container table-responsive p-1" id="object_list">
               {% include 'htmx/table.html' %}
             </div>
           </div>
 
           {# Form buttons #}
-          <div class="noprint bulk-buttons">
+          <div class="bulk-buttons mt-2 d-print-none">
             <div class="bulk-button-group">
               {% block bulk_buttons %}
                 {% if 'bulk_edit' in actions %}
diff --git a/netbox/templates/inc/table_controls_htmx.html b/netbox/templates/inc/table_controls_htmx.html
index e7fd0e7a6..5b6c4745c 100644
--- a/netbox/templates/inc/table_controls_htmx.html
+++ b/netbox/templates/inc/table_controls_htmx.html
@@ -3,7 +3,7 @@
 
 <div class="row mb-3">
   <div class="col-auto table-controls noprint">
-    <div class="input-group input-group-sm me-2 quicksearch hide-last-child">
+    <div class="input-group me-2 quicksearch hide-last-child">
       <input type="search" results="5" name="q" id="quicksearch" class="form-control" placeholder="Quick search"
         hx-get="{{ request.full_path }}" hx-target="#object_list" hx-trigger="keyup changed delay:500ms, search" />
       <button class="btn bg-transparent" type="button" id="quicksearch_clear"><i class="mdi mdi-close-circle"></i></button>
@@ -12,9 +12,9 @@
   </div>
   <div class="col-auto ms-auto table-controls noprint">
     {% if request.user.is_authenticated and table_modal %}
-      <div class="table-configure input-group input-group-sm">
+      <div class="table-configure input-group">
         <button type="button" data-bs-toggle="modal" title="{% trans "Configure Table" %}" data-bs-target="#{{ table_modal }}"
-          class="btn btn-sm btn-outline-dark">
+          class="btn">
           <i class="mdi mdi-cog"></i> {% trans "Configure Table" %}
         </button>
       </div>
diff --git a/netbox/utilities/templates/builtins/badge.html b/netbox/utilities/templates/builtins/badge.html
index d12c6108e..78e7b3232 100644
--- a/netbox/utilities/templates/builtins/badge.html
+++ b/netbox/utilities/templates/builtins/badge.html
@@ -1 +1 @@
-{% if value or show_empty %}<span class="badge bg-{{ bg_color }}">{{ value }}</span>{% endif %}
+{% if value or show_empty %}<span class="badge text-bg-{{ bg_color }}">{{ value }}</span>{% endif %}