Story 2377: Webpage Integration: Implement Pagination to Posts Feed Page#2392
Open
Story 2377: Webpage Integration: Implement Pagination to Posts Feed Page#2392
Conversation
herzog0
changed the title
julhoang
reviewed
May 6, 2026
Collaborator
julhoang
left a comment
julhoang
left a comment
There was a problem hiding this comment.
@herzog0 This works really great! Just 1 small responsive issue I noticed is when we have a small mobile screen – I'm testing using iPhone SE and when the pagination is the longest it could get like below, we'll get an overflow:
Perhaps we shouldhave the mobile pagination only have a sliding window of +/- 1 item instead of 2 🤔
jlchilders11
requested changes
May 7, 2026
Collaborator
jlchilders11
left a comment
jlchilders11
left a comment
There was a problem hiding this comment.
Couple of small changes to better leverage the paginator in the template. See https://docs.djangoproject.com/en/6.0/topics/pagination/ for details on using these functions.
- `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
force-pushed
the
teo/2377-posts-feed-pagination
branch
from
87ad8fe to
8af1f7e
Compare
herzog0
force-pushed
the
teo/2377-posts-feed-pagination
branch
from
d19388f to
15db8f8
Compare
jlchilders11
requested changes
May 8, 2026
Collaborator
jlchilders11
left a comment
jlchilders11
left a comment
There was a problem hiding this comment.
Couple more small django things.
| num_pages = page.paginator.num_pages | ||
| current = page.number | ||
|
|
||
| if num_pages <= 1: |
Collaborator
There was a problem hiding this comment.
Let's leverage django hero and use page.has_previous()
| return items | ||
|
|
||
|
|
||
| @register.simple_tag(takes_context=True) |
Collaborator
There was a problem hiding this comment.
I didn't catch this last time, but django actually has a tag we can use for a lot of this logic already: https://docs.djangoproject.com/en/6.0/ref/templates/builtins/#querystring
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
3 participants
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