Page MenuHomePhabricator
Create Task
Maniphest T159857

Apply new mobile visual print styles
Closed, ResolvedPublic8 Estimated Story Points
Actions

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 +/-
Remove border-bottom from section headings in print modemediawiki/extensions/MobileFrontendprintstyles+4 -0
Remove border-bottom from section headings in print modemediawiki/extensions/MobileFrontendmaster+4 -0
H3 through H6 should be sans-serifmediawiki/extensions/MobileFrontendprintstyles+10 -2
Tweaks for printing layoutmediawiki/extensions/MobileFrontendprintstyles+14 -2
Tweaks for printing layoutmediawiki/extensions/MobileFrontendmaster+14 -2
Infobox print stylesmediawiki/extensions/MobileFrontendprintstyles+25 -0
Style footer in printed versionmediawiki/extensions/MobileFrontendprintstyles+57 -0
Thumbnail stylesmediawiki/extensions/MobileFrontendprintstyles+36 -8
Header stylesmediawiki/extensions/MobileFrontendprintstyles+45 -0
h3->h5 should be san-serifmediawiki/extensions/MobileFrontendmaster+10 -2
Improved block quote stylesmediawiki/extensions/MobileFrontendprintstyles+7 -18
Increase font size of article headers for print mediummediawiki/extensions/MobileFrontendprintstyles+12 -0
Infobox print stylesmediawiki/extensions/MobileFrontendmaster+21 -0
Improved block quote print stylesmediawiki/extensions/MobileFrontendmaster+11 -0
Article styles for printersmediawiki/extensions/MobileFrontendprintstyles+56 -2
Improved references print stylesmediawiki/extensions/MobileFrontendprintstyles+15 -0
Improved references print stylesmediawiki/extensions/MobileFrontendmaster+15 -0
Infobox print stylesmediawiki/extensions/MobileFrontendmaster+13 -0
Feature flagged print stylesmediawiki/extensions/MobileFrontendprintstyles+36 -1
WIP: Header stylesmediawiki/extensions/MobileFrontendmaster+31 -0
Article styles for printersmediawiki/extensions/MobileFrontendmaster+55 -1
Feature flagged print stylesmediawiki/extensions/MobileFrontendmaster+35 -1
Show related patches Customize query in gerrit

Related Objects
Search...

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
• bmansurov added a comment.Apr 5 2017, 11:19 PM

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.

gerritbot added a comment.Apr 6 2017, 7:54 PM

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
Jdlrobson created subtask T162414: User should be alerted when lazy loaded images haven't loaded in printed version of articles.Apr 6 2017, 10:33 PM
gerritbot added a comment.Apr 7 2017, 12:39 AM

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

gerritbot added a comment.Apr 7 2017, 12:39 AM

Change 346824 abandoned by Jdlrobson:
Improved references print styles

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

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

gerritbot added a comment.Apr 7 2017, 12:58 AM

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

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

gerritbot added a comment.Apr 7 2017, 1:11 AM

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
Jdlrobson moved this task from Doing to Needs Code Review on the Reading-Web-Sprint-95 board.Apr 7 2017, 1:14 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.

gerritbot added a comment.Apr 7 2017, 2:05 PM

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

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

• bmansurov added a comment.Apr 7 2017, 3:32 PM

@Jdlrobson I'll handle quotation.

gerritbot added a comment.Apr 7 2017, 4:14 PM

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

gerritbot added a comment.Apr 7 2017, 4:15 PM

Change 347014 abandoned by Bmansurov:
Improved block quote print styles

Reason:
wrong branch

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

gerritbot added a comment.Apr 7 2017, 4:31 PM

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)
gerritbot added a comment.Apr 7 2017, 5:49 PM

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
Jdlrobson added a comment.Apr 7 2017, 6:23 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 changed the status of subtask T162414: User should be alerted when lazy loaded images haven't loaded in printed version of articles from Open to Stalled.Apr 10 2017, 6:35 PM
Jdlrobson updated the task description. (Show Details)
Jdlrobson added a comment.Apr 10 2017, 9:52 PM

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.

gerritbot added a comment.Apr 10 2017, 10:01 PM

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

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

gerritbot added a comment.Apr 10 2017, 10:12 PM

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

gerritbot added a comment.Apr 10 2017, 10:15 PM

Change 347516 abandoned by Jdlrobson:
Infobox print styles

Reason:
whoops

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

gerritbot added a comment.Apr 10 2017, 11:12 PM

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

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

Jdlrobson added a comment.Apr 10 2017, 11:16 PM

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.

• bmansurov added a comment.Apr 11 2017, 1:39 PM

@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
• Nirzar added a comment.Apr 11 2017, 5:29 PM

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

Jdlrobson added a comment.Apr 11 2017, 5:46 PM

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

• bmansurov added a comment.Apr 11 2017, 6:16 PM

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

Jdlrobson added a comment.Apr 11 2017, 7:06 PM

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
gerritbot added a comment.Apr 11 2017, 7:20 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
gerritbot added a comment.Apr 11 2017, 11:54 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
gerritbot added a comment.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

gerritbot added a comment.Apr 12 2017, 5:48 PM

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.

gerritbot added a comment.Apr 12 2017, 10:09 PM

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

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

gerritbot added a comment.Apr 12 2017, 10:28 PM

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

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

gerritbot added a comment.Apr 12 2017, 10:32 PM

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

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

gerritbot added a comment.Apr 12 2017, 10:48 PM

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!

• Nirzar added a comment.Apr 12 2017, 10:56 PM

@Jdlrobson thanks. i will give it a try

Jdlrobson updated the task description. (Show Details)Apr 12 2017, 10:58 PM
gerritbot added a comment.Apr 12 2017, 11:26 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

gerritbot added a comment.Apr 12 2017, 11:27 PM

Change 348007 abandoned by Jdlrobson:
Tweaks for printing layout

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

• Nirzar added a comment.Apr 12 2017, 11:32 PM
  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
gerritbot added a comment.Apr 13 2017, 12:01 AM

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

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

gerritbot added a comment.Apr 13 2017, 12:04 AM

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

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

• Nirzar added a comment.Apr 13 2017, 12:29 AM

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
• Nirzar created subtask T162913: Improve infobox legibility .Apr 13 2017, 4:20 PM
Jdlrobson moved this task from Needs Code Review to Ready for Signoff on the Reading-Web-Sprint-95 board.Apr 13 2017, 4:25 PM
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 removed Jdlrobson as the assignee of this task.Apr 13 2017, 4:29 PM
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.
ovasileva moved this task from 2016-17 Q3 to 2016-17 Q4 on the Web-Team-Backlog board.Apr 13 2017, 7:10 PM
• 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
gerritbot added a comment.Apr 17 2017, 2:10 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

gerritbot added a project: Patch-For-Review.Apr 17 2017, 2:10 PM
• bmansurov updated the task description. (Show Details)Apr 17 2017, 2:10 PM
• bmansurov claimed this task.Apr 17 2017, 2:20 PM
• bmansurov updated the task description. (Show Details)
• bmansurov moved this task from To Do to Needs Code Review on the Reading-Web-Sprint-95 board.
gerritbot added a comment.Apr 17 2017, 5:18 PM

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

gerritbot added a comment.Apr 17 2017, 5:19 PM

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

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

Jdlrobson added a comment.Apr 17 2017, 5:32 PM

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

• Nirzar added a comment.Apr 17 2017, 5:34 PM

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

gerritbot added a comment.Apr 17 2017, 5:35 PM

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 moved this task from Needs Code Review to Doing on the Reading-Web-Sprint-95 board.Apr 17 2017, 7:17 PM
Jdlrobson moved this task from Doing to Ready for Signoff on the Reading-Web-Sprint-95 board.Apr 18 2017, 11:35 PM
Jdlrobson mentioned this in T162913: Improve infobox legibility .Apr 18 2017, 11:46 PM
Jdlrobson closed subtask T162913: Improve infobox legibility as Resolved.
Jdlrobson mentioned this in T114885: Mobile should equip blockquote with language dependent quotation marks.
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).

Jdlrobson changed the status of subtask T162414: User should be alerted when lazy loaded images haven't loaded in printed version of articles from Stalled to Open.May 21 2017, 11:30 AM
Jdlrobson closed subtask T162414: User should be alerted when lazy loaded images haven't loaded in printed version of articles as Declined.May 21 2017, 12:12 PM
Jdlrobson reopened subtask T162414: User should be alerted when lazy loaded images haven't loaded in printed version of articles as Open.Jun 6 2018, 10:11 PM
Izno removed a subtask: T162414: User should be alerted when lazy loaded images haven't loaded in printed version of articles.Dec 8 2020, 3:42 AM
Jdlrobson mentioned this in T323636: Mobile print styles are different depending on device width and don't seem to be correct.Nov 22 2022, 8:15 PM
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL