Page MenuHomePhabricator

[MEX] M2 - Clean up statement UI
Closed, ResolvedPublic

Description

Once we have created the new UI to work across all datatypes, we must clean up the UI so that it appears consistent and presentable throughout.

Please adjust to:

  • the property name has a left padding of spacing-75 and top and bottom padding spacing-35
  • property name and edit button are center aligned
  • the edit button has a padding of spacing-30 to the right (see pictures)

Screenshot 2025-08-05 at 09.55.04.png (282×1 px, 50 KB)

Screenshot 2025-08-05 at 09.55.37.png (340×636 px, 42 KB)

  • Ranking icon has a total of spacing-65 padding to the left, spacing-30 to the property value and spacing-75 top and bottom
  • Ranking & property value are centered aligned

Screenshot 2025-08-05 at 10.50.25.png (246×830 px, 45 KB)

  • The background is removed from the property value on Commons Media datatype statements

Screenshot 2025-08-05 at 10.55.47.png (512×2 px, 163 KB)

Acceptance Criteria

  • Ranking icon has consistent padding across all datatypes
  • The property value is centre-aligned
  • The property value is left-aligned for (LTR lang) from the ranking icon
  • The background is removed from the property value on Commons Media datatype statements

Event Timeline

Screenshot 2025-08-05 at 09.55.37.png (340×636 px, 42 KB)

Screenshot 2025-08-05 at 09.54.43.png (424×1 px, 74 KB)

Hey sorry i don't know how to use phabricator yet. But in these photos you see the specs for the statement header

Alice.moutinho updated the task description. (Show Details)
Alice.moutinho updated the task description. (Show Details)

Although the images have px values, we should be using tokens across everything. The images are just to illustrate the spacing.

Change #1183270 had a related patch set uploaded (by Sadiya.mohammed13; author: Sadiya.mohammed13):

[mediawiki/extensions/Wikibase@master] Style: Align image, text, and rank selector in statement view

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

I did a first review round; unassigning myself so someone else can take over during {E1896} :)

Change #1183270 had a related patch set uploaded (by Sadiya.mohammed13; author: Sadiya.mohammed13):

[mediawiki/extensions/Wikibase@master] Style: Align image, text, rank selector, and snack value in statement view

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

Change #1183270 merged by jenkins-bot:

[mediawiki/extensions/Wikibase@master] Style: Align image, text, rank selector, and snack value

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