Page MenuHomePhabricator

[Leftovers] Newcomer homepage: Visual design improvements to the homepage layout on Desktop
Closed, ResolvedPublic

Description

This task is about providing some revisions to the display of the homepage modules on desktop caused by various breakpoints and changes to limiting widths on certain wikis with changes to Vector in the Desktop improvements project.

Problem:
The introduction of a collapsible side navigation and min and max page widths in the desktop improvements projects introduces a lot more variability into the widths of the homepage modules. This substantially reduces the utility of using media queries as suggested in T258005 to define breakpoints for Narrow (Tablet and small laptops), Standard (majority Laptop/Desktop), and Wide (large screen) layouts for the newcomer homepage.

Proposed solution:
a) Remove media queries to determine breakpoints:

  • Remove min-width:520px and max-width:1650px from .growthexperiments-homepage-container
  • Remove min-width:520px, width:64% and flex-shrink:0 from .growthexperiments-homepage-container
  • Remove width:36% from .growthexperiments-homepage-group-sidebar-user-variant-C
  • Remove @media (min-width: 1440px) width, min-width, and flex-direction properties
  • Remove @media (max-width: 992px) width, min-width, and flex-direction properties

b) Replace with min-widths for main and side modules set in the flex-basis property of each module in the flexbox layout.
Details:

  • Homepage container for all modules (class .growthexperiments-homepage-container) - add flex-wrap:wrap. This is so that Impact, Mentor, and Help modules wrap below the SE module when there is not enough space for the min-width of the Start and SE modules
  • "Main" modules (class .growthexperiments-homepage-group-main) - add flex:1 0 480px;. This sets a minimum width for the main module content to be 480px, as well as ensuring it grows in width to fill space when the screen is wider.
  • "Sidebar" modules (class . growthexperiments-homepage-group-sidebar )
    • - add flex:1 1 300px. This is so that the group of Impact, Mentor, and Help modules will be min-width 300px when appearing as a side column next to the main modules.
    • - add flex-wrap:wrap so that the Mentor and Help modules will wrap below the Impact module when it is not wide enough for them to appear as a column next to the Impact module.
  • Impact module (class . growthexperiments-homepage-group-sidebar-subgroup-primary) - add flex:1 0 300px so that the Impact module will be min-width 300px when appearing as a side column next to the main modules.
  • Mentor & Help modules (class .growthexperiments-homepage-group-sidebar-subgroup-secondary) - add flex:1 0 300px so that these modules will be min-width 300px to appear as a side column next to the Impact module.

Implementing the following means the 1,2, or 3 column layouts are maintained, but with minimum widths better defined.

1-column
2-columns
3-columns

Event Timeline

RHo renamed this task from [Leftovers] Newcomer homepage: Visual design improvements to the Suggested edits module and overall layout on Desktop to [Leftovers] Newcomer homepage: Visual design improvements to the homepage layout on Desktop.Oct 5 2020, 3:57 PM
RHo updated the task description. (Show Details)
RHo removed a project: Growth Design.
RHo added a subscriber: MMiller_WMF.

hi @MMiller_WMF - can we try to prioritize this make the train if possible?

Change 633734 had a related patch set uploaded (by Kosta Harlan; owner: Kosta Harlan):
[mediawiki/extensions/GrowthExperiments@master] [WIP] Refactor desktop layout for homepage

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

kostajh added a subscriber: kostajh.

My patch assumed we could remove variant A code, which is not true just yet. Unassigning myself in case someone else wants to work on it between now and next week.

Change 633734 abandoned by Kosta Harlan:
[mediawiki/extensions/GrowthExperiments@master] [WIP] Refactor desktop layout for homepage

Reason:
We can't remove variant A code yet.

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

Change 635127 had a related patch set uploaded (by Gergő Tisza; owner: Gergő Tisza):
[mediawiki/extensions/GrowthExperiments@master] Use flex instead of breakpoints for homepage layout

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

Change 635127 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Use flex instead of breakpoints for homepage layout

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

Etonkovidova added a subscriber: Etonkovidova.

For Design reivew
(1) I checked the specs - all seem to be in place.

(2) The following is in place, but there will never be three-column layout (I tried Chrome and FF).

Mentor & Help modules (class .growthexperiments-homepage-group-sidebar-subgroup-secondary) - add flex:1 0 300px so that these modules will be min-width 300px to appear as a side column next to the Impact module.

The three-column layout is present in testwiki wmf.14 (at the width 11140px) but not in betalabs.

(3) additionally checked in IE 11/Edge/Safari 13

Thanks all - in my biased opinion this works a lot better!

For Design reivew
(1) I checked the specs - all seem to be in place.
(2) The following is in place, but there will never be three-column layout (I tried Chrome and FF).

Mentor & Help modules (class .growthexperiments-homepage-group-sidebar-subgroup-secondary) - add flex:1 0 300px so that these modules will be min-width 300px to appear as a side column next to the Impact module.

The three-column layout is present in testwiki wmf.14 (at the width 11140px) but not in betalabs.

Thanks @Etonkovidova, maybe something got fixed between the last couple of days because the 3-col layout is also now on CS Beta today (browser width at 1456px)

1-col
2-col
3-col