fix object list layout

netbox/templates/generic/object_list.html

@@ -40,56 +40,53 @@
 <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">
-                    {% csrf_token %}
-                    <input type="hidden" name="return_url" value="{% if return_url %}{{ return_url }}{% else %}{{ request.path }}{% if request.GET %}?{{ request.GET.urlencode }}{% endif %}{% endif %}" />
-                    {% if table.paginator.num_pages > 1 %}
-                        <div id="select_all_box" class="hidden panel panel-default noprint">
-                            <div class="panel-body">
-                                <div class="checkbox-inline">
-                                    <label for="select_all">
-                                        <input type="checkbox" id="select_all" name="_all" />
-                                        Select <strong>all {{ table.rows|length }} {{ table.data.verbose_name_plural }}</strong> matching query
-                                    </label>
-                                </div>
-                                <div class="pull-right">
-                                    {% 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" disabled="disabled">
-                                            <span class="mdi mdi-pencil" aria-hidden="true"></span> Edit All
-                                        </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" disabled="disabled">
-                                            <span class="mdi mdi-trash-can-outline" aria-hidden="true"></span> Delete All
-                                        </button>
-                                    {% endif %}
-                                </div>
-                            </div>
-                        </div>
+        {% if permissions.change or permissions.delete %}
+        <form method="post" class="form form-horizontal">
+            {% csrf_token %}
+            <input type="hidden" name="return_url" value="{% if return_url %}{{ return_url }}{% else %}{{ request.path }}{% if request.GET %}?{{ request.GET.urlencode }}{% endif %}{% endif %}" />
+            {% if table.paginator.num_pages > 1 %}
+            <div id="select_all_box" class="hidden card noprint">
+                <div class="card-body">
+                    <div class="checkbox-inline">
+                        <label for="select_all">
+                            <input type="checkbox" id="select_all" name="_all" />
+                            Select <strong>all {{ table.rows|length }} {{ table.data.verbose_name_plural }}</strong> matching query
+                        </label>
+                    </div>
+                    <div class="float-end">
+                        {% 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" disabled="disabled">
+                                <span class="mdi mdi-pencil" aria-hidden="true"></span> Edit All
+                            </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" disabled="disabled">
+                                <span class="mdi mdi-trash-can-outline" aria-hidden="true"></span> Delete All
+                            </button>
+                        {% endif %}
                     </div>
-                {% endif %}
-                {% include table_template|default:'responsive_table.html' %}
-                <div class="float-end noprint bulk-buttons">
-                    {% block bulk_buttons %}{% endblock %}
-                    {% 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">
-                        <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">
-                        <i class="bi bi-trash-fill" aria-hidden="true"></i> Delete Selected
-                    </button>
-                    {% endif %}
                 </div>
-            </form>
-            
+            </div>
+            {% endif %}
+            {% include table_template|default:'responsive_table.html' %}
+            <div class="float-start noprint bulk-buttons">
+                {% block bulk_buttons %}{% endblock %}
+                {% 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">
+                    <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">
+                    <i class="bi bi-trash-fill" aria-hidden="true"></i> Delete Selected
+                </button>
+                {% endif %}
+            </div>
+        </form>
         {% else %}
             {% include table_template|default:'responsive_table.html' %}
         {% endif %}
         {% endwith %}
-        </div>
         {% include 'inc/paginator.html' with paginator=table.paginator page=table.page %}
         <div class="clearfix"></div>
     </div>

netbox/templates/inc/paginator.html

@@ -2,25 +2,31 @@
 
 <div class="paginator float-end text-end my-3">
     {% if paginator.num_pages > 1 %}
-        <nav>
-            <ul class="pagination float-right">
-                {% if page.has_previous %}
-                    <li><a href="{% querystring request page=page.previous_page_number %}"><i class="mdi mdi-chevron-double-left"></i></a></li>
-                {% endif %}
-                {% for p in page.smart_pages %}
-                    {% if p %}
-                        <li{% if page.number == p %} class="active"{% endif %}><a href="{% querystring request page=p %}">{{ p }}</a></li>
-                    {% else %}
-                        <li class="disabled"><span>&hellip;</span></li>
-                    {% endif %}
-                {% endfor %}
-                {% if page.has_next %}
-                    <li><a href="{% querystring request page=page.next_page_number %}"><i class="mdi mdi-chevron-double-right"></i></a></li>
-                {% endif %}
-            </ul>
-        </nav>
+    <div class="btn-group btn-group-sm mb-3" role="group" aria-label="Pages">    
+    {% if page.has_previous %}
+        <a href="{% querystring request page=page.previous_page_number %}" class="btn btn-outline-secondary">
+            <i class="mdi mdi-chevron-double-left"></i>
+        </a>
+    {% endif %}
+    {% for p in page.smart_pages %}
+        {% if p %}
+        <a href="{% querystring request page=p %}" class="btn btn-outline-secondary{% if page.number == p %} active{% endif %}">
+            {{ p }}
+        </a>
+        {% else %}
+        <button type="button" class="btn btn-outline-secondary" disabled>
+            <span>&hellip;</span>
+        </button>
+        {% endif %}
+    {% endfor %}
+    {% if page.has_next %}
+        <a href="{% querystring request page=page.next_page_number %}" class="btn btn-outline-secondary">
+            <i class="mdi mdi-chevron-double-right"></i>
+        </a>
     {% endif %}
-    <form method="get">
+    </div>
+    {% endif %}
+    <form method="get" class="mb-2">
         {% for k, v_list in request.GET.lists %}
             {% if k != 'per_page' %}
                 {% for v in v_list %}
@@ -28,7 +34,7 @@
                 {% endfor %}
             {% endif %}
         {% endfor %}
-        <div class="input-group input-group-sm mb-3">
+        <div class="input-group input-group-sm">
             <select name="per_page" class="form-select" id="per_page">
             {% for n in settings.PER_PAGE_DEFAULTS %}
                 <option value="{{ n }}"{% if page.paginator.per_page == n %} selected="selected"{% endif %}>{{ n }}</option>
@@ -36,15 +42,10 @@
             </select>
             <label class="input-group-text" for="per_page">Per Page</label>
         </div>
-        {% comment %} <select name="per_page" id="per_page" class="form-select">
-            {% for n in settings.PER_PAGE_DEFAULTS %}
-                <option value="{{ n }}"{% if page.paginator.per_page == n %} selected="selected"{% endif %}>{{ n }}</option>
-            {% endfor %}
-        </select> per page {% endcomment %}
     </form>
     {% if page %}
-        <div class="text-end text-muted">
-            Showing {{ page.start_index }}-{{ page.end_index }} of {{ page.paginator.count }}
-        </div>
+    <small class="text-end text-muted">
+        Showing {{ page.start_index }}-{{ page.end_index }} of {{ page.paginator.count }}
+    </small>
     {% endif %}
 </div>