Story 2377: Webpage Integration: Implement Pagination to Posts Feed Page#2392
Open
Story 2377: Webpage Integration: Implement Pagination to Posts Feed Page#2392
Conversation
- `core/templatetags/pagination_tags.py`: new `pagination_range` tag (computes window ±2 with leading/trailing ellipsis) and `page_url` tag (builds URL preserving all existing query params) - `static/css/v3/pagination.css`: component styles using design tokens; active page uses --color-surface-weak, inactive --color-text-secondary, ellipsis --color-text-tertiary, border-radius --border-radius-xl (12px) - `templates/v3/includes/_pagination.html`: reusable partial; works in standard ListView context (page_obj/paginator) or in isolation via pagination_current/pagination_total/pagination_page_param params - `news/views.py`: enable pagination (paginate_by=10) on EntryListView - `templates/v3/posts_list.html`: include pagination partial below posts - `templates/v3/examples/_v3_example_section.html`: 7 clickable demo examples (24-page and small-page sets) driven by URL query params - `core/views.py`: add demo_pagination context data to V3ComponentDemoView
…o context
Django evaluates filter arguments eagerly, so `|default:page_obj.number`
raises VariableDoesNotExist when page_obj is not in context (e.g. demo page).
Replace the broken `{% with current=...|default:page_obj.number %}` pattern
with a new `resolve_pagination` template tag that reads page_obj/paginator
from context safely via Python's dict.get().
Each demo example div gets a unique id (pag-pg24a, etc.) plus scroll-margin-top so the browser snaps to the right position. Every page link in the partial now appends #anchor when pagination_anchor is set, keeping the user in the right section after a page change. The posts feed does not pass pagination_anchor so its links are unchanged.
pagination_range now returns [1] for num_pages=1 instead of hiding. The partial guard changed from total > 1 to total >= 1 so the nav always renders (both chevrons disabled, single page number shown).
herzog0
changed the title
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Issue: #2377
Summary & Context
This PR introduces a new V3 pagination component, including custom template tags for dynamic page range calculation and URL generation. It integrates this new component into the posts feed (news list) and provides comprehensive demo examples for various pagination states, ensuring a consistent user experience.
localhost:8000/v3/components/#pagination,localhost:8000/news/Changes
resolve_pagination,pagination_range,page_url) for handling pagination logic, contextual data resolution, and URL construction with query parameters and anchor links.pagination.css) and a dedicated HTML include (_pagination.html), featuring page numbers, ellipses, and chevron navigation.EntryListView(posts feed) by enablingpaginate_byand including the pagination template.V3ComponentDemoViewto include a new section demonstrating various pagination scenarios, with parameters for current page, total pages, and anchor scrolling, allowing for easy testing of different pagination states.Screenshots
Mobile:
Desktop:
Dark mode:
Self-review Checklist
Frontend