- The modal window for Page Issues does not give enough information, specially considering the upcoming work around exposing these issues on article as part of T159262
- The iconography should be accessible and indicative of type of the issue
- Repetitive link to the "How to fix" issues in case of multiple issues
Design changes proposed
- show the hidden information from DOM (.hide-when-compact)
- format the hidden information differently from non-hidden information
- move the icon to the left/right based on LTR/RTL
- Use ambox type for icon type
- change the modal title to "Page Issues"
6. style the date in tag
7. add permanent list item at the bottom that takes the user to Help:Maintenance_template_removal
most of these are css changes. a little change to html here
Multiple issues stack as list items
- Show .hide-when-compact
- make .hide-when-compact block element, reduce the font size
- make small > i block elements should have their own lines. this will put the date and "learn how to rmeove this message" anchor tag on different lines
- All remaining changes proposed above
- Create task to account for remaining changes (the ones currently struck through)
- Add to release timeline
Note on ambox type (for future iteration)
Design will provide icons for different types of issues
the classnames from original template has things like "mw-ui-icon-mf-cleanup-gray mw-ui-icon-before issue-notice"
Types and iconography
Ambox class => Icons
|if no class matches from above - default issue icon|
The icons are purpofuly kept very similar to desktop as editors are used to identifying type of issue with the icons.
here's a comparison
- do all "help remove page issues" link to the same help namespace? how does it work on different languages
- how does this work on large screens
- is date tag easily scrap-able. we should be careful about touching unstructured html. might break something somewhere we wont even know
- should we do this work before we structure page issues semantically
- need more examples of multiple issues, multiple types of issues together.
q. have we thought of issues with looong description
a: yes, this modal window is supposed to give more information about the issue. being a modal, it takes the user out from reading article context.
q. why are the icons different than vector
a: a lot of vector UI assets come from commons. mobilefrontend controls most of the UI for us. we need to update the icons to match wikimedia style guide iconography and MF is the first place we should do it. changing anything on vector is not a page issue specific task. it's a wider problem to solve.
Test articles can be found here: https://en.wikipedia.org/wiki/Category:Articles_with_multiple_maintenance_issues