moby/brewlog
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(mobile): hide infinite scroll sentinel on desktop

Browse source 
The sentinel div (h-4) added extra space below the pagination bar
on pages with a next page, making the pagination bar appear taller
than on the last page. Since infinite scroll only runs on mobile,
hide the sentinel on desktop with md:hidden.
This commit is contained in:
Jon Seager 2026-02-03 12:48:15 +00:00
parent 8213543ed3
commit 8fe88c8ff6
No known key found for this signature in database
6 changed files with 6 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
templates/base.html
View file

@ -61,7 +61,7 @@
if (newNextUrl) { if (newNextUrl) {
container.setAttribute("data-next-url", newNextUrl); container.setAttribute("data-next-url", newNextUrl);
var newSentinel = document.createElement("div"); var newSentinel = document.createElement("div");
newSentinel.className = "infinite-scroll-sentinel h-4"; newSentinel.className = "infinite-scroll-sentinel h-4 md:hidden";
newSentinel.setAttribute("aria-hidden", "true"); newSentinel.setAttribute("aria-hidden", "true");
container.appendChild(newSentinel); container.appendChild(newSentinel);
setupInfiniteScroll(); setupInfiniteScroll();

2
templates/partials/bag_list.html
View file

@ -126,7 +126,7 @@
</div> </div>
{% call table::pagination_header(bags, navigator, "#bag-list") %} {% call table::pagination_header(bags, navigator, "#bag-list") %}
{% if bags.has_next() %} {% if bags.has_next() %}
<div class="infinite-scroll-sentinel h-4" aria-hidden="true"></div> <div class="infinite-scroll-sentinel h-4 md:hidden" aria-hidden="true"></div>
{% endif %} {% endif %}
</div> </div>
</section> </section>

2
templates/partials/brew_list.html
View file

@ -112,7 +112,7 @@
{% call table::pagination_header(brews, navigator, "#brew-list") %} {% call table::pagination_header(brews, navigator, "#brew-list") %}
{% if brews.has_next() %} {% if brews.has_next() %}
<div class="infinite-scroll-sentinel h-4" aria-hidden="true"></div> <div class="infinite-scroll-sentinel h-4 md:hidden" aria-hidden="true"></div>
{% endif %} {% endif %}
</div> </div>
</div> </div>

2
templates/partials/gear_list.html
View file

@ -69,7 +69,7 @@
{% endif %} {% endif %}
{% call table::pagination_header(gear, navigator, "#gear-list") %} {% call table::pagination_header(gear, navigator, "#gear-list") %}
{% if gear.has_next() %} {% if gear.has_next() %}
<div class="infinite-scroll-sentinel h-4" aria-hidden="true"></div> <div class="infinite-scroll-sentinel h-4 md:hidden" aria-hidden="true"></div>
{% endif %} {% endif %}
</div> </div>
{% endif %} {% endif %}

2
templates/partials/roast_list.html
View file

@ -93,7 +93,7 @@
{% endif %} {% endif %}
{% call table::pagination_header(roasts, navigator, "#roast-list") %} {% call table::pagination_header(roasts, navigator, "#roast-list") %}
{% if roasts.has_next() %} {% if roasts.has_next() %}
<div class="infinite-scroll-sentinel h-4" aria-hidden="true"></div> <div class="infinite-scroll-sentinel h-4 md:hidden" aria-hidden="true"></div>
{% endif %} {% endif %}
</section> </section>
{% endif %} {% endif %}

2
templates/partials/roaster_list.html
View file

@ -107,7 +107,7 @@
{% endif %} {% endif %}
{% call table::pagination_header(roasters, navigator, "#roaster-list") %} {% call table::pagination_header(roasters, navigator, "#roaster-list") %}
{% if roasters.has_next() %} {% if roasters.has_next() %}
<div class="infinite-scroll-sentinel h-4" aria-hidden="true"></div> <div class="infinite-scroll-sentinel h-4 md:hidden" aria-hidden="true"></div>
{% endif %} {% endif %}
</section> </section>
{% endif %} {% endif %}