Page MenuHomePhabricator

Semi-protected page layout appears broken
Closed, ResolvedPublic

Assigned To
Authored By
ppelberg
Jun 16 2020, 5:08 AM
Referenced Files
F31868342: Screen Shot 2020-06-16 at 12.26.39 PM.png
Jun 16 2020, 7:28 PM
F31868321: Screen Shot 2020-06-16 at 11.59.06 AM.png
Jun 16 2020, 6:59 PM
F31867608: Screen Shot 2020-06-16 at 7.14.11 AM.png
Jun 16 2020, 6:38 AM
F31867618: Screen Shot 2020-06-16 at 7.32.33 AM.png
Jun 16 2020, 6:38 AM
F31867602: Screen Shot 2020-06-16 at 7.04.55 AM.png
Jun 16 2020, 6:38 AM
F31867488: Screen Shot 2020-06-15 at 10.07.48 PM.png
Jun 16 2020, 5:08 AM
Tokens
"Like" token, awarded by Jdlrobson.

Description

This task is about the layout of the page anon editors encounter when attempting to edit a semi-protected page on mobile.

Behavior

  1. On a mobile device [i], open Chrome or Safari and open a new private session
  2. Navigate to https://en.m.wikipedia.org/w/index.php?title=Mercury_(element)
  3. Tap the top-most edit pencil; observe you land on https://en.m.wikipedia.org/w/index.php?title=Mercury_(element)&action=edit&section=0

Expected

  1. ✅Notice the page is legible (read: "Why this page is protected" and the contents beneath it can easily be read)

Actual

  1. ❗️Notice the "Why this page is protected" heading is presented atop other content on the page:

Screen Shot 2020-06-15 at 10.07.48 PM.png (1×566 px, 168 KB)

Environment

  • Device: iPhone X
  • Browser: Chrome

i. I encountered this on an iPhone X, tho I've been able to reproduce this issue on a Pixel 2 using desktop Chrome's emulator.

Event Timeline

I noticed this for sometime now and also noticed how it works correctly on other wikis. So I think this is not a MobileFronted's fault, but a problem with the design approach of English Wikipedia.

The message is MediaWiki:Protectedpagetext message, and is a very simple message in its default form but most wikis have replaced it with longer dynamic messages. English Wikipedia, notably uses a web of elaborate templates to produce that message. See some parts in Template:Protected page text and Template:Protected page text/semi

Particularly, MediaWiki.org uses almost a similar design with enwiki and it displays well. French Wikipedia uses design, but took a different approach, and it works too. Spanish Wikipedia uses a much simpler design.

MediaWiki.orgFrench WikipediaSpanish Wikipedia
Screen Shot 2020-06-16 at 7.04.55 AM.png (650×358 px, 79 KB)
Screen Shot 2020-06-16 at 7.14.11 AM.png (641×365 px, 84 KB)
Screen Shot 2020-06-16 at 7.32.33 AM.png (647×358 px, 103 KB)

MetaWiki, Arabic Wikipedia and a host of others all copied (or mostly copied) from English Wikipedia's templates, and they suffer from the same problem.

Xaosflux triaged this task as Medium priority.

Local template was updated, tests appear good - if further issues please reopen this task.

I think the 2 column layout on mobile is still very problematic:

Screen Shot 2020-06-16 at 12.26.39 PM.png (1×898 px, 217 KB)

Have you considering adding a media query to stack and display: block these at low resolutions?

That should be discussed locally, the community may prefer to keep both the h2 headings visible as long as possible, even if it will make narrow columns. Local discussions are welcome at: https://en.wikipedia.org/wiki/Template_talk:Protected_page_text