Add paginator to top of lists.

Reworked template grids to be more responsive on smaller screens.
This commit is contained in:
Chris Mills 2021-03-13 09:34:25 +00:00
parent 91fe80f73c
commit f36041f738
9 changed files with 67 additions and 61 deletions

View File

@ -33,11 +33,6 @@ footer p {
#navbar_search { #navbar_search {
padding: 0 8px; 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 */ /* Hide the username in the navigation menu on displays less than 1400px wide */
@media (max-width: 1399px) { @media (max-width: 1399px) {
@ -168,7 +163,7 @@ td.min-width {
/* Paginator */ /* Paginator */
div.paginator { div.paginator {
margin-bottom: 20px; margin-bottom: 1em;
} }
div.paginator form { div.paginator form {
margin-bottom: 6px; margin-bottom: 6px;

View File

@ -129,7 +129,7 @@
</div> </div>
{% endif %} {% endif %}
</div> </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 %} {% plugin_right_page object %}
</div> </div>
</div> </div>

View File

@ -6,13 +6,13 @@
{% export_button content_type %} {% export_button content_type %}
</div> </div>
<h1>{% block title %}{{ title }}{% endblock %}</h1> <h1>{% block title %}{{ title }}{% endblock %}</h1>
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-xs-12 col-sm-12 col-md-4 col-lg-3 pull-right noprint">
<div class="col-md-3 pull-right right-side-panel noprint"> {% include 'inc/search_panel.html' %}
{% include 'inc/search_panel.html' %} </div>
</div> <div class="col-xs-12 col-sm-12 col-md-8 col-lg-9">
{% include 'responsive_table.html' %} {% 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>
</div> </div>
{% endblock %} {% endblock %}

View File

@ -18,10 +18,10 @@
</div> </div>
<h1>{% block title %}Rack Elevations{% endblock %}</h1> <h1>{% block title %}Rack Elevations{% endblock %}</h1>
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-xs-12 col-sm-12 col-md-4 col-lg-3 pull-right noprint">
<div class="col-md-3 pull-right right-side-panel noprint"> {% include 'inc/search_panel.html' %}
{% include 'inc/search_panel.html' %} </div>
</div> <div class="col-xs-12 col-sm-12 col-md-8 col-lg-9">
{% if page %} {% if page %}
<div style="white-space: nowrap; overflow-x: scroll;"> <div style="white-space: nowrap; overflow-x: scroll;">
{% for rack in page %} {% for rack in page %}
@ -49,7 +49,7 @@
{% endfor %} {% endfor %}
</div> </div>
<br /> <br />
{% include 'inc/paginator.html' %} {% include 'inc/paginator.html' with show_count=True %}
{% else %} {% else %}
<p>No racks found</p> <p>No racks found</p>
{% endif %} {% endif %}

View File

@ -4,7 +4,7 @@
{% block content %} {% block content %}
{% include 'panel_table.html' %} {% 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"> <div class="text-muted">
Change log retention: {% if settings.CHANGELOG_RETENTION %}{{ settings.CHANGELOG_RETENTION }} days{% else %}Indefinite{% endif %} Change log retention: {% if settings.CHANGELOG_RETENTION %}{{ settings.CHANGELOG_RETENTION }} days{% else %}Indefinite{% endif %}
</div> </div>

View File

@ -92,7 +92,7 @@
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
{% include 'panel_table.html' with table=items_table heading='Tagged Objects' %} {% 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>
</div> </div>
{% endblock %} {% endblock %}

View File

@ -4,30 +4,38 @@
{% load static %} {% load static %}
{% block content %} {% 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="row">
<div class="col-md-12"> <div class="col-xs-12 col-sm-6 col-lg-6 col-md-2">
{% if filter_form %} <h1>{% block title %}{{ content_type.model_class|meta:"verbose_name_plural"|bettertitle }}{% endblock %}</h1>
<div class="col-md-3 pull-right right-side-panel noprint"> </div>
{% include 'inc/search_panel.html' %} <div class="col-xs-12 col-sm-6 col-lg-3 col-md-4 pull-right text-right noprint" style="margin-bottom: 1em;">
{% block sidebar %}{% endblock %} {% block buttons %}{% endblock %}
</div> {% 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 %} {% 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" %} {% 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 %} {% if permissions.change or permissions.delete %}
<form method="post" class="form form-horizontal"> <form method="post" class="form form-horizontal">
@ -58,7 +66,7 @@
</div> </div>
{% endif %} {% endif %}
{% include table_template|default:'responsive_table.html' %} {% 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 %} {% block bulk_buttons %}{% endblock %}
{% if bulk_edit_url and permissions.change %} {% 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"> <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' %} {% include table_template|default:'responsive_table.html' %}
{% endif %} {% endif %}
{% endwith %} {% 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 class="clearfix"></div>
</div> </div>
</div> </div>
{% table_config_form table table_name="ObjectTable" %} {% table_config_form table table_name="ObjectTable" %}
{% endblock %} {% endblock %}

View File

@ -1,6 +1,6 @@
{% load helpers %} {% load helpers %}
<div class="paginator pull-right text-right"> <div class="paginator pull-right text-right noprint">
{% if paginator.num_pages > 1 %} {% if paginator.num_pages > 1 %}
<nav> <nav>
<ul class="pagination pull-right"> <ul class="pagination pull-right">
@ -20,23 +20,25 @@
</ul> </ul>
</nav> </nav>
{% endif %} {% endif %}
<form method="get"> {% if show_count %}
{% for k, v_list in request.GET.lists %} <form method="get">
{% if k != 'per_page' %} {% for k, v_list in request.GET.lists %}
{% for v in v_list %} {% if k != 'per_page' %}
<input type="hidden" name="{{ k }}" value="{{ v }}" /> {% for v in v_list %}
{% endfor %} <input type="hidden" name="{{ k }}" value="{{ v }}" />
{% endif %} {% endfor %}
{% endfor %} {% endif %}
<select name="per_page" id="per_page"> {% endfor %}
<select name="per_page" id="per_page">
{% for n in settings.PER_PAGE_DEFAULTS %} {% for n in settings.PER_PAGE_DEFAULTS %}
<option value="{{ n }}"{% if page.paginator.per_page == n %} selected="selected"{% endif %}>{{ n }}</option> <option value="{{ n }}"{% if page.paginator.per_page == n %} selected="selected"{% endif %}>{{ n }}</option>
{% endfor %} {% endfor %}
</select> per page </select> per page
</form> {% if page %}
{% if page %} <div class="text-right text-muted">
<div class="text-right text-muted"> Showing {{ page.start_index }}-{{ page.end_index }} of {{ page.paginator.count }}
Showing {{ page.start_index }}-{{ page.end_index }} of {{ page.paginator.count }} </div>
</div> {% endif %}
</form>
{% endif %} {% endif %}
</div> </div>

View File

@ -45,5 +45,5 @@
{% else %} {% else %}
{% include table_template|default:'responsive_table.html' %} {% include table_template|default:'responsive_table.html' %}
{% endif %} {% 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> <div class="clearfix"></div>