Feature: Pagination Widget with list of numbers.

Adds to the navigation widget, preserving forward/backward nav, and
inserting a list of clickable page numbers between them.

Phone sized devices continue without this widget as deterministic
display under small screen sizes has not been solved.

The widget is agnostic to the actual amount of pages there are that one
can navigate to and as such shows all plausible, albeit not necessarilly
valid, possibilities.

This widget does not interfere with infinite scroll in any fashion.
This commit is contained in:
llmII 2023-01-04 20:18:48 -06:00 committed by mrpaulblack
parent a8eb9d15e2
commit d2b2300ee1
3 changed files with 61 additions and 1 deletions

View File

@ -166,4 +166,5 @@ features or generally made searx better:
- Sam A. `<https://samsapti.dev>`_ - Sam A. `<https://samsapti.dev>`_
- @XavierHorwood - @XavierHorwood
- Ahmad Alkadri `<https://github.com/ahmad-alkadri>`_ - Ahmad Alkadri `<https://github.com/ahmad-alkadri>`_
- Milad Laly @Milad-Laly - Milad Laly @Milad-Laly
- @llmII

View File

@ -734,6 +734,36 @@ article[data-vim-selected].category-social {
} }
} }
.numbered_pagination {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
overflow: hidden;
}
@media screen and (max-width: calc(@phone - 0.5px)) {
.numbered_pagination {
display: none;
}
}
.page_number {
background: none !important;
border: none !important;
color: var(--color-result-link-font) !important;
text-decoration: underline !important;
cursor: pointer !important;
}
.page_number_current {
background: none !important;
border: none !important;
color: var(--color-result-link-visited-font) !important;
text-decoration: none !important;
cursor: pointer !important;
}
#apis { #apis {
margin-top: 8px; margin-top: 8px;
clear: both; clear: both;

View File

@ -187,6 +187,35 @@
<button role="link" type="submit">{{ _('Next page') }} {{ icon_small('chevron-right') }}</button> <button role="link" type="submit">{{ _('Next page') }} {{ icon_small('chevron-right') }}</button>
</div> </div>
</form> </form>
{% set pstart = 1 %}
{% set pend = 11 %}
{% if pageno > 5 %}
{% set pstart = pageno - 4 %}
{% set pend = pageno + 6 %}
{% endif %}
<div class="numbered_pagination">
{% for x in range(pstart, pend) %}
<form method="{{ method or 'POST' }}" action="{{ url_for('search') }}" class="page_number">
<input type="hidden" name="q" value="{{ q|e }}" >
{% for category in selected_categories %}
<input type="hidden" name="category_{{ category }}" value="1" >
{% endfor %}
<input type="hidden" name="pageno" value="{{ x }}" >
<input type="hidden" name="language" value="{{ current_language }}" >
<input type="hidden" name="time_range" value="{{ time_range }}" >
<input type="hidden" name="safesearch" value="{{ safesearch }}" >
<input type="hidden" name="theme" value="{{ theme }}" >
{% if timeout_limit %}<input type="hidden" name="timeout_limit" value="{{ timeout_limit|e }}" >{% endif %}
{{- engine_data_form(engine_data) -}}
{% if pageno == x %}
<button role="link" class="page_number_current" type="button">{{ x }}</button>
{% else %}
<button role="link" class="page_number" type="submit">{{ x }}</button>
{% endif %}
</form>
{% endfor %}
</div>
</nav> </nav>
{% endif %} {% endif %}
</div> </div>