Page MenuHomePhabricator
Create Task
Maniphest T313947

Update page titlebar element source order
Closed, ResolvedPublic3 Estimated Story Points
Actions

Assigned To
ovasileva
Authored By
bwang
Jul 27 2022, 3:56 PM
Tags
Referenced Files
F35525416: Screen Shot 2022-09-19 at 4.48.11 PM.png
Sep 19 2022, 11:49 PM
F35525415: Screen Shot 2022-09-19 at 4.48.48 PM.png
Sep 19 2022, 11:49 PM
F35525414: Screen Shot 2022-09-19 at 4.48.28 PM.png
Sep 19 2022, 11:49 PM
F35521551: Screen Shot 2022-09-15 at 9.40.19 AM.png
Sep 15 2022, 4:57 PM
F35521550: Screen Shot 2022-09-15 at 9.40.13 AM.png
Sep 15 2022, 4:57 PM
F35521549: Screen Shot 2022-09-15 at 9.40.05 AM.png
Sep 15 2022, 4:57 PM
Restricted File
Sep 12 2022, 2:10 PM
Restricted File
Sep 12 2022, 2:10 PM
View All 13 Files
Subscribers
Aklapper
• alexhollender_WMF
bwang
cjming
Edtadros
Jdlrobson
Jdrewniak

Description

Background

Currently the language button and indicators are defined before the h1 in the page titlebar mustache template (ContentHeader.less). This doesn't match the visual design, and the expected order. This task is for switching the source order so that the h1 goes first.

AC

  • No visual changes
  • Both language button and indicators in header works the same
  • The h1 comes first in the DOM

Developer notes

The current source order is due to us using floats to position the language button and indicators. Our solution could continue to use floats, or potentially flexbox

QA Results - Beta

ACStatusDetails
1✅T313947#8240051

QA Results - Prod

ACStatusDetails
1✅T313947#8246948

Details

SubjectRepoBranchLines +/-
Correct ContentHeader source order to match designmediawiki/skins/Vectormaster+23 -11
Customize query in gerrit

Related Objects

Event Timeline

bwang created this task.Jul 27 2022, 3:56 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJul 27 2022, 3:56 PM
bwang updated the task description. (Show Details)Jul 27 2022, 3:56 PM
gerritbot added a comment.Jul 27 2022, 3:57 PM

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

[mediawiki/skins/Vector@master] POC: Correct ContentHeader source order to match design

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

gerritbot added a project: Patch-For-Review.Jul 27 2022, 3:57 PM
ovasileva edited projects, added Web-Team-Backlog (Kanbanana-2022-23-Q1); removed Web-Team-Backlog.Aug 1 2022, 2:08 PM
ovasileva triaged this task as Medium priority.Aug 4 2022, 5:22 PM
Jdlrobson moved this task from Incoming to A11Y on the Desktop Improvements (Vector 2022) board.Aug 5 2022, 5:55 AM
bwang updated the task description. (Show Details)Aug 8 2022, 7:09 PM
Jdlrobson moved this task from Needs Analysis to Upcoming on the Web-Team-Backlog (Kanbanana-2022-23-Q1) board.Aug 16 2022, 7:26 AM
LGoto set the point value for this task to 3.Aug 16 2022, 5:29 PM
LGoto moved this task from Upcoming to Ready for Development on the Web-Team-Backlog (Kanbanana-2022-23-Q1) board.
bwang moved this task from Ready for Development to Doing on the Web-Team-Backlog (Kanbanana-2022-23-Q1) board.Aug 22 2022, 4:46 PM
bwang updated the task description. (Show Details)Aug 22 2022, 5:35 PM
Jdlrobson assigned this task to bwang.Aug 22 2022, 6:03 PM
bwang added a comment.EditedAug 22 2022, 6:19 PM

The downside to this change is that we relied on the incorrect order so that the page title could remain unfloated, and wrap around the language button when the title is very long.

Screen Shot 2022-08-22 at 1.14.47 PM.png (202×1 px, 44 KB)

After changing the order, I can see two possible solutions that will impact the design on pages with long titles and narrow viewports:

  1. Using flexbox:

Screen Shot 2022-08-22 at 1.18.34 PM.png (194×1 px, 44 KB)

  1. Continuing to use floats and display: inline-block on the h1:

Screen Shot 2022-08-22 at 12.59.00 PM.png (276×1 px, 45 KB)

@alexhollender_WMF thoughts?

bwang added a subscriber: • alexhollender_WMF.Aug 22 2022, 6:19 PM
• alexhollender_WMF added a comment.Sep 1 2022, 2:21 PM

@bwang I think option 1 looks a little less awkward

bwang removed bwang as the assignee of this task.Sep 7 2022, 5:19 PM
bwang moved this task from Doing to Code Review on the Web-Team-Backlog (Kanbanana-2022-23-Q1) board.
cjming claimed this task.Sep 8 2022, 5:15 PM
cjming reassigned this task from cjming to Jdrewniak.
cjming subscribed.
gerritbot added a comment.Sep 9 2022, 5:24 PM

Change 817306 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Correct ContentHeader source order to match design

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

Maintenance_bot removed a project: Patch-For-Review.Sep 9 2022, 5:30 PM
ReleaseTaggerBot added a project: MW-1.40-notes (1.40.0-wmf.1; 2022-09-12).Sep 9 2022, 6:00 PM
Jdlrobson moved this task from Code Review to Design Review on the Web-Team-Backlog (Kanbanana-2022-23-Q1) board.Sep 9 2022, 9:38 PM
Jdlrobson subscribed.Sep 9 2022, 11:04 PM

Note: The change in 817306 also impacts the language button at mobile resolution (320x480)

Before:

image.png (754×468 px, 64 KB)

Now:

image.png (720×476 px, 64 KB)

• alexhollender_WMF reassigned this task from Jdrewniak to Edtadros.EditedSep 12 2022, 2:10 PM
• alexhollender_WMF moved this task from Design Review to QA on the Web-Team-Backlog (Kanbanana-2022-23-Q1) board.
• alexhollender_WMF added subscribers: Edtadros, Jdrewniak.

looks good to me

{F35517959}{F35517960}

@Edtadros check out a few different pages in beta, at a few different screen sizes, and make sure there's nothing weird going on with the alignment of the page title and the language switcher

Edtadros moved this task from QA to QA in Prod on the Web-Team-Backlog (Kanbanana-2022-23-Q1) board.Sep 15 2022, 4:57 PM

Test Result - Beta

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

Test Artifact(s):

QA Steps

✅ AC1:check out a few different pages in beta, at a few different screen sizes, and make sure there's nothing weird going on with the alignment of the page title and the language switcher

I checked a few sites in Safari, Firefox, and Chrome. Everything looks fine. Here are some examples of a long title.

Screen Shot 2022-09-15 at 9.40.05 AM.png (932×612 px, 196 KB)

Screen Shot 2022-09-15 at 9.40.13 AM.png (932×922 px, 211 KB)

Screen Shot 2022-09-15 at 9.40.19 AM.png (932×1 px, 229 KB)

bwang mentioned this in T317930: [Regression] Double border on pages with empty toolbar.Sep 16 2022, 5:23 PM
Edtadros reassigned this task from Edtadros to ovasileva.Sep 19 2022, 11:49 PM
Edtadros moved this task from QA in Prod to Ready for Signoff on the Web-Team-Backlog (Kanbanana-2022-23-Q1) board.

Test Result - Prod

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

Test Artifact(s):

QA Steps

✅ AC1:check out a few different pages in dewiki, at a few different screen sizes, and make sure there's nothing weird going on with the alignment of the page title and the language switcher

I checked a few sites in Safari, Firefox, and Chrome. Everything looks fine. Here are some examples of a long title.

Screen Shot 2022-09-19 at 4.48.28 PM.png (1×870 px, 343 KB)

Screen Shot 2022-09-19 at 4.48.48 PM.png (1×1 px, 378 KB)

Screen Shot 2022-09-19 at 4.48.11 PM.png (1×784 px, 341 KB)

Edtadros updated the task description. (Show Details)Sep 19 2022, 11:51 PM
ovasileva closed this task as Resolved.Sep 20 2022, 12:23 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