Page MenuHomePhabricator

Make error pages mobile friendly
Closed, ResolvedPublic

Description

Currently error pages do not employ a responsive web design nor sets the viewport meta tag.

https://tools.wmflabs.org/betaweb/
https://tools.wmflabs.org/404/ (Also missing <head>, <title>, <body>, etc.)

Event Timeline

Dispenser assigned this task to Jorm.
Dispenser raised the priority of this task from to Medium.
Dispenser updated the task description. (Show Details)
Dispenser added a project: Toolforge.
Dispenser added a subscriber: Dispenser.
Restricted Application added a subscriber: Aklapper. · View Herald Transcript

I do not work for the Wikimedia Foundation. Please do not assign me tasks.

Jorm set Security to None.

I'm failing to see why you think that the page is unresponsive. Maybe it's not rendered correctly on some browsers because of invalid HTML but it is responsive here.

Glaisher renamed this task from Make error pages mobile friendly to Invalid HTML on Tool labs 404 page.Nov 29 2015, 5:45 PM
Glaisher reopened this task as Open.
Glaisher removed Jorm as the assignee of this task.

Also there's a <h1>Four hundred and four!</h2> The closing tag should be h1.

Dispenser renamed this task from Invalid HTML on Tool labs 404 page to Make error pages mobile friendly.Nov 29 2015, 6:49 PM
Dispenser updated the task description. (Show Details)

I do not work for the Wikimedia Foundation. Please do not assign me tasks.

You are listed as a maintainer of betaweb, the "Development / test version of the Tool Labs landing page." Which includes the error pages (AFAICT). If you do not wish to be involved please submit a task to remove yourself from the project.

@Glaisher I've reverted your title change, file it as a separated related bug. I've linked responsive design in the description to clarify the meaning. The error page force horizontal scrolling with viewports under 600px wide.

I'm just going to let this languish in eternity, then! I'm not going to do it; I'm not going to spend any extra effort to get myself removed.

Toodles!

jayvdb removed a subscriber: Jorm.
valhallasw lowered the priority of this task from Medium to Lowest.Nov 29 2015, 10:55 PM
valhallasw added a subscriber: valhallasw.

If anyone is interested in picking this up, the source code for the web page is available at https://git.wikimedia.org/summary/labs%2Ftoollabs.git under www/content/404.php et al.

Change 266075 had a related patch set uploaded (by BryanDavis):
Add proper HTML structure to error pages

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

Change 266076 had a related patch set uploaded (by BryanDavis):
Add viewport meta tag to generated content

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

Change 266075 merged by Merlijn van Deen:
Add proper HTML structure to error pages

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

Change 266076 merged by Merlijn van Deen:
Add viewport meta tag to generated content

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

bd808 claimed this task.
bd808 added a subscriber: bd808.

I think I've fixed things up quite a bit for the error pages. See https://tools.wmflabs.org/this_is_an_intentional_404/ as an example. If further changes are desired I think they should probably go in new tasks.

It looks like we may have some nginx config tweaking to do to get the pretty 500 and 503 pages setup.

As a bonus task I also fixed up a few other things in the codebase for the admin tool (what you see at https://tools.wmflabs.org/). The most visible addition is probably support for toolinfo.json output on the tool detail page. See https://tools.wmflabs.org/?tool=hay as an example.

/style.css still has a body { min-width:600px; } and a two column layout at 320px widths, so not responsive yet.

/style.css still has a body { min-width:600px; } and a two column layout at 320px widths, so not responsive yet.

@Dispenser is it only the 2 column chrome of the admin pages that you would like to see changed? Making the landing page fully responsive would be a much bigger redesign of the tool which I think would be better served by pursuing T115650: Create an authoritative and well promoted catalog of Wikimedia tools or a similar project to revamp the entire system.

Do you have any suggestions for a new layout?

/* Small screen linearize */
@media only screen and (max-width:600px){
  body {min-width:inherit;}
  .col2 { text-align:center;border-top:solid; }
  .col2 ul {padding-left:0;}
  .colmask, .leftmenu .col1, .leftmenu .col2, 
  .leftmenu .colright, .leftmenu .col1wrap {
    float:none;
    margin:.2em;
    overflow:visible;
    position:static;
    width:auto;
  }
}

Change 273775 had a related patch set uploaded (by BryanDavis):
Add css layout for small screens

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

/* Fix homepage table */
@media only screen and (max-width:600px) {
  #thebigtable, #thebigtable td,
  #thebigtable th { display:block; }
  td.tool-name span.mw-editsection { float:right; }
  td.tool-maintainers { white-space:normal; }
  td.tool-maintainers a {
    display:inline;
    white-space:nowrap;
  }
  td.tool-maintainers a~a {
    border-left:gray solid 1px;
    padding:0 0 0 0.5em;
    margin: 0 0 0 0.3em ;
  }
  #thebigtable td.tool-desc {
    padding: 0 1em 0.5em;
    font-size:.8em;
    font-style:italic;
  }
}

Patch at https://gerrit.wikimedia.org/r/273775 updated to incorporate single column layout for #thebigtable inspired by @Dispenser's suggestion in T119830#2071096.

Change 273775 merged by Tim Landscheidt:
Add css layout for small screens

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