Content translation dashboard shows different lists of articles in their views (suggestions, in progress translations, and published articles). All of these items have a very similar structure.This ticket proposes some layout and typography adjustments to better align the list of items on these views with the design guidelines.
Mockups showing the final outcome for two example views:
|Suggestions| In progress|
|---|---|
|{F6526271} | {F6527377}|
Proposed adjustments:
- More padding around the list item. A 16px distance will be used around the list item contents, and also between the image and the text elements.
- Adjusting the images. 84px images, using 2px rounded corners.
- Smaller font size for the title (16px) and slightly larger for other information (13px).
- Tags such as "featured" shown after the title without a tag treatment. Only text (in different colors) is used.
- Icons for actions are placed at the top-right corner of the element. They have a 24px active area, but their shape is shown at 20px.
-- An outlined star is used for items that are not in the "for later" list, while a filled star is used for those added.
The mockup below shows annotations to clarify some key aspects of the layout and typography:
{F6526276, size=full}