Forum:Updating navbar-navbox templates

Forums: Village pump → Updating navbar-navbox templates
(This topic is archived. Please do not edit this page!)

Untitled

So, {{navbox}}, {{navbar}}, and the rest are ancient and I'd like to update them. Mainly to gain .hlist 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 [[Foo]]{{-}} [[Bar]]{{-}} [[Baz]], we'd do:

* [[Foo]]
* [[Bar]]
* [[Baz]]

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_d³ 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? --g0urra[T҂C] 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? --g0urra[T҂C] 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_d³ 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_d³ 23:59, 20 January 2013 (UTC)

Template:Navbox/dev#With image, without groups 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_d³ 02:30, 21 January 2013 (UTC)

Long horizontal lists currently do not wrap (see e.g. Instance maps). — 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_d³ 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  [35 Daily] Into the Crypts in the quest progression section. All of the quests show the proper section expanded and things should work sanely. --k_d³ 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_d³ 21:11, 21 January 2013 (UTC)

Similar wrapping issues on  [35 Daily] Into the Crypts. You might have to apply your solution to *every* would-be horizontal list. — 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_d³ 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 (User:Kaydeethree/sandbox) and I don't see a difference anywhere that's causing this. Going to keep poking around. --k_d³ 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 effectbug 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_d³ 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 [1] and [2]. Outside of linebreaks and whitespace, there's no difference! I don't freaking get it. The extra space between the <li> and the <a should not make a difference, should it? --k_d³ 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, [3] (now that I've actually looked at it), says it's because there's not a linebreak between </li><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_d³ 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. --g0urra[T҂C] 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):

--g0urra[T҂C] 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_d³ 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_d³ 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_d³ 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)

Test cases

1 - UL with wiki syntax in table

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

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
• 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

4 - OL with HTML syntax

1. This is a big link
2. Small link
3. This is the biggest link
4. This is a big link
5. Small link
6. This is the biggest link
7. This is a big link
8. Small link
9. This is the biggest link
10. This is a big link
11. Small link
12. This is the biggest link
13. This is a big link
14. Small link
15. This is the biggest link
16. This is a big link
17. Small link
18. This is the biggest link
19. This is a big link
20. Small link
21. This is the biggest link
22. This is a big link
23. Small link
24. This is the biggest link
25. This is a big link
26. Small link
27. This is the biggest link
28. This is a big link
29. Small link
30. This is the biggest link
31. This is a big link
32. Small link
33. This is the biggest link
34. This is a big link
35. Small link
36. This is the biggest link
37. This is a big link
38. Small link
39. This is the biggest link
40. This is a big link
41. Small link
42. This is the biggest link
43. This is a big link
44. Small link
45. This is the biggest link
46. This is a big link
47. Small link
48. This is the biggest link
49. This is a big link
50. Small link
51. This is the biggest link
52. This is a big link
53. Small link
54. This is the biggest link
55. This is a big link
56. Small link
57. This is the biggest link
58. This is a big link
59. Small link
60. This is the biggest link
61. This is a big link
62. Small link
63. This is the biggest link
64. This is a big link
65. Small link
66. This is the biggest link
67. This is a big link
68. Small link
69. This is the biggest link
70. This is a big link
71. Small link
72. This is the biggest link
73. This is a big link
74. Small link
75. This is the biggest link
76. This is a big link
77. Small link
78. This is the biggest link
79. This is a big link
80. Small link
81. This is the biggest link
82. This is a big link
83. Small link
84. This is the biggest link
85. This is a big link
86. Small link
87. This is the biggest link
88. This is a big link
89. Small link
90. This is the biggest link
91. This is a big link
92. Small link
93. This is the biggest link
94. This is a big link
95. Small link
96. This is the biggest link

5 - Wikitable with html list

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

6 - HTML table with wikilist

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