- Suggested edit
- This button should contain a lightbulb icon with the text "Suggested edit" next to it.
- Below that, the header should say the task type, e.g. "Copy edit" or "Find references".
- Below that should say "Quick start tips".
- It should contain the suggested edit graphic (pencil/ruler/lightbulb).
- This button should lead to the "suggested edit screen" (see T244541: Newcomer tasks: suggested edit screen in guidance).
Description
Details
Status | Subtype | Assigned | Task | ||
---|---|---|---|---|---|
Resolved | • Rileych | T239181 [EPIC] Growth: Newcomer tasks 1.2 (guidance) | |||
Resolved | kostajh | T244431 Newcomer tasks: guidance panel behavior | |||
Resolved | kostajh | T244546 Newcomer tasks: guidance root screen | |||
Resolved | kostajh | T248001 Newcomer tasks: add suggested edit button |
Event Timeline
Change 581615 had a related patch set uploaded (by Kosta Harlan; owner: Kosta Harlan):
[mediawiki/extensions/GrowthExperiments@master] (wip) Add suggested edit button to help panel
Change 581615 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Help panel: Add suggested edit button
I've checked the specs and marked those that have been implemented. The un-marked specs belong to T244541: Newcomer tasks: suggested edit screen in guidance, i.e. the following definitely refer to "suggested edit screen in guidance", since the mockups show 'X' and no 'Back' buttons for both -the desktop and the mobile:
On mobile, in place of an "X" in the upper left, this screen should have a back arrow that leads back to the root screen via a swipe animation. There should be no "Back" or "Cancel" button.
On desktop, it should have the "X" in the upper left and the "Back" button in the lower left.
– Thanks @Etonkovidova , I've removed them from the task description here and indented them in the root screen task T244546 to make that clearer.
Thanks, it looks like these are both from the Desktop site, is that right?
Some design tweaks specific to the Suggested edits button from the root screen:
1. Suggested edit tile/button
1a. Task type header font-size is expected to be on Desktop 16px and Mobile 18.2px (using the OOUI fieldset header text style). Actual on Desktop is ~18.298px, Mobile ~20.912px.
1b. Description text font-size is expected to be on Desktop 12.4px and Mobile 13px (using the Wikipiedia text style for thumbcaption). Actual on Desktop is ~12.992px, Mobile ~14.848px.
1c. There should be 16px padding between the text and the SE illustration (64px wide).
This may be achieved by setting the text width to be width:calc(100% - 80px);
1d. SE illustration should be absolutely positioned relative to the bottom right corner of the SE tile/button. Specifically:
.SE-button { position:relative;} and .SE-illustration { position:absolute; bottom:16px; right:16px; }
Expected:
1e. There should be a border: solid 1px #3366cc; (Accent50).
1f. The background-color of the SE button should be background-color: rgba(234, 243, 255, 0.5); (Accent90 @50% opacity).
1g. “Suggested edit” title font-size is expected to be on Desktop 14px and Mobile 16px (using the OOUI UI text style). Actual on Desktop is 16px, Mobile 18.288px.
1h. Lightbulb icon and “Suggested edit” text should be vertically center-aligned
1i. Space between text and lightbult icon is 8px, not 10px.
(change .mw-ge-help-panel-home-button-preheader-text class from padding-left:10px to padding-left:8px
Change 584558 had a related patch set uploaded (by Kosta Harlan; owner: Kosta Harlan):
[mediawiki/extensions/GrowthExperiments@master] Help panel: Design fixes for suggested edits button
Mobile dimensions are slightly different, but that's already being discussed in T244546#6009478.
1c. There should be 16px padding between the text and the SE illustration (64px wide).
This may be achieved by setting the text width to be width:calc(100% - 80px);
Being discussed in T244546#6009445.
The others are covered by the patch.
Change 584558 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Help panel: Design fixes for suggested edits button
1a & 1b can be reviewed on T244546#6009478.
1c. There should be 16px padding between the text and the SE illustration (64px wide). This may be achieved by setting the text width to be width:calc(100% - 80px);
1c can also be reviewed on T244546#6009445. But note the text is still butting up to the icon:
1d. SE illustration should be absolutely positioned relative to the bottom right corner of the SE tile/button. Specifically:
.SE-button { position:relative;} and .SE-illustration { position:absolute; bottom:16px; right:16px; }Expected:
1e. There should be a border: solid 1px #3366cc; (Accent50).
1f. The background-color of the SE button should be background-color: rgba(234, 243, 255, 0.5); (Accent90 @50% opacity).
1g. “Suggested edit” title font-size is expected to be on Desktop 14px and Mobile 16px (using the OOUI UI text style). Actual on Desktop is 16px, Mobile 18.288px.
1h. Lightbulb icon and “Suggested edit” text should be vertically center-aligned
The text is still not vertically centered with the icon on Desktop
I think this may be due to the line-height being >1 on .mw-ge-help-panel-home-button-preheader-text
Relatedly, I have left a comment that .mw-ge-help-panel-home-button-preheader also should have padding-bottom reduced to 8px on the patch.
1i. Space between text and lightbulb icon is 8px, not 10px.
(change .mw-ge-help-panel-home-button-preheader-text class from padding-left:10px to padding-left:8px
Re-checking - now the root screen matches this mockup
The 'Suggested edit' button now looks according to the mockup:
@RHo - are there the items 1d, 1g, and 1h are not done yet?
For 1g - it seems that the specs are in place (1g is not marked as done in your comment).
1g. “Suggested edit” title font-size is expected to be on Desktop 14px and Mobile 16px (using the OOUI UI text style). Actual on Desktop is 16px, Mobile 18.288px.
Apologies @Etonkovidova - yes I forgot to mark 1d and 1g as done. 1h is still left, but per our conversation earlier, we can use the original task T244546 to track 1a, 1b, 1c, and 1h, so I will move this to PM Review now for only the functional items (addition of the SE button).