Page MenuHomePhabricator

Apply new mobile visual print styles
Closed, ResolvedPublic8 Estimated 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

Details

SubjectRepoBranchLines +/-
mediawiki/extensions/MobileFrontendprintstyles+4 -0
mediawiki/extensions/MobileFrontendmaster+4 -0
mediawiki/extensions/MobileFrontendprintstyles+10 -2
mediawiki/extensions/MobileFrontendprintstyles+14 -2
mediawiki/extensions/MobileFrontendmaster+14 -2
mediawiki/extensions/MobileFrontendprintstyles+25 -0
mediawiki/extensions/MobileFrontendprintstyles+57 -0
mediawiki/extensions/MobileFrontendprintstyles+36 -8
mediawiki/extensions/MobileFrontendprintstyles+45 -0
mediawiki/extensions/MobileFrontendmaster+10 -2
mediawiki/extensions/MobileFrontendprintstyles+7 -18
mediawiki/extensions/MobileFrontendprintstyles+12 -0
mediawiki/extensions/MobileFrontendmaster+21 -0
mediawiki/extensions/MobileFrontendmaster+11 -0
mediawiki/extensions/MobileFrontendprintstyles+56 -2
mediawiki/extensions/MobileFrontendprintstyles+15 -0
mediawiki/extensions/MobileFrontendmaster+15 -0
mediawiki/extensions/MobileFrontendmaster+13 -0
mediawiki/extensions/MobileFrontendprintstyles+36 -1
mediawiki/extensions/MobileFrontendmaster+31 -0
mediawiki/extensions/MobileFrontendmaster+55 -1
mediawiki/extensions/MobileFrontendmaster+35 -1
Show related patches Customize query in gerrit

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

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

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

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

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

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

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.

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

(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)

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

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

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

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

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

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!

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 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 To Do to Needs Code Review on the Reading-Web-Sprint-94 board.
Jdlrobson moved this task from Ready for Signoff to To Do on the Reading-Web-Sprint-95 board.

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

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

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).