Olivero pager wraps more and more as active page number is higher if there is a sidebar

Created on 12 February 2024, 19 days ago
Updated 15 February 2024, 17 days ago

Problem/Motivation

Pages wraps more and more as the page number gets higher.

First page:

Third page:

Sixth page:

Further pages did not wrap more, I tried up to page 22 :)

Steps to reproduce

This happens on hojtsy.hu, I assume it is not special to the site since I don't have any customization to Olivero yet.

Proposed resolution

Don't wrap the pager. Not sure how though.

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet

🐛 Bug report
Status

Needs work

Version

11.0 🔥

Component
Olivero 

Last updated about 1 hour ago

Created by

🇭🇺Hungary Gábor Hojtsy Hungary

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @Gábor Hojtsy
  • Status changed to Postponed: needs info 19 days ago
  • 🇺🇸United States mherchel Gainesville, FL, US

    I can't reproduce this with out of the box Drupal. When I look at your site, I do see the issue, but the markup is changed a bit (not sure what's doing it). There's also a sidebar block that's displaying empty markup. That might be related.

    Not sure how to troubleshoot this, because I can't reproduce. Ping me in slack and we can figure out time to troubleshoot.

  • Status changed to Active 19 days ago
  • 🇭🇺Hungary Gábor Hojtsy Hungary

    The only block I have in the sidebar is the book navigation block. Eg. https://www.hojtsy.hu/blog/2013-jul-17/drupal-8-multilingual-tidbits-8-t... shows that in action. Its not very well styled, but that is another question :)

    Seems like on pages like the front page where there is no book navigation this still produces some whitespace which makes Olivero think there is a sidebar. I think that in itself is a bug. (But this also means that if there is a sidebar, the pager will not be styled properly?)

  • 🇺🇸United States mherchel Gainesville, FL, US

    I think that in itself is a bug.

    Yeah, I agree with that. If you disable that block, does it fix the pager issue?

  • 🇭🇺Hungary Gábor Hojtsy Hungary

    The pager is good when I disable the sidebar block. So I think there are two bugs:

    (1) the pager wraps when there is a sidebar block
    (2) there looks like whitespace produced from block templates that the main page template thinks is sidebar content

  • 🇭🇺Hungary Gábor Hojtsy Hungary

    It seems like the Olivero book navigation template override attaches the olivero book library (hah, get it? book library!) even if there is no book tree to display. That may result in some whitespace left around from there? I don't have enough experience to know how whitespace is handled in templates.

  • Status changed to Needs work 18 days ago
  • I can confirm this issue when placing any block in the side-bar region the pager wrapped up in the next line.

  • 🇮🇳India Gauravvv Delhi, India

    Gauravvvv made their first commit to this issue’s fork.

  • Status changed to Needs review 18 days ago
  • 🇮🇳India Gauravvv Delhi, India
  • Pipeline finished with Success
    18 days ago
    Total: 552s
    #94492
  • Status changed to RTBC 18 days ago
  • Tested the MR 6591 and it worked fine the pager did not wrap into the next line even if there is a sidebar.

    Attached Before/After screenshots

    Thanks

  • 🇭🇺Hungary Gábor Hojtsy Hungary

    How does this look with a tall sidebar? I am not well versed enough in CSS flex to tell sorry :)

  • Status changed to Needs work 17 days ago
  • 🇺🇸United States mherchel Gainesville, FL, US

    The current patch needs a different approach. The pager needs to wrap if 1) narrow viewport or 2) user zooms in where the items would otherwise be off the screen. In addition, @Gábor Hojtsy is right that the pager needs to accommodate a sidebar that can potentially have more content than the main region.

    @Gábor Hojtsy refers to two issues

    (1) the pager wraps when there is a sidebar block
    (2) there looks like whitespace produced from block templates that the main page template thinks is sidebar content

    However, I'm not sure if we can resolve the first issue because the pager does not know how much content is in the sidebar region. If it overflows, it has to wrap. If the pager were in its own block, we could move it to a different full-width region, but that's not the case.

    The main issue here is that we need to make sure that the region markup does not output when content is not present.

  • 🇺🇸United States mherchel Gainesville, FL, US

    Also Happy Valentines Day everyone! ♥️

  • 🇭🇺Hungary Gábor Hojtsy Hungary

    Some out of the box ideas is if the pager can hide some items towards the end if it would be too wide? Or it can be more tight (less click/touch space) if the space is not enough due to sidebar? The region output IMHO would be its own issue, should I open that one as well?

  • 🇺🇸United States mherchel Gainesville, FL, US

    I'm pretty sure the root of the region output issue appears to be 🌱 [meta] Themes improperly check renderable arrays when determining visibility Needs work , although there are likely ways to work around this.

    I'm still not able to reproduce the wrapping issue though. I even set up book, and got the extra element in there, but no wrapping happened.

  • Try generating more nodes and check maybe it could be the reason why you are not replicating the wrapping issue.

Production build https://api.contrib.social 0.61.6-2-g546bc20