| • Sarai-WMDE | |
| Aug 16 2021, 10:14 AM |
| F35859544: image.png | |
| Dec 12 2022, 3:56 PM |
| F35847999: Screenshot 2022-12-09 at 16.45.52.png | |
| Dec 9 2022, 3:54 PM |
| F35828742: Mobile (below tablet breakpoint).png | |
| Dec 2 2022, 6:16 PM |
| F35828721: QB_Logo_Mobile.svg | |
| Dec 2 2022, 5:54 PM |
| F35828720: QB_Logo.svg | |
| Dec 2 2022, 5:54 PM |
| F35828710: Desktop.png | |
| Dec 2 2022, 5:54 PM |
| F34597504: Logo_WD_small.svg | |
| Aug 16 2021, 10:33 AM |
Problem
The Query builder's layout doesn't display a header, which makes it off-brand (not manifestly related to Wikidata) and inconsistent with other SPA tools, such as the Mismatch Finder or the Item Quality Evaluator.
Mockups
| Desktop | Below tablet breakpoint |
 |  |
Acceptance criteria:
Attachments
| Status | Subtype | Assigned | Task | ||
|---|---|---|---|---|---|
| Open | None | T324351 Standardize the layout of SPA tools | |||
| Resolved | guergana.tzatchkova | T288939 Query Builder: Add main header |
Change 865103 had a related patch set uploaded (by Guergana Tzatchkova; author: Guergana Tzatchkova):
[wikidata/query-builder@master] Add logo images to /img folder
Please note that this task should ideally be followed up by T288931: Query Builder: Replace visible h1 (Currently available in the Unified prioritized backlog)
Change 865103 merged by jenkins-bot:
[wikidata/query-builder@master] Add header logo image to Query Builder
Change 866556 had a related patch set uploaded (by Lucas Werkmeister (WMDE); author: WDQSGuiBuilder):
[wikidata/query-builder/deploy@production] Merging from 94cc90f99f476efd746498de78932dd4203b24c1
Change 866556 merged by Lucas Werkmeister (WMDE):
[wikidata/query-builder/deploy@production] Merging from 94cc90f99f476efd746498de78932dd4203b24c1
Looking great! 🎉 Only one question: would it be possible to maintain the 1.5rem top margin in the responsive version of the header (aka below the 609px breakpoint)? It now gets reduced to 1rem (same as all other page margins), but it shouldn't. Thank you!
Change 867118 had a related patch set uploaded (by Guergana Tzatchkova; author: Guergana Tzatchkova):
[wikidata/query-builder@master] Adjust padding-top in main
Looking great! 🎉 Only one question: would it be possible to maintain the 1.5rem top margin in the responsive version of the header (aka below the 609px breakpoint)? It now gets reduced to 1rem (same as all other page margins), but it shouldn't. Thank you!
I have addressed this in this new patch. It would probably make sense to get this reviewed before we deploy it.
@SaraiSan Given Lucas' comment in Adjust padding-top in main (Ib48f38b0): Could you say what the margin spacing above the footer should be for the most narrow breakpoint? So far it was 1.5 rem for desktop / wider displays, and 1 rem for mobile / narrow displays.
Meaning this one:
Hey! Thanks for the heads-up about the comment, @Michael. The answer is: none of the above. In all SPAs, the footer should have a 2.5rem of spacing above itself. This is regardless of the breakpoint.
There's no need to make any changes as part of this ticket, though. This fix is documented in a separate task: T324356: Query Builder: Adjust footer content and style
Change 867118 merged by jenkins-bot:
[wikidata/query-builder@master] Adjust padding-top in main
