Currently categories are duplicated in the sidebar and the footer, with only one lot shown based on device width. It would be nicer if the duplication could be avoided, and would allow T181344: HotCat compatibility for Timeless skin to be solved without changes to the script itself (except perhaps adding Timeless-specific styles).
One possible approach would be to treat the categories sidebar chunk like the others:
- Desktop-full and dektop-mid: Placed in the sidebar
- Desktop-small: Heading goes up to the top of screen, contents available via hover -- which can be styled to take up the full width of screen, with multiple items per line (rather than one-per-line, like in the views with sidebars)
- Mobile: An icon shown at the top of screen, contents shown on click
I have experimented with this in https://gerrit.wikimedia.org/r/#/c/430854/ ; Some open questions are:
- Are the mobile/desktop-small approaches acceptable?
- What should the icon be for mobile view?
- Something similar to https://commons.wikimedia.org/wiki/File:OOjs_UI_icon_tag.svg ?
- Where should HotCat-specifc styles go?
- Probably in HotCat itself, but they are only needed (or rather, not needed) for certain viewport widths -- so if the mobile/desktop small cuttoff values ever get changed, then that's another place where they need to be updated. Unless there's a way to make the cuttoff values available to the HotCat script?