Page MenuHomePhabricator

Homepage: restyling of modules on Desktop
Open, Needs TriagePublic

Description

NOTE: Only the leftover parts of this task are shown, the rest has been removed from the description. See comment T232546#6831647.

In mockups for the newcomer tasks project, we started exploring some changes to the styling of homepage modules. That is shown in this mockup and in the image below.

Before SE added
After SE added:

This task details the styling changes for Desktop, 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 Desktop newcomer homepage should update it to look like this:

1. Homepage layout updates
.growthexperiments-homepage-module-footer {
  margin-top:16px;   /*change from 1.4em */
}
> **3. Mentor module

3.1 - The mentor module should not have the border when it is on the RHS column**

Expected:
Actual:

3.2 Minor styling tweaks
a. the bullet " • " separating the mentor edit count and last active date should be the same color and font-size as the two pieces of text.
b. There should be an extra ~4px gap between the mentor icon and the edit count/last active text block
c. There should be an extra ~8px gap between the mentor edit count/last active text block
d. There should be an extra ~4px gap between the grey vertical bar and the mentor message.

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptSep 10 2019, 10:40 PM

@RHo -- this is the placeholder task for restyling work that surfaced in the newcomer tasks mockups. I don't consider this a higher priority than our newcomer tasks work, but designs can go on this task for development in the future.

This comment was removed by MMiller_WMF.

@RHo -- it looks like part of the homepage restyling will be removing the icons from the headers of each module. Therefore, I think that your design to add the large question mark graphic to the desktop help module should coincide and be included in this task. Mockup here.

RHo removed RHo as the assignee of this task.Nov 22 2019, 10:20 PM
RHo updated the task description. (Show Details)
RHo edited projects, added Growth-Team (Current Sprint); removed Growth-Team.

hi @MMiller_WMF - I've specified the bulk of the pure css style changes for Desktop here, ready for prioritization.

RHo renamed this task from Homepage: restyling of modules to Homepage: restyling of modules on Desktop.Nov 22 2019, 10:29 PM
RHo added a project: Desktop.
RHo updated the task description. (Show Details)Nov 22 2019, 10:48 PM

This format is great @RHo , but there are two copies of everything, one with good formatting and one with bad formatting. It looks like you pasted the entire thing (1-6) in the middle of itself between 3 and 4.

RHo added a comment.Nov 25 2019, 7:02 PM

This format is great @RHo , but there are two copies of everything, one with good formatting and one with bad formatting. It looks like you pasted the entire thing (1-6) in the middle of itself between 3 and 4.

Oh derp. Thanks, let me take out the cruft.

RHo updated the task description. (Show Details)Nov 25 2019, 7:09 PM

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

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

@RHo the patch is not ready for review because I'm going to submit the mobile fixes one on top, but you can look at the styles as I've adapted them from what you posted in this task: https://gerrit.wikimedia.org/r/c/mediawiki/extensions/GrowthExperiments/+/568966

There are some TODO items in the patch about possibly using wmui or mediawiki.ui variables, is there anything we could use there? Otherwise we can leave it as is and I can remove the TODO comments.

@RHo, I've also updated specifications from pixels to em where I thought it made sense, per Volker's comment here on a previous patch.

This patch could be reviewed but it breaks some things on mobile (which are then fixed in the mobile CSS task/patch), so it could wait until that one is ready too.

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

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

Moved to Design review - looks according to specs with some notes on suggested-edits-footer margin - see below. The Impact module will be addressed in T223221.

(1) the specs call for

.suggested-edits-footer {
  margin: 0 -16px -16px!important; /* changed from margin: 0 -1.11111111em -1.11111111em */
}

What I see in betalabs (although visually it does not look too much different to me).

.growthexperiments-homepage-module-suggested-edits .suggested-edits-footer {

    margin: 16px -13.33333333px -13.33333333px -13.33333333px;
        margin-top: 16px;
        margin-right: -13.3333px;
        margin-bottom: -13.3333px;
        margin-left: -13.3333px;
    padding: 12px 24px 16px;
    background-color: 

#ffffff;

color:

    #54595d;
    font-size: 0.9em;

}

The screenshots are taken with uselang=en option

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

Some screenshots

  • in the intro module - one active sub-module; SE is not activated

  • one edit made (the Impact module shows pending pageviews counter);
  • the intro module has two finished sub-modules; SE is activated

Some screenshots

  • in the intro module - one active sub-module; SE is not activated

  • one edit made (the Impact module shows pending pageviews counter);
  • the intro module has two finished sub-modules; SE is activated

@Etonkovidova -- in the last two comments you posted, you included several screenshots. Are those screenshots showing things that are wrong? Or things that are right?

RHo added a comment.EditedFeb 26 2020, 12:44 PM

(1) the specs call for

.suggested-edits-footer {
  margin: 0 -16px -16px!important; /* changed from margin: 0 -1.11111111em -1.11111111em */
}

What I see in betalabs (although visually it does not look too much different to me).

.growthexperiments-homepage-module-suggested-edits .suggested-edits-footer {
    margin: 16px -13.33333333px -13.33333333px -13.33333333px;
        margin-top: 16px;
        margin-right: -13.3333px;
        margin-bottom: -13.3333px;
        margin-left: -13.3333px;
    padding: 12px 24px 16px;
    background-color: #ffffff;
color: #54595d;
    font-size: 0.9em;
}

The screenshots are taken with uselang=en option

The different in margin is causing a slight gap between the left, right, and bottom of the white suggested-edits-footer container with the corresponding edges of the suggested edits module. This is more noticeable when I change the module background color to red:

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

RHo added a comment.EditedFeb 26 2020, 1:38 PM

Thanks @Etonkovidova for the screenshots and also checking the CSS, I agree this is very close. The following 2 minor fixes/outstanding items can be done after this week's train.

1. Suggested-edits-footer

(1) the specs call for

.suggested-edits-footer {
  margin: 0 -16px -16px!important; /* changed from margin: 0 -1.11111111em -1.11111111em */
}

What I see in betalabs (although visually it does not look too much different to me).

.growthexperiments-homepage-module-suggested-edits .suggested-edits-footer {
    margin: 16px -13.33333333px -13.33333333px -13.33333333px;
        margin-top: 16px;
        margin-right: -13.3333px;
        margin-bottom: -13.3333px;
        margin-left: -13.3333px;
    padding: 12px 24px 16px;
    background-color: #ffffff;
color: #54595d;
    font-size: 0.9em;
}

The screenshots are taken with uselang=en option

The difference in expected vs actual margin is causing a slight gap between the left, right, and bottom of the white suggested-edits-footer container with the corresponding edges of the suggested edits module. This is more noticeable when I change the module background color to red:

2. Mentor module after SE added should no longer have the border when it is on the RHS column

Expected:
Actual:

**3. Mentor module - minor style tweaks
a. the bullet " • " separating the mentor edit count and last active date should be the same color and font-size as the two pieces of text.
b. There should be an extra ~4px gap between the mentor icon and the edit count/last active text block
c. There should be an extra ~8px gap between the mentor edit count/last active text block
d. There should be an extra ~4px gap between the grey vertical bar and the mentor message.

@Etonkovidova -- in the last two comments you posted, you included several screenshots. Are those screenshots showing things that are wrong? Or things that are right?

Yes, those screenshots are for illustration only (and overall review) - and, as per our conversation, I'll annotate clearer explanation what screenshots are showing.

kostajh removed kostajh as the assignee of this task.Mar 5 2020, 12:35 PM

@RHo -- have we done any parts of this task already? If so, we should slim the task description down to just the parts that remain.

RHo added a comment.EditedMon, Feb 15, 9:20 PM

@RHo -- have we done any parts of this task already? If so, we should slim the task description down to just the parts that remain.

Apologies I had the following comment sitting in draft unposted since Oct 6, 2020. Per my comments below, it looks like the only remaining items is some styling in (1) Homepage layout (footer), and (3) Mentor module.

Thanks @Etonkovidova for the screenshots and also checking the CSS, I agree this is very close. The following 2 minor fixes/outstanding items can be done after this week's train.

1. Suggested-edits-footer

(1) the specs call for

.suggested-edits-footer {
  margin: 0 -16px -16px!important; /* changed from margin: 0 -1.11111111em -1.11111111em */
}

What I see in betalabs (although visually it does not look too much different to me).

.growthexperiments-homepage-module-suggested-edits .suggested-edits-footer {
    margin: 16px -13.33333333px -13.33333333px -13.33333333px;
        margin-top: 16px;
        margin-right: -13.3333px;
        margin-bottom: -13.3333px;
        margin-left: -13.3333px;
    padding: 12px 24px 16px;
    background-color: #ffffff;
color: #54595d;
    font-size: 0.9em;
}

The screenshots are taken with uselang=en option

The difference in expected vs actual margin is causing a slight gap between the left, right, and bottom of the white suggested-edits-footer container with the corresponding edges of the suggested edits module. This is more noticeable when I change the module background color to red:

2. Mentor module after SE added should no longer have the border when it is on the RHS column

Expected:
Actual:

**3. Mentor module - minor style tweaks
a. the bullet " • " separating the mentor edit count and last active date should be the same color and font-size as the two pieces of text.
b. There should be an extra ~4px gap between the mentor icon and the edit count/last active text block
c. There should be an extra ~8px gap between the mentor edit count/last active text block
d. There should be an extra ~4px gap between the grey vertical bar and the mentor message.

RHo updated the task description. (Show Details)Mon, Feb 15, 9:35 PM