Forum:Updating navbar-navbox templates

Untitled
So, navbox, navbar, and the rest are ancient and I'd like to update them. Mainly to gain  support so we can phase out the stupid  -family of templates used in all of our navigation footers and subzone lists.

I've got navbox/dev and navbar/dev synched from enwiki and they mostly work. We need to update sidewide css too (the navbar is still causing issues). I have already added .hlist to mw:common.css and modified navbar/dev to not even bother with talk pages as per our version of navbar, since they never seem to exist. You can check how the new templates look as compared to live by comparing this revision of Template:Navbox/dev/doc with the live version to see what's still acting up. The linked version of the doc uses navbox instead of navbox/dev.

Make sure you use my common.css and darkvector.css since the new revision needs updated css that isn't live yet. Darkvector is unmodified from live, but since user css overrides sitewide css, we need to over-override colors back to what's in darkvector. Updated css pushed live (at 21:09, 21 January 2013 (UTC)) make sure to do a hard refresh. Not updating templates until the caches clear.

Why the effort? Instead of doing, we'd do: instead. It gets us this (not linked for demonstration purposes):


 * Foo
 * Bar
 * Baz

(Seriously! Look at the source for this) This is actually standards-compliant and semantically meaningful and it should help reduce the wikicode mess on templates and articles like Instance maps. We still need to update mw:common.css for navbox/navbar and (if necessary) mw:common.js for the show/hide code.

But I'm not making sitewide changes without getting other admins on board, and especially not when I'm falling asleep. It's 2 am as I write this, so I'm going to send out an email to the list (sorry in advance if the email alert on your phone wakes you up!) and then crash for the night. -- k_d3 07:17, 20 January 2013 (UTC)


 * This would certainly help a lot - personally I hate adding  to those templates. However are we sure that no navbox templates currently use that formatting? If they are and they want to keep it that way, is there a way around it? -- 09:12, 20 January 2013 (UTC)
 * What do you mean, gourra? To what "they" are you precisely referring? --Sky (talk) 15:50, 20 January 2013 (UTC)
 * I meant to say that if people use navboxes that have bullet list formatting, how can we assure that the formatting stays that way for those navboxes? -- 22:18, 20 January 2013 (UTC)
 * That's why I haven't pushed this live yet. I don't want to break any current uses that I can't proactively fix with my bot. -- k_d3 23:27, 20 January 2013 (UTC)
 * Gourra: Hlist is rolled out by adding a class to the navbox, not by automatically adding it in navbox. One of the edge cases on Wikipedia when it was first rolled out was Navbox with columns, which meant hlist couldn't be rolled out default in navbox. Don't worry on that point. It also looks like kd3 will be careful. --Sky (talk) 01:36, 21 January 2013 (UTC)

Status as of now
With the css in User:Kaydeethree/common.css (different than our mw:common.css) and User:Kaydeethree/darkvector.css (which is unmodified from MediaWiki:Darkvector.css) everything on Navbox/dev appears to work properly. If nobody has objections I'll roll everything live (that is Navbox/dev, Navbar/dev, and User:Kaydeethree/common.css) ~24 hours from this post. I'm not planning on modifying mw:common.js since our show/hide code seems to work fine. I could be convinced otherwise, but js isn't my strong-suit. -- k_d3 23:59, 20 January 2013 (UTC)
 * Template:Navbox/dev looks broken. Others below that as well. Yes, collapsed navboxes are not functioning properly, unless your css doesn't match the css I'm loading by default. --Sky (talk) 01:40, 21 January 2013 (UTC)
 * It isn't. I'm using the updated css from enwiki in my userspace. You'll have to add that to your usercss to see it properly. I'll be moving it live tomorrow. -- k_d3 02:30, 21 January 2013 (UTC)
 * Long horizontal lists currently do not wrap (see e.g. Instance maps). &mdash; foxlit (talk) 18:11, 21 January 2013 (UTC)
 * Sky noticed that on instance maps and thinks there's a solution other than what I've been doing. I've just been using the hwrap class to re-enable the wrapping behavior that hlist disables. -- k_d3 18:22, 21 January 2013 (UTC)

I've pushed the css live, so do a hard refresh (ctrl+f5) to get the updated stuff. I'm planning on waiting a bit longer before changing navbox/navbar to make sure everybody has the updated css so things don't look broken.

For a live example (once you've got updated css) look at Into the Crypts (Alliance) in the quest progression section. All of the quests show the proper section expanded and things should work sanely. -- k_d3 21:09, 21 January 2013 (UTC)
 * As an aside, I'm thinking about doing something like that for other mists-style daily quest hubs where we have a complete set of different quests every day. This takes up much less space as compared to Golden Lotus dailies. -- k_d3 21:11, 21 January 2013 (UTC)
 * Similar wrapping issues on Into the Crypts (Alliance). You might have to apply your solution to *every* would-be horizontal list. &mdash; foxlit (talk) 22:07, 21 January 2013 (UTC)
 * I just took out the nowrap for the time being. I expect nearly all of our lists don't want the nowrap behavior anyway.-- k_d3 22:28, 21 January 2013 (UTC)
 * I checked with Edokter on en.wiki. He said he added hwrap for small-width templates, such as sidebars (which we don't use here anymore anyway). There must be something wrong with our implementation of nowrap. The below table should not have links wrapping, for example. The behavior is most obvious at smaller resolutions by noting the location of the dot list-item separator. --Sky (talk) 22:38, 21 January 2013 (UTC)

Gah. This is annoying. I've been pouring over the css inspector here and on enwiki and I don't see a difference anywhere that's causing this. Going to keep poking around. -- k_d3 01:29, 22 January 2013 (UTC)
 * (You didn't save the page.) Whatever the problem is, it's affecting both tables and divs using wiki syntax, but not HTML (which however produces a curious side effect  bug of indentation.). I might recommend getting our MediaWiki install upgraded. --Sky (talk) 02:27, 22 January 2013 (UTC)
 * We don't have TidyHTML turned on, I bet. I'll poke Telshin. -- k_d3 03:05, 22 January 2013 (UTC)
 * Another solid suspicion. Gotta' love Tidy! --Sky (talk) 03:08, 22 January 2013 (UTC)
 * I've copy/pasted the resulting html from test cases #1 and #5 to and . Outside of linebreaks and whitespace, there's no difference! I don't freaking get it. The extra space between the   and the   should not make a difference, should it? -- k_d3 07:08, 22 January 2013 (UTC)
 * Last edit for the night since if I keep poking at this I'm not going to get any sleep. The mediawiki bug mentioned in css, (now that I've actually looked at it), says it's because there's not a linebreak between &lt;/li>&lt;li>s. .hlist depends on having a breakable character between list elements. We can't fix that from our end without using tidy or patching the parser. -- k_d3 07:22, 22 January 2013 (UTC)

Hrm. Is it intended that the group texts are non-bolded and has line breaks? It wasn't like that before, but I guess Wikipedia does it differently. -- 09:45, 22 January 2013 (UTC)

Also, navboxes that have group texts higher than the list text has weird background coloring (depending on resolution and/or size of browser window):

-- 10:13, 22 January 2013 (UTC)
 * The line-breaking is fixed for group headers. I could fix the boldness now, but it will get fixed when navbox/dev goes live. I don't want to push the template live until we have a solution for hlists not line-breaking properly, though. -- k_d3 20:28, 24 January 2013 (UTC)

Edokter just added a note in wikipedia:Mediawiki:common.css that has documentation in it. The problem is indeed predicated on the lack of HTMLTidy. --Sky (talk) 16:08, 27 January 2013 (UTC)

Status update 2
It appears that the $wgTidy switch has been flipped. I intend to push navbox/dev & navbar/dev live, probably tomorrow. -- k_d3 01:27, 22 February 2013 (UTC)
 * It still appears there are problems (albeit minor) with tests 3 and 4. --Sky (talk) 04:48, 26 February 2013 (UTC)
 * Assuming you're talking about the margin-left, those two cases are a result of core (base mw) css from mediawiki.legacy.shared:

.mw-content-ltr ul, .mw-content-rtl .mw-content-ltr ul { margin: .3em 0 0 1.5em; } .mw-content-ltr ol, .mw-content-rtl .mw-content-ltr ol { margin: .3em 0 0 3.2em; }
 * We... could override css for those side cases, but then we'd diverge from upstream for hlist. I'm not entirely sure we'd actually see those cases in real-world use. -- k_d3 05:08, 26 February 2013 (UTC)
 * Wikipedia offers those options via Wikipedia:Template:Hlist. I'm not too worried because I wouldn't personally use hlist (the template) myself, but that option is available to users there. It's probable that if we don't add the option, then either a) the issue will correct itself with some update or another to Mediawiki or b) we indeed won't see the problem in the wild. --Sky (talk) 04:00, 28 February 2013 (UTC)

2 - UL with wiki syntax in div

 * This is a big link
 * Small link
 * This is the biggest link
 * This is a big link
 * Small link
 * This is the biggest link
 * This is a big link
 * Small link
 * This is the biggest link
 * This is a big link
 * Small link
 * This is the biggest link
 * This is a big link
 * Small link
 * This is the biggest link
 * This is a big link
 * Small link
 * This is the biggest link
 * This is a big link
 * Small link
 * This is the biggest link
 * This is a big link
 * Small link
 * This is the biggest link
 * This is a big link
 * Small link
 * This is the biggest link
 * This is a big link
 * Small link
 * This is the biggest link
 * This is a big link
 * Small link
 * This is the biggest link
 * This is a big link
 * Small link
 * This is the biggest link
 * This is a big link
 * Small link
 * This is the biggest link
 * This is a big link
 * Small link
 * This is the biggest link
 * This is a big link
 * Small link
 * This is the biggest link
 * This is a big link
 * Small link
 * This is the biggest link
 * This is a big link
 * Small link
 * This is the biggest link
 * This is a big link
 * Small link
 * This is the biggest link
 * This is a big link
 * Small link
 * This is the biggest link
 * This is a big link
 * Small link
 * This is the biggest link
 * This is a big link
 * Small link
 * This is the biggest link
 * This is a big link
 * Small link
 * This is the biggest link
 * This is a big link
 * Small link
 * This is the biggest link
 * This is a big link
 * Small link
 * This is the biggest link
 * This is a big link
 * Small link
 * This is the biggest link
 * This is a big link
 * Small link
 * This is the biggest link
 * This is a big link
 * Small link
 * This is the biggest link
 * This is a big link
 * Small link
 * This is the biggest link
 * This is a big link
 * Small link
 * This is the biggest link
 * This is a big link
 * Small link
 * This is the biggest link
 * This is a big link
 * Small link
 * This is the biggest link
 * This is a big link
 * Small link
 * This is the biggest link

3 - UL with HTML syntax
This is a big link Small link This is the biggest link This is a big link Small link This is the biggest link This is a big link Small link This is the biggest link</li> This is a big link</li> Small link</li> This is the biggest link</li> This is a big link</li> Small link</li> This is the biggest link</li> This is a big link</li> Small link</li> This is the biggest link</li> This is a big link</li> Small link</li> This is the biggest link</li> This is a big link</li> Small link</li> This is the biggest link</li> <li>This is a big link</li> <li>Small link</li> <li>This is the biggest link</li> <li>This is a big link</li> <li>Small link</li> <li>This is the biggest link</li> <li>This is a big link</li> <li>Small link</li> <li>This is the biggest link</li> <li>This is a big link</li> <li>Small link</li> <li>This is the biggest link</li> <li>This is a big link</li> <li>Small link</li> <li>This is the biggest link</li> <li>This is a big link</li> <li>Small link</li> <li>This is the biggest link</li> <li>This is a big link</li> <li>Small link</li> <li>This is the biggest link</li> <li>This is a big link</li> <li>Small link</li> <li>This is the biggest link</li> <li>This is a big link</li> <li>Small link</li> <li>This is the biggest link</li> <li>This is a big link</li> <li>Small link</li> <li>This is the biggest link</li> <li>This is a big link</li> <li>Small link</li> <li>This is the biggest link</li> <li>This is a big link</li> <li>Small link</li> <li>This is the biggest link</li> <li>This is a big link</li> <li>Small link</li> <li>This is the biggest link</li> <li>This is a big link</li> <li>Small link</li> <li>This is the biggest link</li> <li>This is a big link</li> <li>Small link</li> <li>This is the biggest link</li> <li>This is a big link</li> <li>Small link</li> <li>This is the biggest link</li> <li>This is a big link</li> <li>Small link</li> <li>This is the biggest link</li> <li>This is a big link</li> <li>Small link</li> <li>This is the biggest link</li> <li>This is a big link</li> <li>Small link</li> <li>This is the biggest link</li> <li>This is a big link</li> <li>Small link</li> <li>This is the biggest link</li> <li>This is a big link</li> <li>Small link</li> <li>This is the biggest link</li> <li>This is a big link</li> <li>Small link</li> <li>This is the biggest link</li> <li>This is a big link</li> <li>Small link</li> <li>This is the biggest link</li> <li>This is a big link</li> <li>Small link</li> <li>This is the biggest link</li> </ul>

4 - OL with HTML syntax
<li>This is a big link</li> <li>Small link</li> <li>This is the biggest link</li> <li>This is a big link</li> <li>Small link</li> <li>This is the biggest link</li> <li>This is a big link</li> <li>Small link</li> <li>This is the biggest link</li> <li>This is a big link</li> <li>Small link</li> <li>This is the biggest link</li> <li>This is a big link</li> <li>Small link</li> <li>This is the biggest link</li> <li>This is a big link</li> <li>Small link</li> <li>This is the biggest link</li> <li>This is a big link</li> <li>Small link</li> <li>This is the biggest link</li> <li>This is a big link</li> <li>Small link</li> <li>This is the biggest link</li> <li>This is a big link</li> <li>Small link</li> <li>This is the biggest link</li> <li>This is a big link</li> <li>Small link</li> <li>This is the biggest link</li> <li>This is a big link</li> <li>Small link</li> <li>This is the biggest link</li> <li>This is a big link</li> <li>Small link</li> <li>This is the biggest link</li> <li>This is a big link</li> <li>Small link</li> <li>This is the biggest link</li> <li>This is a big link</li> <li>Small link</li> <li>This is the biggest link</li> <li>This is a big link</li> <li>Small link</li> <li>This is the biggest link</li> <li>This is a big link</li> <li>Small link</li> <li>This is the biggest link</li> <li>This is a big link</li> <li>Small link</li> <li>This is the biggest link</li> <li>This is a big link</li> <li>Small link</li> <li>This is the biggest link</li> <li>This is a big link</li> <li>Small link</li> <li>This is the biggest link</li> <li>This is a big link</li> <li>Small link</li> <li>This is the biggest link</li> <li>This is a big link</li> <li>Small link</li> <li>This is the biggest link</li> <li>This is a big link</li> <li>Small link</li> <li>This is the biggest link</li> <li>This is a big link</li> <li>Small link</li> <li>This is the biggest link</li> <li>This is a big link</li> <li>Small link</li> <li>This is the biggest link</li> <li>This is a big link</li> <li>Small link</li> <li>This is the biggest link</li> <li>This is a big link</li> <li>Small link</li> <li>This is the biggest link</li> <li>This is a big link</li> <li>Small link</li> <li>This is the biggest link</li> <li>This is a big link</li> <li>Small link</li> <li>This is the biggest link</li> <li>This is a big link</li> <li>Small link</li> <li>This is the biggest link</li> <li>This is a big link</li> <li>Small link</li> <li>This is the biggest link</li> <li>This is a big link</li> <li>Small link</li> <li>This is the biggest link</li> <li>This is a big link</li> <li>Small link</li> <li>This is the biggest link</li> </ol>