Page MenuHomePhabricator
Create Task
Maniphest T317573

(M) [Visual enhancement] Remove horizontal padding on .mw-body
Closed, ResolvedPublic1 Estimated Story Points
Actions

Assigned To
ovasileva
Authored By
bwang
Sep 12 2022, 8:37 PM
Tags
Referenced Files
F35692099: Screenshot 2022-11-01 at 9.53.21 AM.png
Nov 1 2022, 4:58 PM
F35692097: Screenshot 2022-11-01 at 9.51.45 AM.png
Nov 1 2022, 4:58 PM
F35692095: Screenshot 2022-11-01 at 9.50.39 AM.png
Nov 1 2022, 4:58 PM
F35627768: Screen Shot 2022-10-25 at 3.56.44 PM.png
Oct 25 2022, 11:00 PM
F35627766: Screen Shot 2022-10-25 at 3.55.15 PM.png
Oct 25 2022, 11:00 PM
F35540025: Screen Shot 2022-09-29 at 9.53.29 AM.png
Sep 29 2022, 2:58 PM
F35540013: Screen Shot 2022-09-29 at 9.48.10 AM.png
Sep 29 2022, 2:58 PM
F35540023: Screen Shot 2022-09-29 at 9.52.43 AM.png
Sep 29 2022, 2:58 PM
View All 11 Files
Subscribers
Aklapper
• alexhollender_WMF
bwang
Edtadros
Jdlrobson
Jdrewniak
ovasileva

Description

Background

During design review on T315261, @alexhollender_WMF noticed how the footer isn't aligned with the rest of the page on viewports larger than 1000px. Rather than apply horizontal padding to the footer to match .mw-body, it's simpler and more consistent to move the horizontal padding on .mw-body to the page container instead. This is how spacing is handled on lower viewports, and also solves a few problems at once:

Note in this screenshot:

  • The padding on .mw-body means the body content is 24px skinnier than the max width (960px)
  • Related articles isn't aligned with the body content

Current:

Screen Shot 2022-09-12 at 3.30.43 PM.png (1×2 px, 201 KB)

Proposed:
Screen Shot 2022-09-12 at 3.32.00 PM.png (1×2 px, 202 KB)

AC

  • There is no horizontal padding on .mw-body
  • Footer text and border is always aligned with the header icons
  • Related pages & banners are aligned with the page content (and with the rest of the page on smaller viewports)

Details

SubjectRepoBranchLines +/-
EXPECTED VISUAL CHANGES IN WMF.4mediawiki/skins/Vectorwmf/1.40.0-wmf.4+59 -51
Move horizontal padding from .mw-body to .mw-page-container, improve .mw-page-container stylesmediawiki/skins/Vectormaster+59 -51
Customize query in gerrit

Related Objects
Search...

Event Timeline

bwang created this task.Sep 12 2022, 8:37 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptSep 12 2022, 8:37 PM
• alexhollender_WMF mentioned this in T315261: [Visual refinement] Improve alignment of icon buttons in header, page content & stickyheader.Sep 12 2022, 9:12 PM
Jdlrobson added a project: Web-Team-Backlog.Sep 12 2022, 10:01 PM
ovasileva triaged this task as Medium priority.Sep 13 2022, 2:48 PM
ovasileva moved this task from Incoming to Current Fiscal Year on the Web-Team-Backlog board.
ovasileva added a parent task: T317632: [EPIC] Visual refinements pt2.
ovasileva edited projects, added Web-Team-Backlog (Kanbanana-2022-23-Q1); removed Web-Team-Backlog.Sep 14 2022, 2:14 PM
ovasileva subscribed.

Pulling this one into the board as it seems it's closely tied to T315261: [Visual refinement] Improve alignment of icon buttons in header, page content & stickyheader. However, not a blocker for deployment

bwang claimed this task.Sep 15 2022, 5:10 PM
gerritbot added a comment.Sep 15 2022, 6:57 PM

Change 832539 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/skins/Vector@master] POC: Move horizontal padding from .mw-body to .mw-page-container, improve .mw-page-container styles

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

gerritbot added a project: Patch-For-Review.Sep 15 2022, 6:57 PM
bwang added a comment.EditedSep 15 2022, 7:00 PM

This task can be done with CSS only. This change will likely involve quite a few visual changes and is riskier for regressions, especially considering how page container styles impact many different elements (TOC, collapsed TOC, and sticky header). It also allows for a good amount of CSS cleanup. POC patch above covers most of the task

bwang removed bwang as the assignee of this task.Sep 15 2022, 7:00 PM
bwang moved this task from Needs Analysis to Upcoming on the Web-Team-Backlog (Kanbanana-2022-23-Q1) board.
gerritbot added a comment.Sep 15 2022, 7:01 PM

Change 832539 abandoned by Bernard Wang:

[mediawiki/skins/Vector@master] POC: Move horizontal padding from .mw-body to .mw-page-container, improve .mw-page-container styles

Reason:

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

gerritbot added a comment.Sep 15 2022, 7:11 PM

Change 832539 restored by Bernard Wang:

[mediawiki/skins/Vector@master] POC: Move horizontal padding from .mw-body to .mw-page-container, improve .mw-page-container styles

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

bwang updated the task description. (Show Details)Sep 15 2022, 7:27 PM
bwang updated the task description. (Show Details)
gerritbot added a comment.Sep 16 2022, 7:10 PM

Change 832539 abandoned by Bernard Wang:

[mediawiki/skins/Vector@master] POC: Move horizontal padding from .mw-body to .mw-page-container, improve .mw-page-container styles

Reason:

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

LGoto set the point value for this task to 3.Sep 26 2022, 5:48 PM
LGoto moved this task from Upcoming to Ready for Development on the Web-Team-Backlog (Kanbanana-2022-23-Q1) board.
bwang updated the task description. (Show Details)Sep 26 2022, 5:49 PM
gerritbot added a comment.Sep 26 2022, 6:22 PM

Change 832539 restored by Bernard Wang:

[mediawiki/skins/Vector@master] POC: Move horizontal padding from .mw-body to .mw-page-container, improve .mw-page-container styles

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

bwang claimed this task.Sep 26 2022, 9:17 PM
bwang moved this task from Ready for Development to Doing on the Web-Team-Backlog (Kanbanana-2022-23-Q1) board.
bwang removed bwang as the assignee of this task.Sep 26 2022, 10:04 PM
bwang moved this task from Doing to Code Review on the Web-Team-Backlog (Kanbanana-2022-23-Q1) board.
Jdlrobson moved this task from Needs triage to Triaged on the Vector (legacy skin) board.Sep 27 2022, 10:38 PM
Jdlrobson removed a project: Vector (legacy skin).Sep 27 2022, 10:43 PM
bwang added a comment.Sep 28 2022, 6:17 PM

@alexhollender_WMF I was wondering, is it also intended to have top and bottom padding on .mw-body? For example .mw-body has a top padding of 8px, meaning the total space between the header and the content is 32px (8px + 24px). Similarly for the total spacing between the footer and content is 74px (24px + 50px)

• alexhollender_WMF added a comment.EditedSep 28 2022, 9:04 PM

@bwang the amount of spacing between the header and the article title currently looks good, though I'm not sure if it needs to be achieved by having padding on .mw-body? I just checked when a banner is enabled, but it seems like the banner has its own padding, so I'm not sure why .mw-body would need padding on the top of bottom.

bwang added a comment.EditedSep 29 2022, 2:58 PM

@alexhollender_WMF Yeah I think the bottom padding is the only one that makes a difference, and its only when there's something on the bottom of the page like related articles or the TOC. For the top padding it doesn't really matter where we put it.

Padding on .mw-body with related articles:

Screen Shot 2022-09-29 at 9.47.04 AM.png (1×2 px, 404 KB)

Padding moved to footer with related articles:
Screen Shot 2022-09-29 at 9.48.10 AM.png (1×2 px, 365 KB)

Padding on .mw-body with TOC:
Screen Shot 2022-09-29 at 9.52.43 AM.png (836×2 px, 252 KB)

Padding moved to footer with TOC:
Screen Shot 2022-09-29 at 9.53.29 AM.png (880×2 px, 257 KB)

I'm thinking it might be worth it to move all the padding off .mw-body due to those cases above, and also for consistency. What do you think?

LGoto assigned this task to Jdrewniak.Sep 29 2022, 5:10 PM
• alexhollender_WMF added a comment.Sep 29 2022, 5:55 PM
In T317573#8272802, @bwang wrote:

I'm thinking it might be worth it to move all the padding off .mw-body due to those cases above, and also for consistency. What do you think?

yea that makes sense to me. And then for the 8px of space we'd be loosing between the header and the article title, we could add that in somewhere else?

LGoto edited projects, added Web-Team-Backlog (Kanbanana-2022-23-Q2); removed Web-Team-Backlog (Kanbanana-2022-23-Q1).Oct 3 2022, 5:21 PM
LGoto moved this task from Needs Analysis to Code Review on the Web-Team-Backlog (Kanbanana-2022-23-Q2) board.
Jdlrobson renamed this task from [Visual enhancement] Remove horizontal padding on .mw-body to (M) [Visual enhancement] Remove horizontal padding on .mw-body.Oct 3 2022, 5:34 PM
Jdlrobson changed the point value for this task from 3 to 1.
bwang added a comment.Oct 3 2022, 8:26 PM

@alexhollender_WMF Yep that can be moved to the site notice, which currently applies a 24px top padding via margin collapsing. It's really confusing but that setup is necessary due to inconsistencies with the site notice across wikis.
I made a task for it here: https://phabricator.wikimedia.org/T319238

Jdlrobson added a parent task: T319047: [Goal] Vector 2022 post-deployment work for Q2.Oct 4 2022, 11:03 PM
gerritbot added a comment.Oct 5 2022, 5:06 PM

Change 832539 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Move horizontal padding from .mw-body to .mw-page-container, improve .mw-page-container styles

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

ReleaseTaggerBot added a project: MW-1.40-notes (1.40.0-wmf.5; 2022-10-10).Oct 5 2022, 6:00 PM
gerritbot added a comment.Oct 5 2022, 7:54 PM

Change 838818 had a related patch set uploaded (by Jdlrobson; author: Bernard Wang):

[mediawiki/skins/Vector@wmf/1.40.0-wmf.4] Move horizontal padding from .mw-body to .mw-page-container, improve .mw-page-container styles

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

gerritbot added a comment.Oct 12 2022, 3:46 PM

Change 838818 abandoned by Jdlrobson:

[mediawiki/skins/Vector@wmf/1.40.0-wmf.4] EXPECTED VISUAL CHANGES IN WMF.4

Reason:

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

bwang reassigned this task from Jdrewniak to Edtadros.Oct 19 2022, 2:55 PM
bwang moved this task from Code Review to QA on the Web-Team-Backlog (Kanbanana-2022-23-Q2) board.
bwang added a subscriber: Jdrewniak.
Edtadros moved this task from QA to QA in Prod on the Web-Team-Backlog (Kanbanana-2022-23-Q2) board.Oct 25 2022, 11:00 PM

Test Result - Beta

Status: ✅ PASS
Environment: beta wikiversity
OS: macOS Monterey
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

✅ AC1: There is no horizontal padding on .mw-body

Screen Shot 2022-10-25 at 3.55.15 PM.png (903×959 px, 200 KB)

✅ AC2: Footer text and border is always aligned with the header icons
Screen Shot 2022-10-25 at 3.56.44 PM.png (1×958 px, 174 KB)

✅ AC3: Related pages & banners are aligned with the page content (and with the rest of the page on smaller viewports)
See Above.

Edtadros reassigned this task from Edtadros to Jdlrobson.Nov 1 2022, 4:58 PM
Edtadros subscribed.

Test Result - Prod

Status: ❓
Environment: enwikiversity
OS: macOS Monterey
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

✅ AC1: There is no horizontal padding on .mw-body

Screenshot 2022-11-01 at 9.50.39 AM.png (942×1 px, 354 KB)

✅ AC2: Footer text and border is always aligned with the header icons
Screenshot 2022-11-01 at 9.51.45 AM.png (977×1 px, 288 KB)

❓ AC3: Related pages & banners are aligned with the page content (and with the rest of the page on smaller viewports)
It looks like I missed this in Beta. Should the related pages be block justified or just left justified?
Screenshot 2022-11-01 at 9.53.21 AM.png (651×981 px, 185 KB)

Jdlrobson reassigned this task from Jdlrobson to • alexhollender_WMF.Nov 1 2022, 11:58 PM
Jdlrobson subscribed.

@alexhollender_WMF should related articles be left justified or centered? (link: https://en.wikivoyage.beta.wmflabs.org/wiki/Related_test) ?

• alexhollender_WMF added a comment.Nov 2 2022, 2:10 PM
In T317573#8361528, @Jdlrobson wrote:

@alexhollender_WMF should related articles be left justified or centered? (link: https://en.wikivoyage.beta.wmflabs.org/wiki/Related_test) ?

left. (could also be cool to make their widths % based so they fill the available space)

Jdlrobson reassigned this task from • alexhollender_WMF to ovasileva.Nov 2 2022, 3:55 PM
Jdlrobson mentioned this in T286835: Port RelatedArticles to Codex.
Jdlrobson moved this task from QA in Prod to Ready for Signoff on the Web-Team-Backlog (Kanbanana-2022-23-Q2) board.
In T317573#8363185, @alexhollender_WMF wrote:
In T317573#8361528, @Jdlrobson wrote:

@alexhollender_WMF should related articles be left justified or centered? (link: https://en.wikivoyage.beta.wmflabs.org/wiki/Related_test) ?

left. (could also be cool to make their widths % based so they fill the available space)

The new rewrite of RelatedArticles (which is stalled) fixes this issue. I have captured the request in T286835 to make sure we QA it at a later date.

ovasileva closed this task as Resolved.Nov 7 2022, 8:49 AM

Discussed with Alex and this is ready to resolve

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