From f36041f738f9b64c0fa47d217235017913591206 Mon Sep 17 00:00:00 2001
From: Chris Mills <cpmills1975@users.noreply.github.com>
Date: Sat, 13 Mar 2021 09:34:25 +0000
Subject: [PATCH] Add paginator to top of lists. Reworked template grids to be
 more responsive on smaller screens.

---
 netbox/project-static/css/base.css            |  7 +--
 netbox/templates/circuits/provider.html       |  2 +-
 netbox/templates/dcim/connections_list.html   | 12 ++--
 .../templates/dcim/rack_elevation_list.html   | 10 ++--
 netbox/templates/extras/object_changelog.html |  2 +-
 netbox/templates/extras/tag.html              |  2 +-
 netbox/templates/generic/object_list.html     | 57 +++++++++++--------
 netbox/templates/inc/paginator.html           | 34 +++++------
 netbox/templates/utilities/obj_table.html     |  2 +-
 9 files changed, 67 insertions(+), 61 deletions(-)

diff --git a/netbox/project-static/css/base.css b/netbox/project-static/css/base.css
index efdca81be..4581f4ed2 100644
--- a/netbox/project-static/css/base.css
+++ b/netbox/project-static/css/base.css
@@ -33,11 +33,6 @@ footer p {
 #navbar_search {
     padding: 0 8px;
 }
-.right-side-panel {
-    max-width: 400px;
-    min-width: 300px;
-    padding-right: 0;
-}
 
 /* Hide the username in the navigation menu on displays less than 1400px wide */
 @media (max-width: 1399px) {
@@ -168,7 +163,7 @@ td.min-width {
 
 /* Paginator */
 div.paginator {
-    margin-bottom: 20px;
+    margin-bottom: 1em;
 }
 div.paginator form {
     margin-bottom: 6px;
diff --git a/netbox/templates/circuits/provider.html b/netbox/templates/circuits/provider.html
index 8778c3ac2..5c28b8c42 100644
--- a/netbox/templates/circuits/provider.html
+++ b/netbox/templates/circuits/provider.html
@@ -129,7 +129,7 @@
                 </div>
             {% endif %}
         </div>
-    {% include 'inc/paginator.html' with paginator=circuits_table.paginator page=circuits_table.page %}
+    {% include 'inc/paginator.html' with paginator=circuits_table.paginator page=circuits_table.page show_count=True %}
     {% plugin_right_page object %}
     </div>
 </div>
diff --git a/netbox/templates/dcim/connections_list.html b/netbox/templates/dcim/connections_list.html
index 80d76e7d1..449c579ab 100644
--- a/netbox/templates/dcim/connections_list.html
+++ b/netbox/templates/dcim/connections_list.html
@@ -6,13 +6,13 @@
     {% export_button content_type %}
 </div>
 <h1>{% block title %}{{ title }}{% endblock %}</h1>
-<div class="row">
-	  <div class="col-md-12">
-        <div class="col-md-3 pull-right right-side-panel noprint">
-            {% include 'inc/search_panel.html' %}
-        </div>
+<div class="row">        
+    <div class="col-xs-12 col-sm-12 col-md-4 col-lg-3 pull-right noprint">
+        {% include 'inc/search_panel.html' %}
+    </div>
+	<div class="col-xs-12 col-sm-12 col-md-8 col-lg-9">
         {% include 'responsive_table.html' %}
-        {% include 'inc/paginator.html' with paginator=table.paginator page=table.page %}
+        {% include 'inc/paginator.html' with paginator=table.paginator page=table.page show_count=True %}
     </div>
 </div>
 {% endblock %}
diff --git a/netbox/templates/dcim/rack_elevation_list.html b/netbox/templates/dcim/rack_elevation_list.html
index a42610e35..92b76e16b 100644
--- a/netbox/templates/dcim/rack_elevation_list.html
+++ b/netbox/templates/dcim/rack_elevation_list.html
@@ -18,10 +18,10 @@
 </div>
 <h1>{% block title %}Rack Elevations{% endblock %}</h1>
 <div class="row">
-    <div class="col-md-12">
-        <div class="col-md-3 pull-right right-side-panel noprint">
-            {% include 'inc/search_panel.html' %}
-        </div>
+    <div class="col-xs-12 col-sm-12 col-md-4 col-lg-3 pull-right noprint">
+        {% include 'inc/search_panel.html' %}
+    </div>
+	<div class="col-xs-12 col-sm-12 col-md-8 col-lg-9">
         {% if page %}
             <div style="white-space: nowrap; overflow-x: scroll;">
                 {% for rack in page %}
@@ -49,7 +49,7 @@
                 {% endfor %}
             </div>
             <br />
-            {% include 'inc/paginator.html' %}
+            {% include 'inc/paginator.html' with show_count=True %}
         {% else %}
             <p>No racks found</p>
         {% endif %}
diff --git a/netbox/templates/extras/object_changelog.html b/netbox/templates/extras/object_changelog.html
index 64f76fe60..b579a6f84 100644
--- a/netbox/templates/extras/object_changelog.html
+++ b/netbox/templates/extras/object_changelog.html
@@ -4,7 +4,7 @@
 
 {% block content %}
     {% include 'panel_table.html' %}
-    {% include 'inc/paginator.html' with paginator=table.paginator page=table.page %}
+    {% include 'inc/paginator.html' with paginator=table.paginator page=table.page show_count=True %}
     <div class="text-muted">
         Change log retention: {% if settings.CHANGELOG_RETENTION %}{{ settings.CHANGELOG_RETENTION }} days{% else %}Indefinite{% endif %}
     </div>
diff --git a/netbox/templates/extras/tag.html b/netbox/templates/extras/tag.html
index 2ad7cf814..e19084e7f 100644
--- a/netbox/templates/extras/tag.html
+++ b/netbox/templates/extras/tag.html
@@ -92,7 +92,7 @@
         </div>
         <div class="col-md-6">
             {% include 'panel_table.html' with table=items_table heading='Tagged Objects' %}
-            {% include 'inc/paginator.html' with paginator=items_table.paginator page=items_table.page %}
+            {% include 'inc/paginator.html' with paginator=items_table.paginator page=items_table.page show_count=True %}
         </div>
     </div>
 {% endblock %}
diff --git a/netbox/templates/generic/object_list.html b/netbox/templates/generic/object_list.html
index 738cbca49..386f77d8d 100644
--- a/netbox/templates/generic/object_list.html
+++ b/netbox/templates/generic/object_list.html
@@ -4,30 +4,38 @@
 {% 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 %}
-        {% 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="col-xs-12 col-sm-6 col-lg-6 col-md-2">
+        <h1>{% block title %}{{ content_type.model_class|meta:"verbose_name_plural"|bettertitle }}{% endblock %}</h1>
+    </div>
+    <div class="col-xs-12 col-sm-6 col-lg-3 col-md-4 pull-right text-right noprint" style="margin-bottom: 1em;">
+        {% 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 %}
+            {% 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>
+    <div class="col-xs-12 col-sm-12 col-lg-3 col-md-6">
+        {% include 'inc/paginator.html' with paginator=table.paginator page=table.page show_count=False%}
+    </div>
+</div>
+
+<div class="row">
+    {% if filter_form %}
+        <div class="col-xs-12 col-sm-12 col-lg-3 col-md-4 pull-right noprint">
+            {% include 'inc/search_panel.html' %}
+            {% block sidebar %}{% endblock %}
+        </div>
+    {% endif %}
+    <div class="col-xs-12 col-sm-12 col-lg-9 col-md-8">
         {% 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,7 +66,7 @@
                     </div>
                 {% endif %}
                 {% include table_template|default:'responsive_table.html' %}
-                <div class="pull-left noprint">
+                <div class="pull-left noprint" style="margin-bottom: 1em;">
                     {% 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">
@@ -76,10 +84,11 @@
             {% include table_template|default:'responsive_table.html' %}
         {% endif %}
         {% endwith %}
-        {% include 'inc/paginator.html' with paginator=table.paginator page=table.page %}
+        {% include 'inc/paginator.html' with paginator=table.paginator page=table.page show_count=True %}
         <div class="clearfix"></div>
     </div>
 </div>
+
 {% table_config_form table table_name="ObjectTable" %}
 {% endblock %}
 
diff --git a/netbox/templates/inc/paginator.html b/netbox/templates/inc/paginator.html
index 37c3b06df..158eded64 100644
--- a/netbox/templates/inc/paginator.html
+++ b/netbox/templates/inc/paginator.html
@@ -1,6 +1,6 @@
 {% load helpers %}
 
-<div class="paginator pull-right text-right">
+<div class="paginator pull-right text-right noprint">
     {% if paginator.num_pages > 1 %}
         <nav>
             <ul class="pagination pull-right">
@@ -20,23 +20,25 @@
             </ul>
         </nav>
     {% endif %}
-    <form method="get">
-        {% for k, v_list in request.GET.lists %}
-            {% if k != 'per_page' %}
-                {% for v in v_list %}
-                    <input type="hidden" name="{{ k }}" value="{{ v }}" />
-                {% endfor %}
-            {% endif %}
-        {% endfor %}
-        <select name="per_page" id="per_page">
+    {% if show_count %}
+        <form method="get">
+            {% for k, v_list in request.GET.lists %}
+                {% if k != 'per_page' %}
+                    {% for v in v_list %}
+                        <input type="hidden" name="{{ k }}" value="{{ v }}" />
+                    {% endfor %}
+                {% endif %}
+            {% endfor %}
+            <select name="per_page" id="per_page">
             {% 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
-    </form>
-    {% if page %}
-        <div class="text-right text-muted">
-            Showing {{ page.start_index }}-{{ page.end_index }} of {{ page.paginator.count }}
-        </div>
+            </select> per page
+            {% if page %}
+                <div class="text-right text-muted">
+                    Showing {{ page.start_index }}-{{ page.end_index }} of {{ page.paginator.count }}
+                </div>
+            {% endif %}
+        </form>
     {% endif %}
 </div>
diff --git a/netbox/templates/utilities/obj_table.html b/netbox/templates/utilities/obj_table.html
index b1ea58668..261d6b6f6 100644
--- a/netbox/templates/utilities/obj_table.html
+++ b/netbox/templates/utilities/obj_table.html
@@ -45,5 +45,5 @@
 {% else %}
     {% include table_template|default:'responsive_table.html' %}
 {% endif %}
-    {% include 'inc/paginator.html' with paginator=table.paginator page=table.page %}
+{% include 'inc/paginator.html' with paginator=table.paginator page=table.page show_count=True %}
 <div class="clearfix"></div>