Page MenuHomePhabricator

Variant C/D: homepage Suggested edits module changes - Desktop
Closed, ResolvedPublic

Assigned To
Authored By
RHo
Jul 23 2020, 12:58 PM
Referenced Files
F32379930: Screen Shot 2020-10-09 at 5.03.24 PM.png
Oct 10 2020, 12:06 AM
F32375434: image.png
Oct 6 2020, 10:25 AM
F32371115: image.png
Oct 2 2020, 2:10 PM
F32370608: Screen Shot 2020-10-01 at 5.51.16 PM.png
Oct 2 2020, 1:49 AM
F32367874: image.png
Sep 29 2020, 4:11 PM
F32363472: image.png
Sep 25 2020, 2:12 PM
F32362710: Screen Shot 2020-09-24 at 5.02.19 PM.png
Sep 25 2020, 12:42 AM
F32362712: Screen Shot 2020-09-24 at 5.07.03 PM.png
Sep 25 2020, 12:42 AM

Description

For the variant tests in T246533: Variant tests: "initiation part 2" test (C vs. D), there are changes to the Suggested edits module on desktop that variant C and D have in common. Changes that apply to mobile are on task T262032

These are as follows:
A. Add an "i" info icon on the top RHS of the module (vertically centered with the module header) which on click re-opens the onboarding overlay (see T258020)
B. Increase space between suggested-edits-pager (number of total suggestions) and the card from 5px to 16px;
C. Move difficulty indicator 'ribbon' below the task heading (as per guidance panel)
D. Show the estimated time required next to the indicator ribbon (as per the guidance panel)
E. Suggested edits footer should fill flush to the bottom of the module, achieved by making the suggested-edit-footer margin: 0px -16px -16px; (this is part of task T232546#5919621).
F. Increase size of the left and right arrows by 50% (OOUI icons should be 150% of standard icon size, i.e., 30x30px)
G. Remove the border (or change the border color to transparent) when the module is initiated. The not-yet-initiated module does keep the existing @colorGray12 border color (note that the module can only be uninitiated in variant D, because it's initiated from the start in variant C)
H. Article card style updates – outstanding/unresolved parts have been documented in the leftovers task T264636

  • .suggested-edits-card-wrapper
    • Change height from 18em to height: 288px (or 20.5em)
  • .suggested-edits-task-card-wrapper
    • Change width from 260px to width: 368px;
    • Add padding:8px;
    • Add border-radius:2px;
  • .se-card-image
    • Change width from 260px to width: 368px;
    • Change height from 9em to height: 160px; (or 11.5em)
  • .se-card-text
    • Change padding to padding:0 8px; (reducing the left and right padding slightly)
    • Change height from 9em to height: 8em;
  • .se-card-extract
    • Change height from 4.5em to height:3em; (this will remove one line of text)
  • .se-card-pageviews
    • change padding-top from 10px to padding-top: 16px
  • Reduce the size of the pageviews chart icon and update the spacing by amending the following:
.growthexperiments-homepage-module-suggested-edits .suggested-edits-module-wrapper .suggested-edits-card-wrapper .suggested-edits-task-card-wrapper .se-card-content .se-card-text .se-card-pageviews .oo-ui-iconWidget {
     margin-right: 8px; /*changed from 5px */
     opacity: 0.65;
     width: 16px; /* added to reduce icon size */
     min-width: 16px; /* added to reduce icon size */
     height: 16px;  /* added to reduce icon size */
     min-height: 16px;  /* added to reduce icon size */
     margin-bottom: 4px; /*added to fix vertical alignment with page views text */
   }

Mock in Zeplin here

Note: T238598 will be revisited with updated proposal for a new wide card format.

Related Objects

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

Change 624674 had a related patch set uploaded (by Kosta Harlan; owner: Kosta Harlan):
[mediawiki/extensions/GrowthExperiments@master] (WIP) Suggested Edits: Adjust task card for desktop

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

Change 624041 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Suggested Edits: Increase space between pager and card

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

Change 624048 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Suggested Edits: Reusable time and difficulty info function

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

Change 624054 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Suggested Edits: Extend footer to bottom of module

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

Change 624262 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Suggested Edits: Increase size of previous/next arrows

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

Change 624265 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Suggested Edits: Transparent border on activated module

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

Change 624652 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Suggested Edits: Increase card height on desktop

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

Change 624674 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Suggested Edits: Adjust task card for desktop

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

Change 627921 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@master] Homepage: Revert wider task card on desktop for now

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

Change 627921 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Homepage: Revert wider task card on desktop for now

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

Change 627804 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@wmf/1.36.0-wmf.9] Homepage: Revert wider task card on desktop for now

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

Change 627804 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@wmf/1.36.0-wmf.9] Homepage: Revert wider task card on desktop for now

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

Mentioned in SAL (#wikimedia-operations) [2020-09-16T23:37:39Z] <catrope@deploy1001> Synchronized php-1.36.0-wmf.9/extensions/GrowthExperiments/: Fix styling for mobile start module (T258008); Revert wider task card on desktop (T263042, T258704); Fix width of sidebar modules in narrow mode in variant A (T263068) (duration: 01m 09s)

As I was working on T263068 I looked back at T258005, and I'd like to propose a slight modification of the layout rules.

What we currently have for variants C/D (screenshots are on testwiki / wmf.10):

Narrow (single column)

image.png (820×618 px, 77 KB)

Medium (two column)

image.png (944×698 px, 135 KB)

Wide (three column)

image.png (846×1 px, 157 KB)

With my patch, this changes to:

Narrow (single column) (n.b. I changed the breakpoint for "narrow" from 800px -> 1024px)

image.png (903×813 px, 85 KB)

Medium (two column)

image.png (869×929 px, 117 KB)

Wide (three column)

image.png (977×1 px, 187 KB)

The CSS changes are pretty minor:

  • change narrow breakpoint from 800px -> 1024px
  • enforce a minimum width for the "main" group content (600px for Variant C/D, 1200px for Variant A because that variant was never really responsive, or at least it isn't currently)

There is a patch demo instance at https://patchdemo.wmflabs.org/wikis/bad48a7359efa45ac3fbb32e00cddbcf/w/, once you've logged in, you can do:

new mw.Api().saveOptions( {
"growthexperiments-homepage-suggestededits-activated": 1,
"growthexperiments-homepage-variant": "C"
} ).done( () => location.reload() )

in your browser console to test the responsive layout as a variant C or D user.

In code review, and would like for @RHo to weigh in on the proposed changes before it's merged.

Somehow I forgot to tag this task in the patch. Anyway, up for QA and/or Design Review now.

First, providing screenshots for A-E items that I think that are done.

A. Add an "i" info icon on the top RHS of the module (vertically centered with the module header) which on click re-opens the onboarding overlay.

Screen Shot 2020-09-24 at 2.22.27 PM.png (375×611 px, 57 KB)
Screen Shot 2020-09-24 at 3.46.07 PM.png (862×1 px, 137 KB)

B. Increase space between suggested-edits-pager (number of total suggestions) and the card from 5px to 16px;

Screen Shot 2020-09-24 at 2.24.09 PM.png (617×1 px, 250 KB)

C. Move difficulty indicator 'ribbon' below the task heading (as per guidance panel)
D. Show the estimated time required next to the indicator ribbon (as per the guidance panel)

Screen Shot 2020-09-24 at 3.48.56 PM.png (527×593 px, 50 KB)

E. Suggested edits footer should fill flush to the bottom of the module, achieved by making the suggested-edit-footer margin: 0px -16px -16px;

Screen Shot 2020-09-24 at 2.25.43 PM.png (408×707 px, 67 KB)

Notes on F and G with - need additional checking.

F. Increase size of the left and right arrows by 50% (OOUI icons should be 150% of standard icon size, i.e., 30x30px)

The arrows are not square-dimensional as in the mockup:

betalabs 30x4030x30 looks different
Screen Shot 2020-09-24 at 3.29.35 PM.png (283×370 px, 36 KB)
Screen Shot 2020-09-24 at 3.31.05 PM.png (310×849 px, 65 KB)

G. Remove the border (or change the border color to transparent) when the module is initiated.

As far as I could see - the border is still in place.

betalabsmockup
Screen Shot 2020-09-24 at 3.58.08 PM.png (839×1 px, 139 KB)
Screen Shot 2020-09-24 at 4.00.02 PM.png (496×963 px, 235 KB)

H. Article card style updates

(1)

.suggested-edits-card-wrapper

Change height from 18em to height: 288px (or 20.5em)

Screen Shot 2020-09-24 at 5.02.19 PM.png (721×633 px, 74 KB)

(2)

.suggested-edits-task-card-wrapper

 Change width from 260px to width: 368px;
 Add padding:8px;
Add border-radius:2px;

Screen Shot 2020-09-24 at 5.07.03 PM.png (588×597 px, 57 KB)

Both elements seem to be bigger than in the specs?
Other specs are in place

.growthexperiments-homepage-module-suggested-edits .suggested-edits-module-wrapper .suggested-edits-card-wrapper .suggested-edits-task-card-wrapper {
    -webkit-box-shadow: 0 5px 10px 0 rgba(0,0,0,0.15);
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.15);
    background-color: #ffffff;
    width: 368px;
    padding: 8px;
    border-radius: 2px;

Note: It seems that the ratio between .suggested-edits-card-wrapper and .suggested-edits-task-card-wrapper is different in the mockup - the card on betalabs looks stretched out more than in the mockup (and in the patchdemo too).
(3) Done.

.se-card-image

Change width from 260px to width: 368px;
Change height from 9em to height: 160px; (or 11.5em)
.growthexperiments-homepage-module-suggested-edits .suggested-edits-module-wrapper .suggested-edits-card-wrapper .suggested-edits-task-card-wrapper .se-card-content .se-card-image {
    height: 160px;
    width: 368px;
    background-position: center 25%;
    background-repeat: repeat-x;

Screen Shot 2020-09-24 at 5.16.38 PM.png (707×608 px, 146 KB)

(4) Done.

.se-card-text

Change padding to padding:0 8px; (reducing the left and right padding slightly)
Change height from 9em to height: 8em;
.growthexperiments-homepage-module-suggested-edits .suggested-edits-module-wrapper .suggested-edits-card-wrapper .suggested-edits-task-card-wrapper .se-card-content .se-card-text {
    height: 8em;
    padding: 0 8px;
    color: #202122;

Just a general screenshot on how the entire card looks to illustrate .se-card-extract and .se-card-text elements.

Screen Shot 2020-09-24 at 5.23.14 PM.png (630×617 px, 146 KB)

(5) Done.

.se-card-extract

Change height from 4.5em to height:3em; (this will remove one line of text)
.growthexperiments-homepage-module-suggested-edits .suggested-edits-module-wrapper .suggested-edits-card-wrapper .suggested-edits-task-card-wrapper .se-card-content .se-card-text .se-card-extract {
    position: relative;
    overflow: hidden;
    font-size: 0.875em;
    line-height: 1.5em;
    height: 3em;

(6) Done.

.se-card-pageviews

change padding-top from 10px to padding-top: 16px
.growthexperiments-homepage-module-suggested-edits .suggested-edits-module-wrapper .suggested-edits-card-wrapper .suggested-edits-task-card-wrapper .se-card-content .se-card-text .se-card-pageviews {
    font-size: 0.875em;
    padding-top: 16px;
    color: #54595d;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

(7) Done.

Reduce the size of the pageviews chart icon and update the spacing by amending the following:

.growthexperiments-homepage-module-suggested-edits .suggested-edits-module-wrapper .suggested-edits-card-wrapper .suggested-edits-task-card-wrapper .se-card-content .se-card-text .se-card-pageviews .oo-ui-iconWidget {

  margin-right: 8px; /*changed from 5px */
 opacity: 0.65;
  width: 16px; /* added to reduce icon size */
  min-width: 16px; /* added to reduce icon size */
  height: 16px;  /* added to reduce icon size */
  min-height: 16px;  /* added to reduce icon size */
  margin-bottom: 4px; /*added to fix vertical alignment with page views text */
}

It's in place.

.growthexperiments-homepage-module-suggested-edits .suggested-edits-module-wrapper .suggested-edits-card-wrapper .suggested-edits-task-card-wrapper .se-card-content .se-card-text .se-card-pageviews .oo-ui-iconWidget {
    opacity: 0.65;
    margin-right: 8px;
    width: 16px;
    min-width: 16px;
    height: 16px;
    min-height: 16px;
    margin-bottom: 4px;
}

Screen Shot 2020-09-24 at 5.35.44 PM.png (294×528 px, 115 KB)

Hi @kostajh - sorry this took me longer to get to, but I think we should keep the two-col layout for a 1024px breakpoint, though I can see where I may have miscalculated the min-width due to forgetting about the desktop side nav. Can we split the difference and make the change to the following:

  • change narrow breakpoint from 800px -> 992px
  • enforce a minimum width for the "main" group content to 520px for Variant C/D

image.png (1×2 px, 513 KB)

As I was working on T263068 I looked back at T258005, and I'd like to propose a slight modification of the layout rules.
[..]
With my patch, this changes to:

Narrow (single column) (n.b. I changed the breakpoint for "narrow" from 800px -> 1024px)

image.png (903×813 px, 85 KB)

Medium (two column)

image.png (869×929 px, 117 KB)

Wide (three column)

image.png (977×1 px, 187 KB)

The CSS changes are pretty minor:

  • change narrow breakpoint from 800px -> 1024px
  • enforce a minimum width for the "main" group content (600px for Variant C/D, 1200px for Variant A because that variant was never really responsive, or at least it isn't currently)

    There is a patch demo instance at https://patchdemo.wmflabs.org/wikis/bad48a7359efa45ac3fbb32e00cddbcf/w/, once you've logged in, you can do:

    `lang=js new mw.Api().saveOptions( { "growthexperiments-homepage-suggestededits-activated": 1, "growthexperiments-homepage-variant": "C" } ).done( () => location.reload() ) `

    in your browser console to test the responsive layout as a variant C or D user.

Change 630569 had a related patch set uploaded (by Kosta Harlan; owner: Kosta Harlan):
[mediawiki/extensions/GrowthExperiments@master] Homepage: Adjust responsive layout

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

Hi @kostajh - sorry this took me longer to get to, but I think we should keep the two-col layout for a 1024px breakpoint, though I can see where I may have miscalculated the min-width due to forgetting about the desktop side nav. Can we split the difference and make the change to the following:

  • change narrow breakpoint from 800px -> 992px
  • enforce a minimum width for the "main" group content to 520px for Variant C/D

OK, done in this patch. Thanks!

Hi @kostajh - @MMiller_WMF brought up a good point as he reviewed T258005, which is that the standard and wide breakpoints seem a bit too narrow. Seeing as we have made the adjustment to increase the narrow breakpoint here, can we also increase the interval for which the screen remains Standard as well? Ie., changing the wide layout to come into place from 1280px -> 1680px?

Hi @kostajh - sorry this took me longer to get to, but I think we should keep the two-col layout for a 1024px breakpoint, though I can see where I may have miscalculated the min-width due to forgetting about the desktop side nav. Can we split the difference and make the change to the following:

  • change narrow breakpoint from 800px -> 992px
  • enforce a minimum width for the "main" group content to 520px for Variant C/D

OK, done in this patch. Thanks!

Hi @kostajh - @MMiller_WMF brought up a good point as he reviewed T258005, which is that the standard and wide breakpoints seem a bit too narrow. Seeing as we have made the adjustment to increase the narrow breakpoint here, can we also increase the interval for which the screen remains Standard as well? Ie., changing the wide layout to come into place from 1280px -> 1680px?

That works, what should we change @homepageLayoutMaxWidth variable to? Currently it's at 1440px, and this applies a max width for variant C and D users.

Change 630569 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Homepage: Adjust responsive layout

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

Hi @kostajh - @MMiller_WMF brought up a good point as he reviewed T258005, which is that the standard and wide breakpoints seem a bit too narrow. Seeing as we have made the adjustment to increase the narrow breakpoint here, can we also increase the interval for which the screen remains Standard as well? Ie., changing the wide layout to come into place from 1280px -> 1680px?

That works, what should we change @homepageLayoutMaxWidth variable to? Currently it's at 1440px, and this applies a max width for variant C and D users.

Yes please!

Hi @kostajh and @MMiller_WMF - I just remembered the reason for the widths being originally set as they were, at least the max-width of 1440px. It's because of the new limiting content width updates on the Desktop improvements project [1] will be on at least some of our target wikis.
Given their max-width for the Page container (including sidebar and personal tools) is max-width:1650px and for the "Workspace container" is max-width:1440px, I propose we amend our breakpoint and max-width to as similar as possible.

That is the following changes:

  • @homepageLayoutWideBreakpoint: 1440px;
  • @homepageLayoutMaxWidth: 1650px;

[1] https://m.mediawiki.org/wiki/Reading/Web/Desktop_Improvements/Features/Limiting_content_width#/media/File%3ADiagram_showing_three_layout_containers_-_sidebar_closed.jpg

Hi @kostajh - @MMiller_WMF brought up a good point as he reviewed T258005, which is that the standard and wide breakpoints seem a bit too narrow. Seeing as we have made the adjustment to increase the narrow breakpoint here, can we also increase the interval for which the screen remains Standard as well? Ie., changing the wide layout to come into place from 1280px -> 1680px?

That works, what should we change @homepageLayoutMaxWidth variable to? Currently it's at 1440px, and this applies a max width for variant C and D users.

Yes please!

Change 630854 had a related patch set uploaded (by Kosta Harlan; owner: Kosta Harlan):
[mediawiki/extensions/GrowthExperiments@master] Homepage: Adjust max-width / wide breakpoint

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

Beta homepage looks like this to me:

image.png (900×1 px, 205 KB)

Maybe https://gerrit.wikimedia.org/r/c/mediawiki/extensions/GrowthExperiments/+/630854 will fix it, but reporting here anyway.

Not fixed by that patch, but we are tracking this issue at T263905

Change 630854 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Homepage: Adjust max-width / wide breakpoint

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

As you can see, I switched to old vector - the logo is in its old form.
Afaik, the other task is about new vector only?

Tgr subscribed.

Everything done here, I think?

@Urbanecm -- @Tgr thinks that his fix improves it for both old and new vector. Can you check when it gets merged?

Yes, the narrow Help and Mentor module are fixed for old Vector too; was (T263905 - I am waiting for wmf.11 do double-check).

Moving to Design review for couple of things:

I re-checked F which is addressed in this patch.

Change 624262 had a related patch set uploaded (by Kosta Harlan; owner: Kosta Harlan):
[mediawiki/extensions/GrowthExperiments@master] Suggested Edits: Increase size of previous/next arrows

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

From my previous comment:

betalabs 30x40 with the patch30x30 looks different
Screen Shot 2020-09-24 at 3.29.35 PM.png (283×370 px, 36 KB)
Screen Shot 2020-09-24 at 3.31.05 PM.png (310×849 px, 65 KB)

Checked breaking points

change narrow breakpoint from 800px -> 992px
enforce a minimum width for the "main" group content to 520px for Variant C/D

@homepageLayoutWideBreakpoint: 1440px;
@homepageLayoutMaxWidth: 1650px;

All looks ok to me.

Note: a small issue for 'variant A on Chrome only`

  • the unnecessary horizontal scrolling on 992px screen which displays grey color on a side :

Screen Shot 2020-10-01 at 5.51.16 PM.png (708×843 px, 217 KB)

Thanks @Etonkovidova - item F is OK but you're right that G is not done. Details of more work needed below:

Moving to Design review for couple of things:

I re-checked F which is addressed in this patch.

Change 624262 had a related patch set uploaded (by Kosta Harlan; owner: Kosta Harlan):
[mediawiki/extensions/GrowthExperiments@master] Suggested Edits: Increase size of previous/next arrows
https://gerrit.wikimedia.org/r/624262

From my previous comment:

betalabs 30x40 with the patch30x30 looks different
Screen Shot 2020-09-24 at 3.29.35 PM.png (283×370 px, 36 KB)
Screen Shot 2020-09-24 at 3.31.05 PM.png (310×849 px, 65 KB)

Checked on CS Beta today and arrow size and placement looks good to me

image.png (568×1 px, 88 KB)

Yes, this is still not completed. Also, perhaps relatedly, the idea is that the Suggested edits and start module on desktop doesn't have the border, but the other modules do. Sorry if this was an oversight on my part but can we remove the border from SE and add to the help module? Thanks!


Checked breaking points

change narrow breakpoint from 800px -> 992px
enforce a minimum width for the "main" group content to 520px for Variant C/D

@homepageLayoutWideBreakpoint: 1440px;
@homepageLayoutMaxWidth: 1650px;

All looks ok to me.

Note: a small issue for 'variant A on Chrome only`

  • the unnecessary horizontal scrolling on 992px screen which displays grey color on a side :

Screen Shot 2020-10-01 at 5.51.16 PM.png (708×843 px, 217 KB)

Maybe this is OK considering @MMiller_WMF's filing of this task T264374: Variant C/D: convert legacy users to Variant D (and make it the default)

Additionally, I noticed that item E is not done since the white background for the text should be flush to the bottom and side edges of the SE module... though not sure if my suggested css is the right way to achieve this.

Change 631564 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@master] SuggestedEdits: Fix footer display

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

Change 631564 had a related patch set uploaded (by DannyS712; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@master] SuggestedEdits: Fix footer display

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

Change 631877 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@master] Suggested edits: Make transparent border when activated actually work

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

Change 631564 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] SuggestedEdits: Fix footer display

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

Change 631877 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Suggested edits: Make transparent border when activated actually work

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

Thanks @Etonkovidova - item F is OK but you're right that G is not done. Details of more work needed below:

Yes, this is still not completed. Also, perhaps relatedly, the idea is that the Suggested edits and start module on desktop doesn't have the border, but the other modules do. Sorry if this was an oversight on my part but can we remove the border from SE and add to the help module? Thanks!

I've updated the task description

  • marked F as Done
  • left G as not-Done - and moved the task into needs more work
  • left E not-Done. It should be addressed on a different ticket as per https://phabricator.wikimedia.org/T232546#5919621 (and there is a reference in the task description).

I'm confused about the ocmments for G and E.

left G as not-Done - and moved the task into needs more work

Did you check this on beta? The code for this was merged, and I just verified the transparent border is used upon module activation. Can you please provide more details about what is missing?

left E not-Done. It should be addressed on a different ticket as per https://phabricator.wikimedia.org/T232546#5919621 (and there is a reference in the task description).

The patch for the footer was also tagged with T258005: Variant C/D: homepage layout changes (see T258005#6512685)

@RHo do you want to have a look on beta to see if items E and G are considered done from your perspective?

Hi @Etonkovidova and @kostajh - I've just rechecked the Beta and the E and G are done in terms of the border removed from SE and footer made flush to the bottom of the SE module.
However, see my comment about the missing border around the help module:

image.png (922×2 px, 167 KB)

[..]

Yes, this is still not completed. Also, perhaps relatedly, the idea is that the Suggested edits and start module on desktop doesn't have the border, but the other modules do. Sorry if this was an oversight on my part but can we remove the border from SE and add to the help module? Thanks!

As for item H, I am moving further visual tweaks work on this to the leftovers task T264636

Change 632828 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@master] Help module: Add border back, make background white

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

Change 632828 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Help module: Add border back, make background white

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

Hi @Etonkovidova and @kostajh - I've just rechecked the Beta and the E and G are done in terms of the border removed from SE and footer made flush to the bottom of the SE module.

(I was wondering why Help module did not have a border).
Now - SE module does not have border; Help module (as Mentorship and Impact modules) has a border:

Screen Shot 2020-10-09 at 5.03.24 PM.png (608×1 px, 115 KB)

Thanks! Moving to PM review as the other items are covered in T264636

Hi @Etonkovidova and @kostajh - I've just rechecked the Beta and the E and G are done in terms of the border removed from SE and footer made flush to the bottom of the SE module.

(I was wondering why Help module did not have a border).
Now - SE module does not have border; Help module (as Mentorship and Impact modules) has a border:

Screen Shot 2020-10-09 at 5.03.24 PM.png (608×1 px, 115 KB)