Homepage: restyling of modules and preview cards on Mobile
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	RHo
	Nov 28 2019, 7:20 PM

Description

In mockups for the newcomer tasks project, we started exploring some changes to the styling of the mobile homepage preview cards and modules. These are shown in the Growth Zeplin board and in the the images below.

Homepage layout pre-SE-initiation

Homepage layout after SE initiation

Start preview - tasks not initiated

Start preview - after initiation

Start module - pre-SE-initiation

Start module after initiation{F31363188}

Mentor module

Help module

Impact - no edits

Impact with edits

This task details the styling changes for mobile, not including the more comprehensive/structural design updates to the collapsible Start module or the Impact module, which will be tackled in T232896, T223219, and T223221 respectively.

Style updates and respective proposed CSS changes:

By making the following CSS changes to the existing version of the Mobile newcomer homepage it should update to look like the following:

M. Homepage summary pre-SE initiation

en.m.wikipedia.beta.wmflabs.org_w_index.php_title=Special_Homepage&source=personaltoolslink&namespace=0(Pixel 2).png (2×1 px, 265 KB)

M. Homepage summary after SE initiation

en.m.wikipedia.beta.wmflabs.org_w_index.php_title=Special_Homepage&source=personaltoolslink&namespace=0(Nexus 5) (2).png (3×1 px, 360 KB)

M. Start module

en.m.wikipedia.beta.wmflabs.org_w_index.php_title=Special_Homepage&source=personaltoolslink&namespace=0(Pixel 2) (1).png (2×1 px, 203 KB)

M. Mentor module

en.m.wikipedia.beta.wmflabs.org_w_index.php_title=Special_Homepage&source=personaltoolslink&namespace=0(Pixel 2) (2).png (1×1 px, 139 KB)

M. Help module

en.m.wikipedia.beta.wmflabs.org_w_index.php_title=Special_Homepage&source=personaltoolslink&namespace=0(Pixel 2) (3).png (1×1 px, 106 KB)

M. Suggested edits module

en.m.wikipedia.beta.wmflabs.org_w_index.php_title=Special_Homepage&source=personaltoolslink&namespace=0(Nexus 5).png (1×1 px, 183 KB)

1. Mobile summary layout

body.mw-special-Homepage.growthexperiments-homepage-mobile-summary .growthexperiments-homepage-container > a > .growthexperiments-homepage-module {
  padding: 0 16px 16px 16px; /* change from 0 0.6875em 0.6875em 0.6875em */
}

/* ** Hide icons ** */
.growthexperiments-homepage-module-mobile-summary .growthexperiments-homepage-module-header-icon {
  display:none; /* no longer show icons before module headers */
}

.growthexperiments-homepage-module-mobile-summary h2.growthexperiments-homepage-module-section-header.growthexperiments-homepage-module-header {
  margin: 12px 0px!important;
  padding:0!important;
}

/* ** Fix header padding on all mobile summary modules **  */
.growthexperiments-homepage-module-mobile-summary .growthexperiments-homepage-module-header-text{
  padding:0!important;
}

.growthexperiments-homepage-module-mobile-summary.growthexperiments-homepage-module {
  box-shadow: none; /* remove box-shadow  */
}

body.mw-special-Homepage.growthexperiments-homepage-mobile-summary .growthexperiments-homepage-container > a > .growthexperiments-homepage-module h2.growthexperiments-homepage-module-section-header .growthexperiments-homepage-module-header-text{
  font-size:14px; /*change from 0.875em */
  line-height:20px;
}

2. MOBILE Start summary

.growthexperiments-homepage-module-start .growthexperiments-homepage-module-section.growthexperiments-homepage-module-section-body.growthexperiments-homepage-module-body{
  padding-left:0!important;
  padding-right:0!important;
}

.growthexperiments-homepage-module-mobile-summary.growthexperiments-homepage-module-start-startediting-completed{
border:solid 1px rgba(234,243,255,.5)!important;  /* this makes the border the same color as the background around the start module when start editing is completed */
}

.growthexperiments-homepage-module-start.growthexperiments-homepage-module-mobile-summary > .growthexperiments-homepage-module-section-body .growthexperiments-homepage-module{
  flex-basis:25%; /* change from 50% */
}

.growthexperiments-homepage-module-start.growthexperiments-homepage-module-mobile-summary > .growthexperiments-homepage-module-section-body .growthexperiments-homepage-module{
 margin-top:0px;  /* change from .5em */
 padding:8px 4px 24px;   /* change from padding:0 0.5em */
}

 /* shift position of icons inside start submodules */
.growthexperiments-homepage-module-mobile-summary.growthexperiments-homepage-module-start > .growthexperiments-homepage-module-body .growthexperiments-homepage-module-header-icon span{
  left:0px;
  top:4px;
}

 /* Add connecting lines in the middle of circular icons  */
.growthexperiments-homepage-module-start.growthexperiments-homepage-module-mobile-summary > .growthexperiments-homepage-module-section-body .growthexperiments-homepage-module:nth-child(1) {
  background-repeat: no-repeat;
  background-image:
    linear-gradient(#54595d 100%, transparent 0);
    background-size:
    33% 1px;
    background-position:
    100% 24px;
}
.growthexperiments-homepage-module-start.growthexperiments-homepage-module-mobile-summary > .growthexperiments-homepage-module-section-body .growthexperiments-homepage-module:nth-child(2), .growthexperiments-homepage-module-start.growthexperiments-homepage-module-mobile-summary > .growthexperiments-homepage-module-section-body .growthexperiments-homepage-module:nth-child(3) {
  background-repeat: no-repeat;
  background-image:
    linear-gradient(#54595d 100%, transparent 0),
    linear-gradient(#54595d 100%, transparent 0);
    background-size:
    33% 1px,
    33% 1px;
    background-position:
    0% 24px,
    100% 24px;
}
.growthexperiments-homepage-module-start.growthexperiments-homepage-module-mobile-summary > .growthexperiments-homepage-module-section-body .growthexperiments-homepage-module:nth-child(4) {
  background-repeat: no-repeat;
  background-image:
    linear-gradient(#54595d 100%, transparent 0);
    background-size:
    33% 1px;
    background-position:
    0% 24px;
}

 /* Re-position text for each submodule below the icons as if inline  */
.growthexperiments-homepage-module-start.growthexperiments-homepage-module-mobile-summary > .growthexperiments-homepage-module-section-body {
  position:relative;
}

.growthexperiments-homepage-module-mobile-summary.growthexperiments-homepage-module-start > .growthexperiments-homepage-module-body .growthexperiments-homepage-module-header-text{
  font-size:12px;
  position:absolute;
  white-space:nowrap;
  overflow:hidden;
  width:50%;
  background-color:transparent;
}

.growthexperiments-homepage-module-mobile-summary.growthexperiments-homepage-module-start > .growthexperiments-homepage-module-body .growthexperiments-homepage-module-header-text::before {
content:'•';
margin-right:10px;
}

.growthexperiments-homepage-module.growthexperiments-homepage-module-start-account .growthexperiments-homepage-module-header-text {
  top:48px;
  left:8px;
}

.growthexperiments-homepage-module.growthexperiments-homepage-module-start-email .growthexperiments-homepage-module-header-text {
  top:48px;
  right:8px;
}

.growthexperiments-homepage-module.growthexperiments-homepage-module-start-tutorial .growthexperiments-homepage-module-header-text {
  top:64px;
  left:8px;
}

.growthexperiments-homepage-module.growthexperiments-homepage-module-start-startediting .growthexperiments-homepage-module-header-text {
  top:64px;
  right:8px;
}

 /* Change bullet to tick and text to green30 for completed items*/
.growthexperiments-homepage-module-mobile-summary .growthexperiments-homepage-module-completed.growthexperiments-homepage-module .growthexperiments-homepage-module-header-text {
color:#14866D;
}

.growthexperiments-homepage-module-mobile-summary .growthexperiments-homepage-module-completed.growthexperiments-homepage-module .growthexperiments-homepage-module-header-text.growthexperiments-homepage-module-header-text::before {
content:'✓';
}

/* Change bullet to tick and text to green30 for completed items*/
.growthexperiments-homepage-module-mobile-summary .growthexperiments-homepage-module-completed, .growthexperiments-homepage-module-completed .growthexperiments-homepage-module-header-text{
  background-color:transparent;
}

3. MOBILE Mentor summary

.growthexperiments-homepage-module.growthexperiments-homepage-module-mentorship {
  background-color: #F8F9FA;
}
.growthexperiments-homepage-module-mobile-summary .growthexperiments-homepage-mentorship-userlink{
  font-size:16px;  /* change from font-size:1.2em */
}

.growthexperiments-homepage-module-mobile-summary .growthexperiments-homepage-mentorship-editcount, .growthexperiments-homepage-mentorship-lastactive {
  font-size:12.8px; /* change from font-size:0.85em */
  color:#54595d;  /* change from #72777d */
}

.growthexperiments-homepage-module-mobile-summary .growthexperiments-homepage-module-text-light{
    color:#54595d!important;  /* change from #72777d */
    font-size:14.8px; /* change from font-size:0.85em */
}

4. MOBILE Help summary

/* ** Make help heading in mobile summary a row  **  */
.growthexperiments-homepage-module-mobile-summary.growthexperiments-homepage-module-help .growthexperiments-homepage-module-section-header.growthexperiments-homepage-module-header{
flex-direction:row;
}
/* ** Hide icon **  */
.growthexperiments-homepage-module-mobile-summary.growthexperiments-homepage-module-help .growthexperiments-homepage-module-header-icon {
display:none;
}

5. MOBILE Structural updates

change icon on the top right on the summary header from OOUI 'next' icon to 'arrowNext'

6. MOBILE Suggested edits summary

.growthexperiments-homepage-module-mobile-summary .suggested-edits-main {
 padding:8px 16px 8px 0!important;
}

7. MOBILE Start module

.homepage-module-overlay .growthexperiments-homepage-module-suggested-edits{
  background-color:rgba(234,243,255,.5)!important;
}


body.mw-special-Homepage .overlay-content .growthexperiments-homepage-module-mobile-overlay .growthexperiments-homepage-module-section-header{
margin-top:0;  /* change from .5em */
margin-bottom:0;  /* change from .5em */
}


.growthexperiments-homepage-module-start.growthexperiments-homepage-module-mobile-overlay .growthexperiments-homepage-module-section .growthexperiments-homepage-module-section-body{
  margin: 0px 8px 0px 48px;
}

.growthexperiments-homepage-module-start.growthexperiments-homepage-module-mobile-overlay > .growthexperiments-homepage-module-section-body .growthexperiments-homepage-module .growthexperiments-homepage-module-section-body{
  padding-left:48px;/* change from 46px */
}

.growthexperiments-homepage-module-start.growthexperiments-homepage-module-mobile-overlay > .growthexperiments-homepage-module-section-body .growthexperiments-homepage-module-start-account .growthexperiments-homepage-module-section-userinfo {
  margin-bottom: 0;/* change from 1em */
}

.growthexperiments-homepage-module-start.growthexperiments-homepage-module-mobile-overlay {
  background-color:rgba(234,243,255,0.5)!important;
  box-shadow:0 0 0 3em rgba(234,243,255,0.5)!important;
}


.growthexperiments-homepage-module-mobile-overlay .growthexperiments-homepage-module-completed{
  background-color:rgba(234,243,255,1)!important;
}

.growthexperiments-homepage-module-mobile-overlay .growthexperiments-homepage-module-completed:first-child{
  box-shadow:0 -24px 0 0 rgba(234,243,255,1)!important;
  margin-top:8px!important;
}

.growthexperiments-homepage-module-start.growthexperiments-homepage-module-mobile-overlay > .growthexperiments-homepage-module-section-body .growthexperiments-homepage-module{
  border-bottom:#fff 1px solid; /* change from border-bottom: #c8ccd1 1px solid */
  padding:16px 16px 24px; /* change from padding:1em 0 1.85em 0 */
}


.growthexperiments-homepage-module.growthexperiments-homepage-module-start-startediting.growthexperiments-homepage-module-mobile-overlay {
  padding-bottom: 32px!important;
}

.growthexperiments-homepage-module-start.growthexperiments-homepage-module-mobile-overlay > .growthexperiments-homepage-module-body .growthexperiments-homepage-module-header-icon{
  width:32px;
  height:32px;
  margin-right: 16px;
  min-width: 32px;
}

.growthexperiments-homepage-module-start.growthexperiments-homepage-module-mobile-overlay > .growthexperiments-homepage-module-body .growthexperiments-homepage-module-header-icon span{
width:20px;
height:20px;
  left:0px; /* change from left:6px */
  top:2px;
}

.growthexperiments-homepage-module-start.growthexperiments-homepage-module-mobile-overlay .growthexperiments-homepage-module-header-text{
  font-size:18.2px!important;
}

.growthexperiments-homepage-module-start.growthexperiments-homepage-module-mobile-overlay .growthexperiments-homepage-module-editcount {
  margin: 8px 0 0 -44px!important;
}

.growthexperiments-homepage-module-start.growthexperiments-homepage-module-mobile-overlay > .growthexperiments-homepage-module-section-body .growthexperiments-homepage-module-start-account .growthexperiments-homepage-module-section-accountage{
  font-size:13.6px;
  margin:0;
  padding:0;
}

8. MOBILE Mentor module

.growthexperiments-homepage-module-mobile-overlay.growthexperiments-homepage-module-mentorship{
  height:calc(100vh - 48px);
  background-color:#F8F9FA!important;
}

.growthexperiments-homepage-module-mobile-overlay .growthexperiments-homepage-mentorship-intro {
font-family:'Charter', 'Georgia', serif;
line-height:1.65;
}


.growthexperiments-homepage-module-mobile-overlay .growthexperiments-homepage-mentorship-intro{
  margin: 8px;
  padding: 8px 16px;
  background-color: #fff;
  box-shadow: 0 -1em 0 88px #fff;
}


.growthexperiments-homepage-module-mobile-overlay .recent-questions-growthexperiments-mentor-questions-list{
  margin-top:8px;
}

.growthexperiments-homepage-module-mobile-overlay.growthexperiments-homepage-module-mentorship {
 padding: 16px!important;
}

9. MOBILE Suggested edits module

.growthexperiments-homepage-module-mobile-overlay.growthexperiments-homepage-module-suggested-edits{
  height:calc(100vh - 48px);
  background-color:rgba(234,243,255,.5)!important;
}

.growthexperiments-homepage-module-mobile-overlay .suggested-edits-footer{
  margin-top:16px!important;
}

NOTE: These changes presume the css updates on T232546 to the Desktop styles have been made.

CSS file of the above available at:
https://github.com/reetssydney/prototypes/blob/master/assets/newcomer%20homepage%20MOBILE%20style%20updates.css

Details

	Project	Branch	Lines +/-	Subject
	mediawiki/extensions/GrowthExperiments	master	+426 -174	Homepage desktop and mobile style updates
	mediawiki/extensions/GrowthExperiments	master	+355 -113	(wip) Homepage desktop and mobile style updates

Customize query in gerrit

Related Objects
Search...

Status	Assigned	Task
Resolved	• Rileych	T213990 [EPIC] Growth: Newcomer homepage
Resolved	kostajh	T239442 Homepage: restyling of modules and preview cards on Mobile
Declined	None	T245971 Homepage mobile: Align edit count in start module account submodule
Invalid	None	T245970 Mobile Homepage: Remove extra left and right padding on the start module
Declined	None	T246340 Mobile homepage: Start preview style issues
Open	None	T246341 Mobile homepage: Mentor preview background color should be `#F8F9FA` (Base90)
Open	None	T246342 Mobile homepage: Mentor module style fixes

Event Timeline

RHo created this task.Nov 28 2019, 7:20 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptNov 28 2019, 7:20 PM

RHo claimed this task.Nov 28 2019, 7:20 PM

RHo moved this task from 📗Backlog (Current sprint) to 💪In Progress on the Growth Design board.

RHo moved this task from Incoming to Needs Design/Design Doing on the Growth-Team (Current Sprint) board.

RHo mentioned this in T232513: Newcomer tasks: homepage changes based on initiation (mobile).

RHo merged a task: T238963: Homepage: restyling of modules on Mobile.Nov 28 2019, 7:24 PM

RHo added a subscriber: Growth-Team.

RHo removed RHo as the assignee of this task.Dec 4 2019, 3:23 PM

RHo updated the task description. (Show Details)

Restricted Application added a subscriber: Liuxinyu970226. · View Herald TranscriptDec 4 2019, 3:23 PM

RHo moved this task from Needs Design/Design Doing to Ready for Development on the Growth-Team (Current Sprint) board.Dec 4 2019, 3:33 PM

RHo removed a project: Growth Design.

kostajh added a project: GrowthExperiments.Dec 6 2019, 9:15 PM

MMiller_WMF added a subscriber: MMiller_WMF.Dec 6 2019, 10:49 PM

MMiller_WMF added a parent task: T213990: [EPIC] Growth: Newcomer homepage.Dec 6 2019, 10:52 PM

MMiller_WMF edited projects, added Growth-Team; removed Growth-Team (Current Sprint).

MMiller_WMF moved this task from Inbox to Upcoming Work on the Growth-Team board.

MMiller_WMF edited projects, added Growth-Team (Current Sprint); removed Growth-Team.Jan 21 2020, 5:52 PM

kostajh updated the task description. (Show Details)Jan 30 2020, 1:23 PM

change icon on the top right on the summary header from OOUI 'next' icon to 'arrowNext'

F31456552 and F31456551 show two different icons -- is it supposed to vary according to whether SE has been initiated?

In T239442#5840069, @kostajh wrote:

change icon on the top right on the summary header from OOUI 'next' icon to 'arrowNext'

F31456552 and F31456551 show two different icons -- is it supposed to vary according to whether SE has been initiated?

Oh oops, no it is not. Sorry I meant to update the arrows to use the mock icon from the first F31456552 image, but think I forgot to update the icon to arrowNext when taking the screenshot from betalabs after changing the CSS. Please make both pre- and post- initated summary modules use the arrowNext icon.

kostajh claimed this task.Feb 4 2020, 10:09 AM

kostajh moved this task from Ready for Development to In Progress on the Growth-Team (Current Sprint) board.

Change 570877 had a related patch set uploaded (by Kosta Harlan; owner: Kosta Harlan):
[mediawiki/extensions/GrowthExperiments@master] Homepage mobile style updates

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

gerritbot added a project: Patch-For-Review.Feb 7 2020, 11:50 AM

@RHo the text looks pretty squished with more verbose languages like Czech, do you want to leave it like this?

It also looks a little awkward at wider width

In T239442#5859540, @kostajh wrote:

It also looks a little awkward at wider width

Hi @kostajh - it looks like the text in your mock the text is centre-aligning across two blocks of icons, whereas my intention is that the text-aligns center within the entire width of the module.
Also I think it will be less awkward looking once the different background colour shades are removed, and the other checkmarks and icons updated.

Hi @kostajh - it looks like the text in your mock the text is centre-aligning across two blocks of icons, whereas my intention is that the text-aligns center within the entire width of the module.

Sorry I'm having trouble picturing this, could you please do a quick mock (or just draw arrows on the existing screenshot) of how you'd like this to look?

Also I think it will be less awkward looking once the different background colour shades are removed, and the other checkmarks and icons updated.

I thought the different background shades are intentional per F31133824, but to confirm you are saying that those different shades should only be set for desktop not not on mobile?

In T239442#5871717, @kostajh wrote:

Hi @kostajh - it looks like the text in your mock the text is centre-aligning across two blocks of icons, whereas my intention is that the text-aligns center within the entire width of the module.

Sorry I'm having trouble picturing this, could you please do a quick mock (or just draw arrows on the existing screenshot) of how you'd like this to look?

Hi @kostajh, yes sure. Here's hopefully a better annotated description

Also I think it will be less awkward looking once the different background colour shades are removed, and the other checkmarks and icons updated.

I thought the different background shades are intentional per F31133824, but to confirm you are saying that those different shades should only be set for desktop not not on mobile?

Yes, it is different for mobile and desktop – besides not having the different background shades on mobile, note that the icons also do not change and other differences that I considered more 'structural' in nature. I mentioned towards the start of this task description that these changes are captured separately in T232896 but it's a long task here. Perhaps you can check out T232896 to determine if it makes it easier for these two tasks to be split out differently (eg one task per module on mobile).

Change 568966 had a related patch set uploaded (by Kosta Harlan; owner: Kosta Harlan):
[mediawiki/extensions/GrowthExperiments@master] (wip) Homepage desktop and mobile style updates

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

Change 570877 abandoned by Kosta Harlan:
(wip) Homepage desktop and mobile style updates

Reason:
Combined both patches into one

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

kostajh moved this task from In Progress to Code Review on the Growth-Team (Current Sprint) board.Feb 19 2020, 1:58 PM

Change 568966 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Homepage desktop and mobile style updates

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

ReleaseTaggerBot added a project: MW-1.35-notes (1.35.0-wmf.21; 2020-02-25).Feb 22 2020, 12:00 AM

kostajh mentioned this in T245970: Mobile Homepage: Remove extra left and right padding on the start module.Feb 24 2020, 7:39 AM

kostajh mentioned this in T245971: Homepage mobile: Align edit count in start module account submodule.

I created T245971 and T245970 as follow up tasks; the rest should be ready for QA / design review.

Moving to Design review - for the general review; the issues listed below may be also triaged during Design review as bugs that required some immediate fixes (or for a lower priority).

@kostajh I noticed two things that might need adjustments

(1) The check marks and bullet points are placed too far from the text

Screen Shot 2020-02-24 at 8.15.55 PM.png (641×378 px, 54 KB)

(2)

The text in the mentorship module - "View your mentor's other conversations" (when there are no recent questions) is placed on the border between white and grey background:

Screen Shot 2020-02-24 at 8.21.25 PM.png (660×366 px, 40 KB)

When there are recent questions, the grey background has uneven border

Screen Shot 2020-02-24 at 8.23.27 PM.png (650×369 px, 52 KB)

Some comparison with the mockup:

"Your mentor" does not have the text "You have been assigned an experienced editor..."

Homepage layout pre-SE-initiation

mockup	implementation

Homepage layout after SE initiation

mockup	implementation

RHo mentioned this in T246340: Mobile homepage: Start preview style issues.Feb 27 2020, 1:46 PM

RHo mentioned this in T246341: Mobile homepage: Mentor preview background color should be `#F8F9FA` (Base90).Feb 27 2020, 1:50 PM

Similar to the equivalent Desktop T232546 there are some minor fixes/outstanding items can be done after this week's train.

I have created tickets for each section:

T246340: Mobile homepage: Start preview style issues - incorporates @Etonkovidova's first point about start preview text display
T246341: Mobile homepage: Mentor preview background color should be `#F8F9FA` (Base90)
T246342: Mobile homepage: Mentor module style fixes - incorporates @Etonkovidova's second points related to the mentor module

MMiller_WMF added a subtask: T245971: Homepage mobile: Align edit count in start module account submodule.Feb 27 2020, 10:29 PM

MMiller_WMF added a subtask: T245970: Mobile Homepage: Remove extra left and right padding on the start module.

MMiller_WMF added a subtask: T246340: Mobile homepage: Start preview style issues.

@RHo -- thanks for creating additional tasks. What about the one where Elena said:

In T239442#5914509, @Etonkovidova wrote:

Some comparison with the mockup:

"Your mentor" does not have the text "You have been assigned an experienced editor..."

Homepage layout pre-SE-initiation

mockup implementation

In T239442#5924982, @MMiller_WMF wrote:

@RHo -- thanks for creating additional tasks. What about the one where Elena said:

In T239442#5914509, @Etonkovidova wrote:

Some comparison with the mockup:

"Your mentor" does not have the text "You have been assigned an experienced editor..."

Homepage layout pre-SE-initiation

mockup implementation

Ah yes, I addressed this on the Desktop task at the end of the comment T232546#5919510 but forgot to mention here.

In T232546#5919510, @RHo wrote:

In T232546#5914325, @Etonkovidova wrote:

...
(2) (minor) I noticed that the mockup has the following phrasing (collapsible) in the Mentorship module - "You've been assigned an experienced editor...". The Mentorship module currently won't have it.
Although, the default text provides enough explanation "This experienced user knows you're new and can help you with editing.", a mentor's customized message may not be that clear.
Are we still planning to implement the collapsible Mentorship explanation?

– The task to implement this is T229802 and ready for dev. Maybe @MMiller_WMF can take a look and see if it's a small but high prio enough to work as part of the guidance release?

Got it, thanks. Then this task is resolved.

MMiller_WMF closed subtask T245971: Homepage mobile: Align edit count in start module account submodule as Declined.Jan 26 2021, 2:27 AM

Maintenance_bot removed a project: Patch-For-Review.Jan 26 2021, 3:10 AM

RHo closed subtask T246340: Mobile homepage: Start preview style issues as Declined.Feb 18 2021, 6:40 PM

kostajh closed subtask T245970: Mobile Homepage: Remove extra left and right padding on the start module as Invalid.Aug 18 2021, 7:46 AM

	F31630075: Screen Shot 2020-02-24 at 8.15.55 PM.png
	Feb 25 2020, 5:00 AM

	F31630073: Screen Shot 2020-02-24 at 8.19.37 PM.png
	Feb 25 2020, 5:00 AM

	F31630052: Screen Shot 2020-02-24 at 8.21.25 PM.png
	Feb 25 2020, 4:44 AM

	F31630062: Screen Shot 2020-02-24 at 8.23.27 PM.png
	Feb 25 2020, 4:44 AM

	F31630050: Screen Shot 2020-02-24 at 8.15.55 PM.png
	Feb 25 2020, 4:44 AM

	F31133824: en.wikipedia.beta.wmflabs.org_w_index.php_title=Special_Homepage&source=personaltoolslink&namespace=0.png
	Feb 11 2020, 10:32 AM

	F31608250: image.png
	Feb 11 2020, 1:12 PM

	F31553842: image.png
	Feb 7 2020, 1:07 PM

Homepage: restyling of modules and preview cards on MobileClosed, ResolvedPublicActions