Page MenuHomePhabricator

WikiEditor Help text not horizontally aligned, confusing for new users
Closed, ResolvedPublic

Description

mis-aligned wikitext and rendered results

In MediaWiki 1.17.0 and its associated WikiEditor extension, click "Help" in the WikiEditor toolbar, and click Links. If the browser window is a certain size, the information in "What You Type" and "What You Get" does not line up, producing confusion for the new user.

In the attached screenshot, see that "[http://www.example.org]" lines up with "http://www.example.org", which is wrong.


Version: unspecified
Severity: enhancement

Attached:

Event Timeline

bzimport raised the priority of this task from to Medium.Nov 21 2014, 11:54 PM
bzimport added a project: WikiEditor.
bzimport set Reference to bz31649.
bzimport added a subscriber: Unknown Object (MLST).

Multiple lines of help text are being placed in a single TD element, and several of these are being placed side by side. As a result, there is no horizontal alignment possible. Perhaps the Help section should be a real table with one row per line of text.

GOIII added a subscriber: GOIII.EditedDec 13 2014, 6:32 AM

Confirmed: the more you shrink the browser window, the more likely examples in the center column will no longer line up 1:1 to their respective results in the right column.

We can probably get away with preventing the center column cells from wrapping their content and that should keep the examples in alignment with the results. The .css entry for td.description (first column of help window) is in error anyway in that the same attribute is repeated 2x so we can kill 2 birds at once here.

Lines 255 thru 268 of jquery.wikiEditor.toolbar.css could be replaced with....

mock jquery.wikiEditor.toolbar.css
.wikiEditor-ui-toolbar .section-help .page-table td.cell-description,
.wikiEditor-ui-toolbar .section-help .page-table td.description {
	width: 20%;
}
.wikiEditor-ui-toolbar .section-help .page-table td.cell-syntax,
.wikiEditor-ui-toolbar .section-help .page-table td.syntax {
	font-family: monospace, "Courier New";
	width: 40%;
	white-space: pre;
}
.wikiEditor-ui-toolbar .section-help .page-table td.cell-result,
.wikiEditor-ui-toolbar .section-help .page-table td.result {
	width: 40%;
}

... for example.

GOIII moved this task from Backlog to Next-up on the WikiEditor board.Jan 1 2015, 6:19 PM
Fomafix added a subscriber: Fomafix.EditedJan 14 2015, 9:26 AM
.wikiEditor-ui-toolbar .section-help .page-table td.cell-syntax
  white-space: pre;
}

is not suitable for the reference help, because there is a very long text in the syntax column.

The following CSS definition matches only to the link syntax help column:

/* T33649 */
.wikiEditor-ui-toolbar .section-help .page-table .table-link td.cell-syntax {
	white-space: pre;
}

Change 184860 had a related patch set uploaded (by Gerrit Patch Uploader):
Prevent line wrapping for link syntax help column

https://gerrit.wikimedia.org/r/184860

Patch-For-Review

Fomafix claimed this task.Jan 14 2015, 9:46 AM

An other solution would be using a non-breaking space in all languages.

Change 184860 merged by jenkins-bot:
Prevent line wrapping for link syntax help column

https://gerrit.wikimedia.org/r/184860

matmarex closed this task as Resolved.Jan 24 2015, 8:02 AM
matmarex removed a project: Patch-For-Review.
matmarex set Security to None.
matmarex removed subscribers: gerritbot, Unknown Object (MLST).
GOIII moved this task from Next-up to Closed on the WikiEditor board.Apr 3 2016, 8:55 AM