Gallery-Archivist/archivist/apps/templates/includes/pageination.html

88 lines
3.5 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!-- Pagination -->
<div class="row justify-content-center">
<div class="col">
<nav aria-label="Page navigation">
<ul class="pagination justify-content-center">
{% if page_obj.has_previous %}
<li class="page-item">
<a class="page-link fs-4 lh-1" href="?page=1" aria-label="First">
«
</a>
</li>
<li class="page-item">
<a class="page-link fs-4 lh-1" href="?page={{ page_obj.previous_page_number }}" aria-label="Previous">
<span aria-hidden="true">
</span>
</a>
</li>
{% else %}
<li class="page-item disabled">
<span class="page-link fs-4 lh-1 text-decoration-line-through">
«
</span>
</li>
<li class="page-item disabled">
<span class="page-link fs-4 lh-1 text-decoration-line-through">
</span>
</li>
{% endif %}
<li class="page-item disabled">
<span class="page-link text-nowrap fs-4 lh-1">
Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}.
</span>
</li>
{% if page_obj.has_next %}
<li class="page-item">
<a class="page-link fs-4 lh-1" href="?page={{ page_obj.next_page_number }}" aria-label="Next">
<span aria-hidden="true">
</span>
</a>
</li>
<li class="page-item">
<a class="page-link fs-4 lh-1" href="?page={{ page_obj.paginator.num_pages }}" aria-label="Last">
»
</a>
</li>
{% else %}
<li class="page-item disabled">
<span class="page-link fs-4 lh-1 text-decoration-line-through">
</span>
</li>
<li class="page-item disabled">
<span class="page-link fs-4 lh-1 text-decoration-line-through">
»
</span>
</li>
{% endif %}
</ul>
</nav>
</div>
<!-- Jump-to field -->
<div class="col ">
<form method="get" class="d-flex flex-row flex-nowrap g-3 justify-content-center ">
<label for="jumpToPage" class="col-auto col-form-label">Jump to:</label>
<div class="col-4 col-sm-3 col-md-3 col-lg-2 col-xl-1 mx-2">
<input type="number" name="page" id="jumpToPage" class="form-control" min="1" max="{{ page_obj.paginator.num_pages }}" value="{{ page_obj.number }}"">
</div>
<div class="col-auto">
<button type="submit" class="btn btn-primary">Go</button>
</div>
</form>
</div>
<!-- Jump to field End -->
</div>
<!-- Pagination End -->