Page MenuHomePhabricator

HotCat compatibility for Timeless skin
Open, Needs TriagePublic


It would be important to be able to use HotCat with Timeless. Thanks.

Event Timeline

The issue here is that Timeless' unique approach to category handling (the sidebar stuff) does not follow the expected format/pattern of category handling elsewhere. (Specifically the normal approach is a core function that just generates and inline list, with consistent ids and all that, whereas Timeless reimplements its own handling in order to format them in the sidebar, and possibly even sort them better? I don't entirely recall the specifics, but it's likely not using the same ids and stuff, either.)

T160645 discusses some of the other issues caused by this strange category handling. (Performance/caching problems aside.)

As for actual solutions, there are a few possibilities:

  • Just include the usual categories on the bottom of the page as well as the sidebar - this especially makes sense for editing (T175714), as well as if we do reduce the number of shown categories in the sidebare as considered in T160645 - and HotCat should just work as usual on this one without any changes needed.
  • Make HotCat work with the sidebar categories - I'm not sure if just making the selector the same as the usual one would be enough, as the different layout may cause a few problems, so this may require actually implementing specific handling for this in HotCat itself. Also setting the same classes/ids for the sidebar one would preclude using them elsewhere (such as if we DO wind up with a duplicate categories list old-style at the bottom of the page)

Normal structure:




I'm really not sure why I totally renamed the timeless ones. Even if they are portlets, they still could have at least been... p-mw-hidden-catlinks or something. Although that's a bit stupid too?

The task that was just merged talks about gadgets and scripts that were broken, because the "catlinks" class is not applied.
N3: Just recognized that there is no "a" element title with full page name.

As of today, the old #catlinks are still present (in addition to the new catlinks in the sidebar), but set display: none. Thus, setting #catlinks {display: block !important;} in (or programmatically in HotCat) brings HotCat back to life. Yay!

Great work, Simon. I see you've added some additional css to make the HotCat links display nicely.
I would also adding the following to your timeless.js page - this moves the HotCat into the sidebar, and hides the non-HotCat list of categories:


And then you can hide the non-Hotcat list of categories, so your timeless.css page becomes:

#catlinks {
	display: block !important;
	/* from #mw-site-navigation .sidebar-chunk */
	background: #fcfcfc;
	border: solid #eeeeee;
	border-width: 1px 1px 0.2em;
	box-shadow: 0 1px 2px 1px rgba(0,0,0,0.02);
	padding: 1.5em 1.5em 0;
	margin: 1em 0;
	line-height: 1.1;
	word-wrap: break-word;

#catlinks > div {
	margin-bottom: 1.5em;

#catlinks-sidebar {

@Isarra, was nice meeting you in Prague. See T181344#4652876 for my way of solving it.

Oh, it was here! I appreciate the nagging, too, since I'd kind of lost track of this in everything else.

Anyway, I'll see if I can clean things up a bit, at very least, based on what you guys have provided.

See T181344#4652876 for my way of solving it.

Just realized this ticket existed—I had a similar way of solving it, but with a bit more style. In my user JS I have

mw.hook('wikipage.categories').add((content) => {
	if (content[0].id == 'catlinks' && content[0].childElementCount > 0) {
			.prepend('<summary>Show full category list</summary>');

And for styling, I have:

/* For HotCat; timeless's sidebar catagory list doesn't work with it. */
#catlinks { display: inherit !important; }

/* Don't show the weird outline when clicking a <summary> tag */
summary:focus { outline-style: none; }

/* Give the <details> tag added in [[User:Perryprog/common-script.js]] some space */
#content-bottom-stuff > details { padding: 1em 2em; }

Screen Shot 2021-10-31 at 4.57.37 PM.png (714×2 px, 192 KB)

Screen Shot 2021-10-31 at 4.58.00 PM.png (1×2 px, 326 KB)

I personally think this works out quite nicely, though I would imagine some people wouldn't be happy with it if they prefer the less intrusive category view that Timeless gives currently. How much user customization are we able to offer in the skin preferences setting?