Page MenuHomePhabricator

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

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
M. Homepage summary after SE initiation
M. Start module
M. Mentor module
M. Help module
M. Suggested edits module
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

Related Objects

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 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
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?

RHo added a comment.Jan 30 2020, 4:25 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?

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.

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

@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

RHo added a comment.Feb 7 2020, 11:01 PM

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?

RHo added a comment.Feb 11 2020, 1:12 PM

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

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

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

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

Etonkovidova added a subscriber: Etonkovidova.

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

(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:

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

Some comparison with the mockup:

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

Homepage layout pre-SE-initiation

mockupimplementation

Homepage layout after SE initiation

mockupimplementation
RHo moved this task from Design Review to Needs PM Review on the Growth-Team (Current Sprint) board.

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:

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

Some comparison with the mockup:

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

Homepage layout pre-SE-initiation

mockupimplementation
RHo added a comment.Feb 27 2020, 10:43 PM

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

Some comparison with the mockup:

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

Homepage layout pre-SE-initiation

mockupimplementation

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

...
(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?

MMiller_WMF closed this task as Resolved.Feb 27 2020, 10:45 PM

Got it, thanks. Then this task is resolved.