| IKhitron | |
| Oct 25 2017, 2:02 PM |
| F11189188: Screen Shot 2017-12-05 at 5.39.14 PM.png | |
| Dec 5 2017, 9:40 AM |
| F11189187: Screen Shot 2017-12-05 at 5.39.09 PM.png | |
| Dec 5 2017, 9:40 AM |
| F11189180: Screen Shot 2017-12-05 at 5.37.38 PM.png | |
| Dec 5 2017, 9:38 AM |
| F11189178: Screen Shot 2017-12-05 at 5.37.42 PM.png | |
| Dec 5 2017, 9:38 AM |
| F11143309: tableNewLine.patch | |
| Dec 2 2017, 3:22 PM |
| F11142127: Screen Shot 2017-12-02 at 9.19.57 PM.png | |
| Dec 2 2017, 1:23 PM |
Hello. Open en.wikipedia.org (in safemode), ru.wikipedia.org or he.wikipedia.org, edit the source of a wiki page (for example your user page), and preview the following wikicode:
{| class="wikitable mw-collapsible"
|+ name
|-
|aaaaaaaaaa||bbbbbbbbbb||cccccccccc
|}You'll see "name[hide]". There should be at least some space between the words. The same when collapsed.
This is likely in the file resources/src/jquery/jquery.makeCollapsible.css in MediaWiki core.
Test use cases:
| Subject | Repo | Branch | Lines +/- | |
|---|---|---|---|---|
| Component: Add some CSS spacing before table collapsing button | mediawiki/core | master | +34 -0 |
For .mw-collapsible-toggle, padding-left: 0.2em; is defined in https://en.wikipedia.org/wiki/MediaWiki:Common.css
So that specific example would be on-wiki CSS and hence invalid for Phabricator.
However, if you wanted to change the default in MediaWiki core, that would be in resources/src/jquery/jquery.makeCollapsible.css (I think).
@D3r1ck01 This sounds like a good task for Google-Code-in-2017 to me (just verified on hewiki one more time).
Okay! If you like, I can mentor this along side with you :), will import to GCI site at once: https://codein.withgoogle.com/dashboard/tasks/5158707136561152/
@D3r1ck01 Sounds good. The task should not only be about adding the rules to core, but also remove the MediaWiki:Common.css rules afterwards from current understanding. Latter should probably be done by an experienced Wikipedia contributor though as it involves social interaction there.
With wiki code
{| class="wikitable mw-collapsible"
|+name
|-
|aaaaaaaaaa||bbbbbbbbbb||cccccccccc
|}it seems that the HTML produced is:
<table class="wikitable mw-collapsible"> <caption>name </caption> <tr> <td>aaaaaaaaaa</td> <td>bbbbbbbbbb</td> <td>cccccccccc </td></tr></table>
There is an extra return line inside caption tag, meaning that if we simply add padding-left: 0.2em; to the mw-collapsible-toggle tag, an extra space will be produced (see image).
However, using the same wiki code on English Wikipedia, the extra return line is not produced. Any idea on what's the difference inside?
I tried something like this:
It should be working fine now, but I'm not sure if it's the best solution. Any suggestions?
@eflyjason, it would be good to use Gerrit Code Review(recommended) system to submit your patch. Here is a link to the Gerrit Tutorials: https://www.mediawiki.org/wiki/Gerrit/Tutorial#Prepare_to_work_with_Gerrit. Looking forward to it.
With wiki code
{| class="wikitable mw-collapsible" |+name |- |aaaaaaaaaa||bbbbbbbbbb||cccccccccc |}it seems that the HTML produced is:
<table class="wikitable mw-collapsible"> <caption>name </caption> <tr> <td>aaaaaaaaaa</td> <td>bbbbbbbbbb</td> <td>cccccccccc </td></tr></table>There is an extra return line inside caption tag, meaning that if we simply add padding-left: 0.2em; to the mw-collapsible-toggle tag, an extra space will be produced (see image).
However, using the same wiki code on English Wikipedia, the extra return line is not produced. Any idea on what's the difference inside?
Not yet sure of why this behavior but this calls for some investigation. Thanks.
Change 394847 had a related patch set uploaded (by Eflyjason; owner: Eflyjason):
[mediawiki/core@master] Component: Add some CSS spacing before table collapsing button
The whitespace before </caption> and </td> should removed from the parser. This whitespace gets also copied into clipboard when selecting the caption or the table element with a triple click.
I'd consider using a little different margin-left value as well, 0.5em seems preferable looking at various other elements in Vector (and MinervaNeue, which is using a different UI logic AFAIK).
0.2em seems like a magic number invented with no other element carrying it. .mw-content-ltr .mw-editsection uses 1em but that applies to a heading.
I guess 0.2em is to simulate a regular space's width. Setting to 0.5em seems somehow weird, especially after the table is collapsed.
0.2em:
0.5em:
A follow-up change regarding parser is added here: https://gerrit.wikimedia.org/r/395477 (T182074)
A distance can also generated by
.mw-collapsible-toggle:before { content: ' '; }
This has a different behavior on wrapping.
That sounds like a good solution too as we won't have to worry about the em number. Would there be any compatibility issue with old browsers? I think since IE 8 they all support :before?
IE 8 supports the :before (not the ::before). But this does not matter because IE 8 is only supported without JavaScript and the collapsing needs JavaScript.
Please have a look at T155347 (and Gerrit patches 9 and 10), also please try your code on https://test.wikipedia.org/wiki/Test_suite_for_mw-collapsible, and especially on https://test.wikipedia.org/wiki/CollapsingTestpageMw (custom toggle).
An em based margin actually gives better layout control than CSS content in case we're unifying distance of such interactive elements together with text treatment, compare [ edit ] vs [Expand] on enwiki
Also @Od1n, 0.3em is foremost used for top/bottom distance and only in one case .mw-echo-notifications-badge for horizontal distance. Compare
I implemented your changes in your patch 10. https://test.wikipedia.org/wiki/Test_suite_for_mw-collapsible should be working correctly. But I think for https://test.wikipedia.org/wiki/CollapsingTestpageMw the only way is to add margin-left: 0; and margin-right: 0; manually to the custom toggle.
Yes, it would require manually adding margin-left: 0; and margin-right: 0; to the custom toggles, in addition to the already needed float: none;.
That's why I'd still bend to favor my patch 9, which has a "whitelist" approach.
The root cause of this, is because regular (automatically created) and custom (manually specified) toggles use the same class, thus aren't distinguished at the CSS level.
I don't know if there is room for improvement about this, but if so, let's keep it for a later, separate ticket.
What is the current status of this ticket? What kind of patch would be accepted to solve this issue?
I see there's an open patch which should probably be abandoned if it's not being worked on so somebody else can work on this task - https://gerrit.wikimedia.org/r/#/c/mediawiki/core/+/394847/
Change 394847 abandoned by Jdlrobson:
[mediawiki/core@master] Component: Add some CSS spacing before table collapsing button
Reason:
According to https://phabricator.wikimedia.org/T178998#5980303 this is inactive. Am freeing up for the next developer. Apologies to the owner for your experience here, I'll do better to make sure that doesn't happen again next time round.