Last active
September 13, 2024 14:59
-
-
Save rg3915/9c89b8d720f5636b0f6928de76566c04 to your computer and use it in GitHub Desktop.
Pagination PicoCSS dark mode
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"> | |
| <link rel="shortcut icon" href="https://www.djangoproject.com/favicon.ico"> | |
| <title>Pagination | PicoCSS</title> | |
| <!-- PicoCSS --> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css" /> | |
| </head> | |
| <body class="container"> | |
| {% include "includes/pagination.html" %} | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .pagination .active { | |
| font-weight: bold; | |
| color: #121212; | |
| background-color: #1e88e5; | |
| border-radius: 0.25rem; | |
| padding: 0.5rem 1rem; | |
| text-decoration: none; | |
| } | |
| /* Style pagination links for dark mode */ | |
| .pagination a { | |
| color: #e0e0e0; | |
| padding: 0.5rem 1rem; | |
| border-radius: 0.25rem; | |
| text-decoration: none; | |
| } | |
| .pagination a:hover { | |
| background-color: #333333; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <nav aria-label="Pagination"> | |
| <ul class="pagination"> | |
| {% if page_obj.has_previous %} | |
| <li><a href="{% querystring page=1 %}">«</a></li> | |
| <li><a href="{% querystring page=page_obj.previous_page_number %}">‹</a></li> | |
| {% endif %} | |
| {% for pg in page_obj.paginator.page_range %} | |
| {% if pg <= 3 or pg >= page_obj.paginator.num_pages|add:'-2' %} | |
| <li class="{% if page_obj.number == pg %}active{% endif %}"> | |
| <a href="{% querystring page=pg %}">{{ pg }}</a> | |
| </li> | |
| {% elif pg >= page_obj.number|add:'-3' and pg <= page_obj.number|add:'3' %} | |
| <li class="{% if page_obj.number == pg %}active{% endif %}"> | |
| <a href="{% querystring page=pg %}">{{ pg }}</a> | |
| </li> | |
| {% elif pg == page_obj.number|add:'-4' or pg == page_obj.number|add:'4' %} | |
| <li><a href="#">...</a></li> | |
| {% endif %} | |
| {% endfor %} | |
| {% if page_obj.has_next %} | |
| <li><a href="{% querystring page=page_obj.next_page_number %}">›</a></li> | |
| <li><a href="{% querystring page=page_obj.paginator.num_pages %}">»</a></li> | |
| {% endif %} | |
| </ul> | |
| </nav> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment