Page MenuHomePhabricator

Lower Vector min-width to 500px
Closed, ResolvedPublic5 Estimated Story Points

Description

Loweing the min-width from Vector will allow the Vector skin to be more fluid. While removing the min-width is trivial, we may want to consider other parts of the design in addition to this work.

Note: we are committed to revisiting the presentation of the tabs at the top of the page as a part of the aesthetic refinements at the end of the project.

Designs

widthcurrentfixednotes
1920px
Screen Shot 2020-10-02 at 2.19.28 PM.png (1×2 px, 723 KB)
-no changes
1385px
Screen Shot 2020-10-02 at 2.26.16 PM.png (1×1 px, 698 KB)
Screen Shot 2020-10-02 at 2.20.14 PM.png (1×1 px, 698 KB)
user links should not wrap until they run out of space. I think this might be related to the search container having flex-grow: 1
1054px
Screen Shot 2020-10-02 at 2.21.28 PM.png (1×1 px, 682 KB)
-no changes
917px
Screen Shot 2020-10-02 at 2.21.56 PM.png (1×1 px, 666 KB)
-no changes (looks like once min-width is removed this size will be fine as-is)
500px
Screen Shot 2020-10-02 at 2.31.07 PM.png (1×612 px, 504 KB)
Screen Shot 2020-10-02 at 2.22.20 PM.png (1×612 px, 512 KB)
search bar should remain in top position across from logo, don't think it needs a min-width at that point

Acceptance criteria

  • The design adapts all the way down to 500px
  • For now, at anything lower than 500px, the design will not adapt any further to focus engineering efforts.

Developer notes

The logo https://en.wikipedia.org/static/images/mobile/copyright/wikisource-wordmark-zh.svg is the widest of all our deployed logos so make sure to use this during development.

Questions to be answered during development

  • What adjustments need to be made to the header/sidebar/tabs at lower resolutions?

QA Results - Beta

ACStatusDetails
1T264218#6756382

QA Results - Prod

ACStatusDetails
1T264218#6773616

Event Timeline

Change 631552 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/Vector@master] POC: Vector should support lower resolutions

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

Change 631552 abandoned by Jdlrobson:
[mediawiki/skins/Vector@master] POC: Vector should support lower resolutions

Reason:

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

ovasileva set the point value for this task to 5.Oct 21 2020, 4:30 PM

Change 631552 restored by Jdlrobson:
[mediawiki/skins/Vector@master] POC: Vector should support lower resolutions

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

Jdlrobson renamed this task from Remove min width from Vector to Lower Vector min-width to 500px.Dec 15 2020, 10:15 PM
Jdlrobson updated the task description. (Show Details)

this is easily one of the most exciting patches I've had the pleasure of reviewing. Major props to @Jdlrobson for coming up with a simple and functional solution for opening the main menu at small widths.

defaultsidebar open
1920px
1920px.png (1×2 px, 240 KB)
1920px-open.png (1×2 px, 262 KB)
1260px
1260px.png (1×1 px, 213 KB)
1260px-open.png (1×1 px, 242 KB)
960px
960px.png (874×1 px, 180 KB)
960px-open.png (874×1 px, 207 KB)
500px
500px.png (899×612 px, 154 KB)
500px-open.png (899×612 px, 183 KB)

💓

Change 631552 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Vector should support lower 500px resolution

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

alexhollender_WMF added a subscriber: Edtadros.

@Jdlrobson just took another look, seems to be all correct : )

@Edtadros for QA please visit the site at the various widths listed here T264218#6737775 and confirm that the header matches what you see in those screenshots (not the screenshots in the task description). Check various browsers and various different pages. For each check we should try with the sidebar open and the sidebar closed.

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Big Sur
Browser: Chrome, Firefox, Safari
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

✅ AC1: for QA please visit the site at the various widths listed here T264218#6737775 and confirm that the header matches what you see in those screenshots (not the screenshots in the task description). Check various browsers and various different pages. For each check, we should try with the sidebar open and the sidebar closed.

Chrome:

Sidebar ExpandedSidebar Collapsed
1920px
en.wikipedia.beta.wmflabs.org_wiki_Spain.png (1×3 px, 633 KB)
en.wikipedia.beta.wmflabs.org_wiki_Spain (1).png (1×3 px, 505 KB)
1260px
en.wikipedia.beta.wmflabs.org_wiki_Spain (2).png (1×2 px, 597 KB)
en.wikipedia.beta.wmflabs.org_wiki_Spain (3).png (1×2 px, 441 KB)
960px
en.wikipedia.beta.wmflabs.org_wiki_Spain (4).png (1×1 px, 569 KB)
en.wikipedia.beta.wmflabs.org_wiki_Spain (5).png (1×1 px, 415 KB)
500px
Screen Shot 2021-01-18 at 1.35.13 PM.png (1×502 px, 172 KB)
Screen Shot 2021-01-18 at 1.35.26 PM.png (1×502 px, 217 KB)

Firefox:

Sidebar ExpandedSidebar Collapsed
1920px
Screen Shot 2021-01-18 at 13.43.34.png (1×1 px, 529 KB)
Screen Shot 2021-01-18 at 13.45.22.png (1×1 px, 486 KB)
1260px
Screen Shot 2021-01-18 at 13.46.07.png (1×1 px, 508 KB)
Screen Shot 2021-01-18 at 13.46.03.png (1×1 px, 467 KB)
960px
Screen Shot 2021-01-18 at 13.46.44.png (1×960 px, 461 KB)
Screen Shot 2021-01-18 at 13.46.48.png (1×960 px, 449 KB)
500px
Screen Shot 2021-01-18 at 13.46.57.png (1×500 px, 108 KB)
Screen Shot 2021-01-18 at 13.47.00.png (1×500 px, 333 KB)

Safari:

Sidebar ExpandedSidebar Collapsed
1920px
Screen Shot 2021-01-18 at 1.55.50 PM.png (873×1 px, 476 KB)
Screen Shot 2021-01-18 at 1.56.03 PM.png (872×1 px, 430 KB)
1260px
Screen Shot 2021-01-18 at 1.56.28 PM.png (868×1 px, 511 KB)
Screen Shot 2021-01-18 at 1.56.39 PM.png (873×1 px, 404 KB)
960px
Screen Shot 2021-01-18 at 1.57.04 PM.png (870×974 px, 431 KB)
Screen Shot 2021-01-18 at 1.57.15 PM.png (870×976 px, 361 KB)
500px
Screen Shot 2021-01-18 at 1.58.43 PM.png (1×542 px, 168 KB)
Screen Shot 2021-01-18 at 1.58.59 PM.png (1×542 px, 283 KB)

@alexhollender can you please take a look at the 1920 resolutions and make sure they are ok. They differ slightly from the expected screenshots in your instructions.

Discussed the 1920px resolution question (see T264218#6756382) in standup and we agreed that the actual behavior was correct. Moving to Needs QA in Prod.

Discussed the 1920px resolution question (see T264218#6756382) in standup and we agreed that the actual behavior was correct. Moving to Needs QA in Prod.

ah wow, I totally missed that in the version I tested and took screenshots of. The version in your screenshots looks correct.

Test Result - Prod

Status: ✅ PASS
Environment: enwiki
OS: macOS Big Sur
Browser: Chrome, Firefox, Safari
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

✅ AC1: for QA please visit the site at the various widths listed here T264218#6737775 and confirm that the header matches what you see in those screenshots (not the screenshots in the task description). The behavior for 1920px is acceptable in the images shown per T264218#6767759. Check various browsers and various different pages. For each check, we should try with the sidebar open and the sidebar closed.

Chrome:

Sidebar ExpandedSidebar Collapsed
1920px
Screen Shot 2021-01-25 at 6.30.33 AM.png (803×1 px, 524 KB)
Screen Shot 2021-01-25 at 6.31.07 AM.png (800×1 px, 472 KB)
1260px
Screen Shot 2021-01-25 at 6.32.04 AM.png (801×1 px, 510 KB)
Screen Shot 2021-01-25 at 6.31.38 AM.png (802×1 px, 453 KB)
960px
Screen Shot 2021-01-25 at 6.32.45 AM.png (800×960 px, 476 KB)
Screen Shot 2021-01-25 at 6.33.43 AM.png (803×961 px, 422 KB)
500px
Screen Shot 2021-01-25 at 6.36.14 AM.png (1×516 px, 125 KB)
Screen Shot 2021-01-25 at 6.36.27 AM.png (1×514 px, 370 KB)

Firefox:

Sidebar ExpandedSidebar Collapsed
1920px
Screen Shot 2021-01-25 at 6.40.03 AM.png (929×1 px, 570 KB)
Screen Shot 2021-01-25 at 6.40.18 AM.png (925×1 px, 517 KB)
1260px
Screen Shot 2021-01-25 at 6.41.22 AM.png (929×1 px, 548 KB)
Screen Shot 2021-01-25 at 6.41.32 AM.png (928×1 px, 492 KB)
960px
Screen Shot 2021-01-25 at 6.42.14 AM.png (930×976 px, 524 KB)
Screen Shot 2021-01-25 at 6.42.23 AM.png (930×977 px, 485 KB)
500px
Screen Shot 2021-01-25 at 6.43.46 AM.png (1×516 px, 136 KB)
Screen Shot 2021-01-25 at 6.43.57 AM.png (1×514 px, 487 KB)

Safari:

Sidebar ExpandedSidebar Collapsed
1920px
Screen Shot 2021-01-25 at 6.54.31 AM.png (926×1 px, 539 KB)
Screen Shot 2021-01-25 at 6.54.44 AM.png (926×1 px, 485 KB)
1260px
Screen Shot 2021-01-25 at 6.56.57 AM.png (923×1 px, 576 KB)
Screen Shot 2021-01-25 at 6.57.06 AM.png (924×1 px, 461 KB)
960px
Screen Shot 2021-01-25 at 6.58.38 AM.png (924×975 px, 551 KB)
Screen Shot 2021-01-25 at 6.58.46 AM.png (924×975 px, 443 KB)
500px
Screen Shot 2021-01-25 at 7.01.25 AM.png (1×517 px, 216 KB)
Screen Shot 2021-01-25 at 7.01.36 AM.png (1×517 px, 440 KB)