Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor layouts #1500

Open
wants to merge 42 commits into
base: main
Choose a base branch
from
Open

Refactor layouts #1500

wants to merge 42 commits into from

Conversation

joonatank
Copy link
Contributor

@joonatank joonatank commented Nov 8, 2024

🛠️ Changelog

Pages are now defined as a flex base layout, more complex pages add grid wrapper inside the flex to control two columns. Anything that is not a general purpose component is expected to primarily export fragments not divs and allow the page layout handle margins.

  • Refactor: use common base page layout and css in both apps.
  • Refactor: remove Containers and custom padding from components.
  • Refactor: prefer flex / grid with gaps over custom padding and margin per component.
  • Add: utility components to common/styles/util including Flex component that should solve most basic use cases.
  • Define page wide fonts and styling in common/styles/global.scss instead of random places.
  • Refactor: remove duplicated style code and app specific definition.
  • Remove $legacy attributes from H components.
  • Remove the use of <H2 as="h1"> h1 should stay consistent unless there is very specific case (ex. front page hero section).
  • Remove old Modal component admin-ui

🧪 Test plan

  • Manual testing: massive style / layout changes (should not have critical issues).
  • Automated testing: e2e - functionality should not have changed.

🎫 Tickets

@joonatank joonatank force-pushed the refactor-layouts branch 13 times, most recently from ac78065 to 412c44a Compare November 14, 2024 07:45
@joonatank joonatank marked this pull request as ready for review November 14, 2024 08:11
Comment on lines +62 to +69
$justify?:
| "center"
| "flex-start"
| "flex-end"
| "space-between"
| "space-around"
| "space-evenly";
$align?: "center" | "flex-start" | "flex-end" | "baseline" | "stretch";
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This doesn't take into account whether justify/align is for content or for items. All combinations of these are quite often used. Should the variable names maybe be justifyContent and alignItems - to leave room for justify-items/align-content?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants