For the variant tests in {T246533}, 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:
{icon check-square color=green} 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)
{icon check-square color=green} B. Increase space between `suggested-edits-pager` (number of total suggestions) and the card from 5px to 16px;
{icon check-square color=green} C. Move difficulty indicator 'ribbon' below the task heading (as per guidance panel)
{icon check-square color=green} D. Show the estimated time required next to the indicator ribbon (as per the guidance panel)
{icon exclamation-triangle color=red} 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).
{icon exclamation-triangle color=red} F. Increase size of the left and right arrows by 50% (OOUI icons should be 150% of standard icon size, i.e., 30x30px)
{icon exclamation-triangle color=red} 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)
{icon exclamation-triangle color=green} H. Article card style updates
-- `.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 [[ https://zpl.io/brZjNE3 | here ]]
Note: T238598 will be revisited with updated proposal for a new wide card format.