mirror of
https://github.com/netbox-community/netbox.git
synced 2025-08-18 05:28:16 -06:00
Clean up paginator styling
This commit is contained in:
Jeremy Stretch
parent
dde1cca08c
commit
c91aec0698
@ -4,10 +4,10 @@
|
||||
|
||||
{% with preferences|get_key:"pagination.placement" as paginator_placement %}
|
||||
{% if paginator_placement == 'top' or paginator_placement == 'both' %}
|
||||
{% include 'inc/paginator_htmx.html' with table=table paginator=table.paginator page=table.page %}
|
||||
{% include 'inc/paginator.html' with htmx=True table=table paginator=table.paginator page=table.page %}
|
||||
{% endif %}
|
||||
{% render_table table 'inc/table_htmx.html' %}
|
||||
{% if paginator_placement != 'top' %}
|
||||
{% include 'inc/paginator_htmx.html' with table=table paginator=table.paginator page=table.page %}
|
||||
{% include 'inc/paginator.html' with htmx=True table=table paginator=table.paginator page=table.page %}
|
||||
{% endif %}
|
||||
{% endwith %}
|
||||
|
||||
@ -1,55 +1,115 @@
|
||||
{% load helpers %}
|
||||
{% load i18n %}
|
||||
|
||||
<div class="row">
|
||||
<div class="col col-md-6 mb-0">
|
||||
{# Page number carousel #}
|
||||
<div class="d-flex justify-content-between align-items-center p-2">
|
||||
|
||||
{# Pages carousel #}
|
||||
{% if paginator.num_pages > 1 %}
|
||||
<div class="btn-group btn-group-sm mb-3" role="group" aria-label="Pages">
|
||||
<nav aria-label="{% trans "Page selection" %}">
|
||||
<ul class="pagination mb-0">
|
||||
|
||||
{# Previous page #}
|
||||
{% 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>
|
||||
<li class="page-item">
|
||||
{% if htmx %}
|
||||
<a href="#"
|
||||
hx-get="{{ table.htmx_url }}{% querystring request page=page.previous_page_number %}"
|
||||
hx-target="closest .htmx-container"
|
||||
{% if not table.embedded %}hx-push-url="true"{% endif %}
|
||||
class="page-link"
|
||||
>
|
||||
<i class="mdi mdi-chevron-left"></i>
|
||||
</a>
|
||||
{% else %}
|
||||
<a href="{% querystring request page=page.previous_page_number %}" class="page-link">
|
||||
<i class="mdi mdi-chevron-left"></i>
|
||||
</a>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endif %}
|
||||
{# /Previous page #}
|
||||
|
||||
{# Page numbers #}
|
||||
{% for p in page.smart_pages %}
|
||||
{% if p %}
|
||||
<li class="page-item{% if page.number == p %} active" aria-current="page{% endif %}">
|
||||
{% if p and htmx %}
|
||||
<a href="#"
|
||||
hx-get="{{ table.htmx_url }}{% querystring request page=p %}"
|
||||
hx-target="closest .htmx-container"
|
||||
{% if not table.embedded %}hx-push-url="true"{% endif %}
|
||||
class="page-link"
|
||||
>
|
||||
{{ p }}
|
||||
</a>
|
||||
{% elif 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>…</span>
|
||||
</button>
|
||||
<span class="page-link" disabled>…</span>
|
||||
{% 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 %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="col col-md-6 mb-0 text-end">
|
||||
{# Per-page count selector #}
|
||||
{% if page %}
|
||||
<div class="dropdown dropup">
|
||||
<button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
|
||||
{% trans "Per Page" %}
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
{% for n in page.paginator.get_page_lengths %}
|
||||
<li>
|
||||
<a href="{% querystring request per_page=n %}" class="dropdown-item">{{ n }}</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
{# /Page numbers #}
|
||||
|
||||
{# Next page #}
|
||||
{% if page.has_next %}
|
||||
<li class="page-item">
|
||||
{% if htmx %}
|
||||
<a href="#"
|
||||
hx-get="{{ table.htmx_url }}{% querystring request page=page.next_page_number %}"
|
||||
hx-target="closest .htmx-container"
|
||||
{% if not table.embedded %}hx-push-url="true"{% endif %}
|
||||
class="page-link"
|
||||
>
|
||||
<i class="mdi mdi-chevron-right"></i>
|
||||
</a>
|
||||
{% else %}
|
||||
<a href="{% querystring request page=page.next_page_number %}" class="page-link">
|
||||
<i class="mdi mdi-chevron-right"></i>
|
||||
</a>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endif %}
|
||||
{# /Next page #}
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
{% endif %}
|
||||
{# /Pages carousel #}
|
||||
|
||||
{# Showing #}
|
||||
<small class="text-end text-muted">
|
||||
{% blocktrans trimmed with start=page.start_index end=page.end_index total=page.paginator.count %}
|
||||
Showing {{ start }}-{{ end }} of {{ total }}
|
||||
{% endblocktrans %}
|
||||
</small>
|
||||
{# /Showing #}
|
||||
|
||||
{# Pagination options #}
|
||||
<nav class="text-end" aria-label="{% trans "Pagination options" %}">
|
||||
{% if page %}
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
|
||||
{% trans "Per Page" %}
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
{% for n in page.paginator.get_page_lengths %}
|
||||
{% if htmx %}
|
||||
<a href="#"
|
||||
hx-get="{{ table.htmx_url }}{% querystring request per_page=n %}"
|
||||
hx-target="closest .htmx-container"
|
||||
{% if not table.embedded %}hx-push-url="true"{% endif %}
|
||||
class="dropdown-item"
|
||||
>{{ n }}</a>
|
||||
{% else %}
|
||||
<a href="{% querystring request per_page=n %}" class="dropdown-item">{{ n }}</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</nav>
|
||||
{# /Pagination options #}
|
||||
|
||||
</div>
|
||||
|
||||
@ -1,75 +0,0 @@
|
||||
{% load helpers %}
|
||||
{% load i18n %}
|
||||
|
||||
<div class="row">
|
||||
<div class="col col-md-6 mb-0">
|
||||
{# Page number carousel #}
|
||||
{% if paginator.num_pages > 1 %}
|
||||
<div class="btn-group btn-group-sm" role="group" aria-label="Pages">
|
||||
{% if page.has_previous %}
|
||||
<a href="#"
|
||||
hx-get="{{ table.htmx_url }}{% querystring request page=page.previous_page_number %}"
|
||||
hx-target="closest .htmx-container"
|
||||
{% if not table.embedded %}hx-push-url="true"{% endif %}
|
||||
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="#"
|
||||
hx-get="{{ table.htmx_url }}{% querystring request page=p %}"
|
||||
hx-target="closest .htmx-container"
|
||||
{% if not table.embedded %}hx-push-url="true"{% endif %}
|
||||
class="btn btn-outline-secondary{% if page.number == p %} active{% endif %}"
|
||||
>
|
||||
{{ p }}
|
||||
</a>
|
||||
{% else %}
|
||||
<button type="button" class="btn btn-outline-secondary" disabled>
|
||||
<span>…</span>
|
||||
</button>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% if page.has_next %}
|
||||
<a href="#"
|
||||
hx-get="{{ table.htmx_url }}{% querystring request page=page.next_page_number %}"
|
||||
hx-target="closest .htmx-container"
|
||||
{% if not table.embedded %}hx-push-url="true"{% endif %}
|
||||
class="btn btn-outline-secondary"
|
||||
>
|
||||
<i class="mdi mdi-chevron-double-right"></i>
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="col col-md-6 mb-0 text-end">
|
||||
{# Per-page count selector #}
|
||||
{% if page %}
|
||||
<div class="dropdown dropup">
|
||||
<button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
|
||||
{% trans "Per Page" %}
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
{% for n in page.paginator.get_page_lengths %}
|
||||
<li>
|
||||
<a href="#"
|
||||
hx-get="{{ table.htmx_url }}{% querystring request per_page=n %}"
|
||||
hx-target="closest .htmx-container"
|
||||
{% if not table.embedded %}hx-push-url="true"{% endif %}
|
||||
class="dropdown-item"
|
||||
>{{ n }}</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
<small class="text-end text-muted">
|
||||
{% blocktrans trimmed with start=page.start_index end=page.end_index total=page.paginator.count %}
|
||||
Showing {{ start }}-{{ end }} of {{ total }}
|
||||
{% endblocktrans %}
|
||||
</small>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Reference in New Issue
Block a user