Page MenuHomePhabricator

[WtC-M3] [QB] Adapt QB's layout to Codex's grid system and breakpoints
Closed, ResolvedPublic8 Estimated Story Points

Description

Problem

The Query Builder tool was originally designed following WiKit's grid system. With the creation of Codex, a new set of standard grids were introduced and, with them, some differences in spacing and margins that we now need to resolve.

Solution

The Query Builder UI will need to be adjusted as follows (please see specs for details):

  1. Update the device breakpoint values
  2. Adjust the page margins according to each breakpoint
  3. Adjust the max-width value of the intro paragraph
Considerations

Files where breakpoint tokens or variables are used (please beware the list might be incomplete!):

Acceptance criteria
  • The Query Builder's layout is adjusted to follow the new Codex grid system

Event Timeline

Arian_Bozorg renamed this task from [SW] [WtC-M2] Adapt QB's layout to Codex's grid system to [SW] [WtC-M2] [QB] Adapt QB's layout to Codex's grid system.Mar 11 2024, 3:02 PM
Arian_Bozorg renamed this task from [SW] [WtC-M2] [QB] Adapt QB's layout to Codex's grid system to [SW] [WtC-M3] [QB] Adapt QB's layout to Codex's grid system.Mar 11 2024, 3:45 PM
Sarai-WMDE renamed this task from [SW] [WtC-M3] [QB] Adapt QB's layout to Codex's grid system to [SW] [WtC-M3] [QB] Adapt QB's layout to Codex's grid system and breakpoints.Mar 14 2024, 3:26 PM
Sarai-WMDE updated the task description. (Show Details)
Arian_Bozorg renamed this task from [SW] [WtC-M3] [QB] Adapt QB's layout to Codex's grid system and breakpoints to [WtC-M3] [QB] Adapt QB's layout to Codex's grid system and breakpoints.Mar 27 2024, 9:59 AM
karapayneWMDE set the point value for this task to 8.Apr 16 2024, 8:24 AM

I am sorry, I moved this task around, for some reason I got confused with the names of the columns. I am assigning it back to you @HasanAkgun_WMDE since you were already working on it.

Change #1052076 had a related patch set uploaded (by Hasan Akgün (WMDE); author: Hasan Akgün (WMDE)):

[wikidata/query-builder@master] Adapt QB's layout to Codex's grid system and breakpoints

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

Change #1052076 merged by jenkins-bot:

[wikidata/query-builder@master] Adapt QB's layout to Codex's grid system and breakpoints

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

Hello there! Sorry for the repeated comment, but the page's horizontal margins should become 32px (dimension-layout-medium) from the 1120px breakpoint (min-width-breakpoint-desktop). Please let me know if this is feasible. Thank you! 🙏🏻

Change #1055959 had a related patch set uploaded (by Hasan Akgün (WMDE); author: Hasan Akgün (WMDE)):

[wikidata/query-builder@master] Fix paddings for larger screens

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

karapayneWMDE subscribed.

my bad to remove you, Sarai did already review the code and left a comment for you :)

Change #1055959 merged by jenkins-bot:

[wikidata/query-builder@master] Fix paddings for larger screens

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