Apply new mobile visual print styles
Closed, ResolvedPublic8 Story Points

Description

Apply new mobile print styles based on the following:

during development we will work on a feature branch *printstyles*. As part of acceptance criteria this will be merged to master.

Design Spec

https://app.zeplin.io/project.html#pid=58b5f95e7b103f89913c25de&dashboard

Note: what to look for

  1. font sizes
  2. line heights
  3. padding around the pages
  4. treatment to images
  5. infobox treatment

Descoped

(This is trickier than we first assumed)

Acceptance criteria

  • print styles should not impact the normal site display
  • Print styles should be feature flagged. Disabled by default and enabled in beta.
    • Conditionally add a skins.minerva.printstyles ResourceLoader module that will only be added when the feature flag is true
  • Do not use @when as the content would differ in beta/stable

Each printed article must contain the following:

  • Title
  • Wiki wordmark
  • Images
    • If an image has not yet been loaded due to lazy loading - no GAP must appear where the image is expected to be
  • Page number
  • Last edited date
  • Licensing
  • All tables in a readable format (readable as determined by Nirzar in the mockups)
  • Link to desktop version of print
  • Link to original article
  • Be in legal size format
  • Mobilefrontend on tablet should use desktop print styles. not the mobile print styles

Articles must not contain:
**This must be feature-flagged and off by default (testing will be done on the beta cluster)

  • Disambiguation notes (ex: This article is about 2-dimensional Euclidean space. For the general theory of 2D objects, see Surface (mathematics))
  • Article notes (ex: main article, see also, further information, redirects, etc - these are currently stripped from the desktop print version)
  • Links to other articles appearing in black, styled as normal text
  • Every template currently stripped in desktop printing should be stripped for the mobile version

Testing Criteria

Style must be available (and tested on) for phones and tables on (at least) the following browsers:

  • Chrome (iOS and Android)
  • Android browser
  • Safari
  • Firefox (iOS and Android)
  • IE Mobile
  • Microsoft Edge
  • Opera Mobile
  • Opera Mini
  • UC Browser
There are a very large number of changes, so older changes are hidden. Show Older Changes
Jdlrobson updated the task description. (Show Details)Apr 5 2017, 11:05 PM
Jdlrobson claimed this task.

I left a few comments in Zeplin but I've got no idea what happened to them so I'll put them here instead for @Nirzar

  1. Do the quote styles apply in the non-print view? I ask because of T114885
  2. Headings use different font families. Is that intentional? Can you justify the additional incurred tech debt?
  3. The fonts are extremely large to the point of being impractical in large infoboxes as they lead to horizontal scrolling which won't work in a printed version. Are they meant to be defined in ems relative to viewport or pixels?

I could also do with a dedicated programmer to help me review/write patches here so I'm not stuck on my own. There are lots of moving parts. Any takers?

I could also do with a dedicated programmer to help me review/write patches here so I'm not stuck on my own. There are lots of moving parts. Any takers?

I can commit to that. I've also left some comments in various patches above.

Change 346824 had a related patch set uploaded (by Bmansurov):
[mediawiki/extensions/MobileFrontend@master] Improved references print styles

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

bmansurov updated the task description. (Show Details)Apr 6 2017, 8:47 PM

Change 346928 had a related patch set uploaded (by Jdlrobson; owner: Bmansurov):
[mediawiki/extensions/MobileFrontend@printstyles] Improved references print styles

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

Change 346824 abandoned by Jdlrobson:
Improved references print styles

Reason:
see https://gerrit.wikimedia.org/r/346928

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

Change 346928 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@printstyles] Improved references print styles

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

Change 346931 had a related patch set uploaded (by Jdlrobson):
[mediawiki/extensions/MobileFrontend@printstyles] Thumbnail styles

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

Jdlrobson updated the task description. (Show Details)Apr 7 2017, 1:11 AM

With regards to the footer, are we planning to show the WMF wordmark there or is this supposed to be the Wikipedia logo at the bottom of the page? If the Wikimedia logo is this supposed to show in the normal non-print view as well? Remember.. anything we show in print view but also be loaded in non-print view.

Rest of bullet points are blocked on an answer to https://phabricator.wikimedia.org/T159857#3159172

So this task is now blocked on code review and answers.

Change 343930 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@printstyles] Article styles for printers

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

@Jdlrobson I'll handle quotation.

Change 347014 had a related patch set uploaded (by Bmansurov):
[mediawiki/extensions/MobileFrontend@master] Improved block quote print styles

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

Change 347014 abandoned by Bmansurov:
Improved block quote print styles

Reason:
wrong branch

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

Change 347019 had a related patch set uploaded (by Bmansurov):
[mediawiki/extensions/MobileFrontend@printstyles] Improved block quote print styles

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

bmansurov updated the task description. (Show Details)Apr 7 2017, 4:32 PM
Jdlrobson updated the task description. (Show Details)Apr 7 2017, 5:26 PM
Jdlrobson updated the task description. (Show Details)

Change 347028 had a related patch set uploaded (by Jdlrobson):
[mediawiki/extensions/MobileFrontend@printstyles] Style footer in printed version

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

Jdlrobson updated the task description. (Show Details)Apr 7 2017, 5:49 PM

There are various problems with the footer design as well, which I have noted in the commit message and I've deployed the WIP styles on http://reading-web-staging.wmflabs.org/wiki/Los_Angeles_Lakers?useformat=mobile&mobileaction=beta

I've setup a meeting for 2pm PST on Monday. Let me know if you want to join. Event is editable and has a clear agenda.
In mean time any review would be helpful as it will bring up other discussion points.

Jdlrobson updated the task description. (Show Details)

Notes from meeting are here - https://etherpad.wikimedia.org/p/printstyles - a little follow up work to do here. When done we'll deploy the styles to reading web staging. When Nirzar is happy they can be merged into master.

Change 347516 had a related patch set uploaded (by Jdlrobson):
[mediawiki/extensions/MobileFrontend@master] Infobox print styles

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

Change 347520 had a related patch set uploaded (by Jdlrobson):
[mediawiki/extensions/MobileFrontend@master] h3->h5 should be san-serif

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

Change 347516 abandoned by Jdlrobson:
Infobox print styles

Reason:
whoops

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

Change 347533 had a related patch set uploaded (by Jdlrobson):
[mediawiki/extensions/MobileFrontend@printstyles] Tweaks for printing layout

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

All patches are up/have been amended so this is now needing review.
Note https://gerrit.wikimedia.org/r/347019 is good to merge, but Nirzar, bmansurov and I agreed to apply these styles to the screen view as well so let's hold off doing that until that's done.

@Nirzar/@Jdlrobson what was the final decision for styling quotes? I see the following comment in the Etherpad, but it's not clear to me:

Quotes

  • Apply in non-print mode
phuedx removed a subscriber: phuedx.Apr 11 2017, 4:01 PM

(basically move your styles from the print style sheet to resources/skins.minerva.content.styles/blockquotes.less)

(basically move your styles from the print style sheet to resources/skins.minerva.content.styles/blockquotes.less)

^ contradicts ↓

@bmansurov final decision was to resolve this T114885: Mobile should equip blockquote with language dependent quotation marks

Currently, I'm hiding quotation marks in print mode and adding a left border. Is that what we want to do in non-print mode too?

Yes. We will resolve T114885 by making the quotes languaging neutral (replacing quote marks with left border)

Jdlrobson updated the task description. (Show Details)Apr 11 2017, 7:07 PM

Change 343986 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@printstyles] Increase font size of article headers for print medium

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

Jdlrobson updated the task description. (Show Details)Apr 11 2017, 8:23 PM
Jdlrobson updated the task description. (Show Details)Apr 11 2017, 11:45 PM

Change 347019 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@printstyles] Improved block quote styles

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

Jdlrobson updated the task description. (Show Details)Apr 12 2017, 5:48 PM

Change 347890 had a related patch set uploaded (by Jdlrobson):
[mediawiki/extensions/MobileFrontend@printstyles] h3->h5 should be san-serif

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

Change 347520 abandoned by Jdlrobson:
h3->h5 should be san-serif

Reason:
See https://gerrit.wikimedia.org/r/347890

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

Jdlrobson updated the task description. (Show Details)Apr 12 2017, 5:48 PM

There are 6 patches remaining to wrap this work up:
https://gerrit.wikimedia.org/r/#/q/status:open+project:mediawiki/extensions/MobileFrontend+branch:printstyles

FYI a few have merge conflicts due to the changes in esources/skins.minerva.print.styles/styles.less but are easily resolved manually. Either +2 and I'll fix these myself and self merge them or fix them as part of review.

Change 343976 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@printstyles] Header styles

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

Change 346931 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@printstyles] Thumbnail styles

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

Change 347028 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@printstyles] Style footer in printed version

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

Change 346659 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@printstyles] Infobox print styles

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

Jdlrobson added a comment.EditedApr 12 2017, 10:56 PM

Two remaining patches need reviewing:

@Nirzar to speed things up, I've added the latest code to reading web staging. Be sure to test in both print and non-print mode. If you have any feedback can you post in a single comment so we don't lose anything. Thanks!

@Jdlrobson thanks. i will give it a try

Jdlrobson updated the task description. (Show Details)Apr 12 2017, 10:58 PM

Change 348007 had a related patch set uploaded (by Jdlrobson):
[mediawiki/extensions/MobileFrontend@master] Tweaks for printing layout

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

Change 348007 abandoned by Jdlrobson:
Tweaks for printing layout

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

  1. Currently the paddings are optimized for "Legal" page size which looks great. but if we are unable to force Legal as a default option, we will have to optimize for "letter" page size which is the default on Android and many other devices. choice is based on our constraints
  1. H2 should not have border-bottom in print mode

Change 347533 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@printstyles] Tweaks for printing layout

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

Change 347890 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@printstyles] H3 through H6 should be sans-serif

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

body should have padding on all sides. remove padding from the header or individual elements.

NOTE: The search bar looks broken on reading web staging, hope that's just staging and not caused by new work
Jdlrobson updated the task description. (Show Details)
Jdlrobson updated the task description. (Show Details)Apr 13 2017, 4:28 PM
Jdlrobson removed a project: Patch-For-Review.
Jdlrobson moved this task from Needs Code Review to To Do on the Reading-Web-Sprint-94 board.

I've updated the description with the remaining work that needs to be done if anyone can test.

T162913 seems a little like scope creep to me. I remember when we talked about estimating this card, we were a little wary about that happening. Let's talk about this in standup.

Is there anything blocking us from merging the current state of the print styles to master once the 2 outstanding bugs with headers and legal size are merged and rolling out the current print styles in production beta?

Jdlrobson moved this task from Ready for Signoff to To Do on the Reading-Web-Sprint-95 board.
Jdlrobson removed Jdlrobson as the assignee of this task.
bmansurov updated the task description. (Show Details)Apr 17 2017, 1:25 PM
bmansurov updated the task description. (Show Details)Apr 17 2017, 2:06 PM

Change 348458 had a related patch set uploaded (by Bmansurov):
[mediawiki/extensions/MobileFrontend@printstyles] Remove border-bottom from section headings in print mode

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

bmansurov updated the task description. (Show Details)Apr 17 2017, 2:10 PM
bmansurov updated the task description. (Show Details)Apr 17 2017, 2:20 PM
bmansurov moved this task from To Do to Needs Code Review on the Reading-Web-Sprint-95 board.
bmansurov claimed this task.

Change 348488 had a related patch set uploaded (by Jdlrobson; owner: Bmansurov):
[mediawiki/extensions/MobileFrontend@master] Remove border-bottom from section headings in print mode

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

Change 348488 abandoned by Jdlrobson:
Remove border-bottom from section headings in print mode

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

@Nirzar I've updated reading web staging with the new print styles. Once you've confirmed they are acceptable as a first pass I'll merge them into master (currently configured to only show in beta).

@Jdlrobson Thanks, I will test on multiple devices. guessing there are no other patches pending given the spec.

Change 348458 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@printstyles] Remove border-bottom from section headings in print mode

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

Jdlrobson reassigned this task from bmansurov to Nirzar.Apr 17 2017, 6:38 PM
Jdlrobson removed a project: Patch-For-Review.
bmansurov updated the task description. (Show Details)Apr 17 2017, 6:40 PM
Jdlrobson closed this task as Resolved.Apr 18 2017, 11:59 PM

I've checked with @Nirzar and the current state is good enough to merge to master.

These will now roll out on the train and be present in beta on Thursday April 27th.

I've setup a couple of meetings with @Nirzar and @ovasileva (@bmansurov is optional) to review the existing print styles as soon as they hit the production environment and schedule work for sprint 97.

Any blockers to deploying the change will be recorded in T163287 (if minor) or new tasks (significant changes).