Add pagination for search results

- Add SearchResult dataclass with pagination metadata
- Update search_flickr() to accept page parameter
- Parse total results count from Flickr response
- Add Bootstrap pagination controls to template
- Display total result count in UI
- Update documentation

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Edward Betts 2026-02-04 17:03:30 +00:00
parent c3bc6895c4
commit 0062de8ede
4 changed files with 118 additions and 25 deletions

View file

@ -15,13 +15,13 @@
<input type="submit" value="Submit">
</form>
{% if name and photos is defined and photos %}
{% if name and search_result is defined and search_result.photos %}
<p>Wikipedia article: {{ name }}</p>
<p>Select a photo to compose a message:</p>
<p>Select a photo to compose a message ({{ search_result.total_photos | default(0) }} results):</p>
<div class="row row-cols-2 row-cols-md-3 row-cols-lg-4 g-3 mb-3">
{% for photo in photos %}
{% for photo in search_result.photos %}
<div class="col">
<div class="card h-100">
<a href="{{ url_for(request.endpoint, enwp=enwp, flickr=photo.flickr_url, img=photo.medium_url) }}">
@ -36,6 +36,59 @@
{% endfor %}
</div>
{% if search_result.total_pages > 1 %}
<nav aria-label="Search results pagination">
<ul class="pagination justify-content-center">
{% if search_result.current_page > 1 %}
<li class="page-item">
<a class="page-link" href="{{ url_for(request.endpoint, enwp=enwp, page=search_result.current_page - 1) }}">Previous</a>
</li>
{% else %}
<li class="page-item disabled">
<span class="page-link">Previous</span>
</li>
{% endif %}
{% set start_page = [1, search_result.current_page - 2] | max %}
{% set end_page = [search_result.total_pages, search_result.current_page + 2] | min %}
{% if start_page > 1 %}
<li class="page-item">
<a class="page-link" href="{{ url_for(request.endpoint, enwp=enwp, page=1) }}">1</a>
</li>
{% if start_page > 2 %}
<li class="page-item disabled"><span class="page-link">...</span></li>
{% endif %}
{% endif %}
{% for p in range(start_page, end_page + 1) %}
<li class="page-item {{ 'active' if p == search_result.current_page else '' }}">
<a class="page-link" href="{{ url_for(request.endpoint, enwp=enwp, page=p) }}">{{ p }}</a>
</li>
{% endfor %}
{% if end_page < search_result.total_pages %}
{% if end_page < search_result.total_pages - 1 %}
<li class="page-item disabled"><span class="page-link">...</span></li>
{% endif %}
<li class="page-item">
<a class="page-link" href="{{ url_for(request.endpoint, enwp=enwp, page=search_result.total_pages) }}">{{ search_result.total_pages }}</a>
</li>
{% endif %}
{% if search_result.current_page < search_result.total_pages %}
<li class="page-item">
<a class="page-link" href="{{ url_for(request.endpoint, enwp=enwp, page=search_result.current_page + 1) }}">Next</a>
</li>
{% else %}
<li class="page-item disabled">
<span class="page-link">Next</span>
</li>
{% endif %}
</ul>
</nav>
{% endif %}
<p class="text-muted small">
<a href="https://flickr.com/search/?view_all=1&text={{ '"' + name + '"' | urlencode }}" target="_blank">View full search on Flickr</a>
</p>