Sarai-WMDE added a comment.
Summary of what's causing confusion: rather than fully adhering to creating a 'compact' look, the spacing changes included in the mock have the purpose of fixing the heading dimensions, and solving some spacing inconsistencies between the main and the results pages, and the original designs. The course of action from my side should have consisted on creating a separate ticket. If that's preferable, I'll go ahead and create a new task! > - In Figma, the header has a vertical margin of 1.25em. In the app, it currently has `$dimension-layout-xsmall` (1rem), or `$dimension-layout-small` (1.5rem) above the tablet breakpoint. Which breakpoint does Figma correspond to? And should I hard-code the 1.25em (1.25rem?), or is there another variable I’m missing? Sorry about that. The 1.25em value is part of the Codex sizing & spacing scale, but not WiKit's. Let's keep using `$dimension-layout-small`. Regarding the tablet breakpoint: I'm not able to find any mention of the spacing change in the header specs 🤔 The header seems to stay the same, or at least that's what's documented in the original MVP designs <https://www.figma.com/file/sgK1Go5my7ShZ1HQIxV2FI/Mismatch-Finder?node-id=1119%3A22624&t=vJ5Quj7iKRUiFnkY-0> and the SPA consolidation specs <https://www.figma.com/file/2Sarzaww3tZQiLrVOXj7iE/SPA-consolidation?node-id=304%3A4351&t=F3AoLxAKJHlSjGmo-0> (which now need to be updated to reflect the right spacing). I'm not sure why this distinction was made, but it could be related to trying to fix some layout issues (see #100 <https://github.com/wmde/wikidata-mismatch-finder/pull/100/files>)? If possible, thee header spacing should remain the same regardless of the device size in both the Mismatch website and the store. > - In Figma, the “find more mismatches” button has a vertical margin of 1.5em, which apparently doesn’t collapse with the header margin. In the app, it currently has no margin of its own, but its surrounding elements produce a margin of 1.5rem (header, above) and 1rem (description section heading, below) respectively. Do we want to increase that? We should add some spacing between the header and the back button to keep the main page and the results pages similarly spaced, yes. The specs suggested adding the same (slightly increased) spacing between the header (which should be considered a unit that includes its margins: should these actually be paddings?) and the next element below it. Given the increase of the header spacing from 1.25 to 1.5, I think it's fair to reduce that spacing to 1em now: this means that no change is required in the main page, but yes, the button shouldn't be adjacent to the header. > - In Figma, the description section has a lower margin of 3em; in the app, it’s currently 2.5rem. Do we want to increase that? This had the intention of making both pages consistent again: the description in the main page has technically a bottom margin of 2.5em applied to it, but that spacing increases due to the extra margin applied to the elements placed right below it. Looking at now with the intention of making the UI more 'compact', maybe we could attempt to adjust the spacing between the description and the 'message section' 2.5rem? (Updating specs too) F35824132: Screenshot 2022-11-29 at 15.22.38.png <https://phabricator.wikimedia.org/F35824132> > - In Figma, the mismatches form footer (with the “save reviews” button) has an upper margin of 1.5em and a lower margin of 3.5em; in the app, it currently has an upper margin of 1rem, a lower margin of 2.5rem, and additionally a minimum height of 5em. I assume we want to remove the min-height (it doesn’t collapse with the margin, and I see nothing corresponding to it in Figma), but do we want to increase the margins? The specs suggested increasing the margin between the 'Save reviews' button and table to 1.5em (again, to keep spacing homogenous) while reducing the min-height to 3.5em to condense a little bit the view (doing this gave a pass to add a bit of extra spacing between table and button). Now, thanks to your comment regarding the message: that's right. I remember this conversation and us going for the default increase in space. So we should leave this as is. TASK DETAIL https://phabricator.wikimedia.org/T323678 EMAIL PREFERENCES https://phabricator.wikimedia.org/settings/panel/emailpreferences/ To: Lucas_Werkmeister_WMDE, Sarai-WMDE Cc: Michael, Lucas_Werkmeister_WMDE, Lydia_Pintscher, Sarai-WMDE, Nikki, Aklapper, Astuthiodit_1, karapayneWMDE, Invadibot, maantietaja, Mattia_Capozzi_WMDE, ItamarWMDE, Akuckartz, Nandana, Lahi, Gq86, GoranSMilovanovic, QZanden, LawExplorer, _jensen, rosalieper, Scott_WUaS, Wikidata-bugs, aude, Mbch331
_______________________________________________ Wikidata-bugs mailing list -- wikidata-bugs@lists.wikimedia.org To unsubscribe send an email to wikidata-bugs-le...@lists.wikimedia.org
