- When on a tablet, the related articles take up a 3 column layout with each row having a fixed height
- Truncate long titles/
wiki data descriptionswith linear gradient/ellipses
- Title should be changed to 'Related pages'
and made uppercase. See mock for font-color change.
- MediaWiki pages should be renamed from https://www.mediawiki.org/wiki/Talk:Reading/Web/Projects/Read_more to https://www.mediawiki.org/wiki/Talk:Reading/Web/Projects/Related pages (leave a redirect)
- Related pages should be inserted after the #content div in the Vector skin as in mock
- ONLY title change on Mobile - title style can be the same as desktop. but left aligned to the cards
- Release new versions of RelatedArticles and Cards after signing off design on staging with Nirzar
On wide screens we have enough horizontal space and the mobile table layout does not make sense.
Instead of long list items, we can use horizontal layout to show cards and use the space correctly.
These cards will collapse down from LTR (or RTL) as you change the width of the screen. eventually, resulting in the table layout that we see on mobile web.
- Related articles will show cards on desktop. laid out horizontally.
- The three cards will have fixed height. flexible width until the breakpoint of 720
- after 720, the cards will collapse into a tableview. Mock no. 2
- after the mobile breakpoint, the tableview will look like what is implemented on mobile-web beta right now. except for the new title styling to match on desktop.
- The titles will get clamped after 2 lines.
- The background of related articles is merged into the footer with
subtle inset shadow on top to show layering
Visual Design Spec