Page MenuHomePhabricator

Finalize design work for ReadingLists special page
Closed, ResolvedPublic2 Estimated Story Points

Description

This completes the work in T400939: [Reading List] Adjustments to Special:ReadingLists Layout of the saved articles view

If there is time, a nice to have were when titles space expands to non-existing descriptions space. That might be tackled in different task though.

Acceptance criteria for done

  • Missing articles don't feature an alert looking icon anymore
  • Layout resize based on the available width according to responsive design templates shown – ReadingLists/+/1193516
  • Layout has been signed-off by designer

Design–Engineering agreements

  • Cards feature a min and a max width and
  • extend the text box within to ensure this flexibility
  • 4 Cards max per row, after the max width of the Card itself is reached and there's still space for up to 4
  • Title font-size/line-height will be reduced to the next lower level in Codex (1.25rem/1.875rem)
  • Title lines will be clamped at 2 rows
  • Wikidata description will also clamp at 2 rows – .cdx-card__text__description is already carrying this
  • Thumbnails will be top + center aligned in the thumbnail container
  • Reduce the spacing between "sorted by...." text and cards. Currently in Figma 12 px.
  • Cards will feature minimum height equal to thumbnail minimum height to address lists of pages without any thumbnail render equal

Event Timeline

Jdlrobson-WMF renamed this task from [placeholder] remaining design work for ReadingLists to Design work for ReadingLists.Oct 7 2025, 5:47 PM
Jdlrobson-WMF set the point value for this task to 2.
Jdlrobson-WMF updated the task description. (Show Details)
Jdlrobson-WMF renamed this task from Design work for ReadingLists to Finalize design work for ReadingLists special page.Oct 7 2025, 5:49 PM
Jdlrobson-WMF triaged this task as High priority.
Jdlrobson-WMF updated the task description. (Show Details)

Change #1193516 had a related patch set uploaded (by Jdlrobson; author: VolkerE):

[mediawiki/extensions/ReadingLists@master] styles: Apply more precise layout for (thumbnails in) cards and beyond

https://gerrit.wikimedia.org/r/1193516

Volker_E updated the task description. (Show Details)
Volker_E added a subscriber: Sneha.

Test wiki created on Patch demo by Volker E. (WMF) using patch(es) linked to this task:
https://a6a4ae7cf3.catalyst.wmcloud.org/w/

Change #1193516 merged by jenkins-bot:

[mediawiki/extensions/ReadingLists@master] styles: Re-apply more precise layout for cards and beyond

https://gerrit.wikimedia.org/r/1193516

I have turned the agreements in to a checklist so we can track them here.

Adding screenshots and notes here for each of the items that still needs to be done or need clarification.

Title font-size/line-height will be reduced to the next lower level in Codex (1.25rem/1.875rem)

I see the size has been reduced but wondering if line height is also updated? It looks like there the same amount of spacing between lines as there is between title and description. I want to make sure that line height is also updated as it looks a bit wide.

Screenshot 2025-10-14 at 12.16.38 PM.png (294×1 px, 223 KB)

Title lines will be clamped at 2 rows

I am seeing examples like these where title is not clamped after 2 rows. Also as a result, it might be affecting the height of the card in certain grid size which is also causing the images to not be square

Screenshot 2025-10-14 at 12.18.35 PM.png (284×950 px, 45 KB)
Screenshot 2025-10-14 at 12.26.00 PM.png (376×882 px, 222 KB)

Wikidata description will also clamp at 2 rows

I haven't found and example to test this

Thumbnails will be top + center aligned in the thumbnail container

This does not seem to be working as thumbnails are still center = center aligned. Here is the search results page for an example of top + center aligned for the same article.

Screenshot 2025-10-14 at 12.22.23 PM.png (298×950 px, 201 KB)

Cards will feature minimum height equal to thumbnail minimum height to address lists of pages without any thumbnail render equal

Looks like the min height is working.. but max height is not working (may be related to clamping)

Screenshot 2025-10-14 at 12.27.01 PM.png (1×2 px, 1 MB)

Grid
At one specific viewport size there the spacing between the column is too wide. Keep the spacing between column consistent even if it means more space on the right side of the page.

Screenshot 2025-10-14 at 12.29.14 PM.png (1×2 px, 595 KB)

Change #1196130 had a related patch set uploaded (by VolkerE; author: VolkerE):

[mediawiki/extensions/ReadingLists@master] styles: Fix thumbnail top alignment

https://gerrit.wikimedia.org/r/1196130

Moving back to in progress since it seems like this is still being worked on - we're about to have mid sprint checkin so I won't micromanage further for now, but probably someone other than Sneha will end up assigned to this ticket shortly

@Volker_E and I checked-in and line height issue is not a problem and its following the codex guidelines.

Update: @Volker_E and I have decided to separate the Grid issue reported in the design review comment above in a separate task. @Volker_E will capture it in the new ticket. Rest of the work will be done in this ticket as specified in the ticket.

Change #1196130 merged by jenkins-bot:

[mediawiki/extensions/ReadingLists@master] styles: Fix thumbnail top alignment

https://gerrit.wikimedia.org/r/1196130

Change #1196535 had a related patch set uploaded (by VolkerE; author: VolkerE):

[mediawiki/extensions/ReadingLists@master] styles: Finalize design

https://gerrit.wikimedia.org/r/1196535

Change #1196535 merged by jenkins-bot:

[mediawiki/extensions/ReadingLists@master] styles: Finalize design

https://gerrit.wikimedia.org/r/1196535

Grid and cards are working beautifully!

Screenshot 2025-10-16 at 4.00.31 PM.png (1×3 px, 1 MB)
Screenshot 2025-10-16 at 4.01.47 PM.png (1×3 px, 367 KB)
Screenshot 2025-10-16 at 4.04.10 PM.png (1×3 px, 197 KB)
Screenshot 2025-10-16 at 4.00.43 PM.png (1×3 px, 1 MB)

There is an issue I noticed when there are only 2 or 3 cards which I have captured in T407563