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.