Page MenuHomePhabricator

[[Special:Notifications]] looks very different with JavaScript disabled
Closed, InvalidPublic

Description

Author: mr.heat

Description:
Special page with and without JavaScript

The page [[Special:Notifications]] looks very different with and without JavaScript. I think it's very easy to avoid at least the most obvious difference. There is very little CSS missing. Simply move the following styles from ext.echo.special.css[1] to ext.echo.base.css[2].

.mw-echo-date-section {
font-weight: 800;
font-size: 1.1em;
text-transform: uppercase;
border-bottom: 1px solid #C9C9C9;
margin: 30px 0 5px 50px;
color: #686868;
max-width: 550px; /* See [3] */
}
ul#mw-echo-special-container {
list-style: none none; /* See [4] */
padding: 0;
margin: 30px 0 0 0;
max-width: 600px; /* See [5] */
}

I'm sure there are other solutions (there are much more differences, see the attached screenshot) but this is the most simple solution for the most obvious problem.

I did not included the :hover effect on purpose because I think it can be misleading in a non-JavaScript environment.

[1]https://git.wikimedia.org/blob/mediawiki%2Fextensions%2FEcho/8529fbfc23647802f92f6aef3be15947b7c8075a/modules%2Fspecial%2Fext.echo.special.css
[2]https://bits.wikimedia.org/static-1.23wmf4/extensions/Echo/modules/base/ext.echo.base.css
[3]Not needed at all because of the other "max-with" below. Please remove this line.
[4]A single "none" is enough. Please remove one.
[5]I find the current "max-width" to narrow. I think it should be "max-with: 100ex". But this is obviously an other issue.


Version: master
Severity: minor

Attached:

Echo_differences_with_without_JS.png (412×722 px, 13 KB)

Details

Reference
bz57720

Event Timeline

bzimport raised the priority of this task from to Needs Triage.Nov 22 2014, 2:28 AM
bzimport added a project: Notifications.
bzimport set Reference to bz57720.
bzimport added a subscriber: Unknown Object (MLST).
EBernhardson subscribed.
jmatazzoni subscribed.

The no-js page has been rewritten, so differences described here refer to the old page (which will still be different from the javascript page, but in different ways).