Display of module documentation on mobile

Maybe better in the "Drupal.org customizations" issue queue?

Just adding duplicate issue as related.

Moving to the theme queue.

Layout file: https://git.drupalcode.org/project/bluecheese/-/blob/7.x-2.x/layouts/pan...
CSS files are named "hydra.scss".

I experimented with the template a bit, and it seems like we can fully swap two blocks of HTML and the page still looks ok.
- MR: https://git.drupalcode.org/project/bluecheese/-/merge_requests/51/diffs
- URL to test: https://fjgarlin-drupal.dev.devdrupal.org/docs/contributed-modules/a11y-...

I don't know which other pages use this layout/panels, so we'd need to test in other parts of the site to see if this fix is enough, or if we need to go into CSS changes.

Thank you for the interest (and first MR). I don't think this is sufficient since you break the placements of TOCs.
Random example:

https://fjgarlin-drupal.dev.devdrupal.org/community/contributor-guide
https://www.drupal.org/community/contributor-guide →

If we want to move it, we probably have to do it only for the module documentation.

I think a better and more robust solution is to make the TOC for module documentation a (searchable) dropdown. Even if you get it at the bottom (as you did) it is useless for navigation ...

Another simpler solution is just to hide / remove the TOC when you are on the start page for the top level doc guide for a module. If you want to see all modules you can use the bread crumbs to move one level up where all doc guides are listed anyway.

Thanks for the effort, @fjgarlin!

I do however agree that we could just remove the list on these pages. I don't see the scenario "I am reading documentation for one specific module, and need fast access to documentation for all the other modules" as very likely.

A quick fix could even be swapping the list for one link "See documentation for all modules" that goes to https://www.drupal.org/docs/extending-drupal/contributed-modules/contrib... → , then the scenario above would be solvable both through this link and the breadcrumbs.

Cool. Thanks for the example, it was a quick test, but I wasn't too sure where the same template was used, so I'll revert.

The searchable dropdown might take longer, as we don't have any on the site so far. Hiding for this case might be the easiest option and seems to be the one that makes the most sense.

Something like .node-type-guide #contributed-module-documentation or .node-type-guide .top-right-content #contributed-module-documentation should be a good enough selector to only do the changes for the siblings of this page (ie: other modules).

Yes, .node-type-guide .top-right-content #contributed-module-documentation should do, but it breaks if the parent guide changes name from "Contributed module documentation" to say "Contributed modules" (following the IA for themes → ).

Agree on #15, but it's still our best bet to differentiate these two cases from any other pages.

The selector could be:

.node-type-guide .top-right-content #contributed-module-documentation,
.node-type-guide .top-right-content #contributed-modules,
.node-type-guide .top-right-content #contributed-themes {
   // CSS rules
}

The other alternative is a bigger CSS refactoring for the responsive patterns in this type of pages.

Easier alternative

MR: https://git.drupalcode.org/project/bluecheese/-/merge_requests/51
Test URLs:
- Theme: https://fjgarlin-drupal.dev.devdrupal.org/docs/contributed-themes/bs-base
- Module: https://fjgarlin-drupal.dev.devdrupal.org/docs/contributed-modules/a11y-...

LGTM :-)

This is deployed now. Since :has() selectors have good browser support now, I used that to hide the menu on smaller screens, whenever there is a 100th item.

Thanks for the commit. It does solve the reported problem since there are more than 100 modules with documentation. However, this will look ugly for themes for a long time. I think I would have preferred a smaller number :D

Anyway, I can create a new general issue for large generated TOCs. The very long scroll for contributed themes isn't very user-friendly or nice on the desktop either.

I somehow missed how many items were in the theme guide. Reduced the limit to 25, which will go out with the next Drupal.org deployment, likely later this week.

Automatically closed - issue fixed for 2 weeks with no activity.