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.

Sign up for GitHub

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

Jump to bottom

Update/refactor backend container styles #3178

Closed
6 tasks done
sergei-maertens opened this issue Jun 22, 2023 · 0 comments · Fixed by #3575, open-formulieren/design-tokens#42 or open-formulieren/open-forms-sdk#592
Closed
6 tasks done

Update/refactor backend container styles #3178

sergei-maertens opened this issue Jun 22, 2023 · 0 comments · Fixed by #3575, open-formulieren/design-tokens#42 or open-formulieren/open-forms-sdk#592
Assignees
@sergei-maertens
Labels
owner: utrecht topic: nlds
Milestone
Release 2.5.0

Comments

@sergei-maertens
Copy link
Member

sergei-maertens commented Jun 22, 2023 •
edited

Class names: .view and .layout in the backend.

These contain fallback styles that would probably be better left unset. Additionally, it's probably better to use utrecht-document and fill in the design tokens for that component in our own theme, replacing our styles.

It's probably also recommended to always include the SDK CSS bundle and use the .openforms-layout components, reducing CSS duplication/divergence.

The :root CSS setting design tokens should also be properly scoped under the .openforms-theme (probably).
@sergei-maertens sergei-maertens added this to the Release 2.3.0 milestone Jun 22, 2023
sergei-maertens added a commit that referenced this issue Nov 2, 2023
@sergei-maertens
♻️ [#3178] Refactor page container class to be utrecht-page NL DS com…
64db3ec 
…ponent
sergei-maertens added a commit that referenced this issue Nov 2, 2023
@sergei-maertens
⬆️ [#3178] Upgrade sass tooling versions used
50aaef7
sergei-maertens added a commit that referenced this issue Nov 2, 2023
@sergei-maertens
♻️ [#3178] Rewrite page structure and add overrides for openforms-theme
8f9342a 
* The header is now a 'global' include, the ui 'app' is being removed
* The main content container now gets styling from the utrecht-page design tokens
* Header and footer are to be replaced after the 'view' component is refactored
  out of the codebase.
sergei-maertens added a commit that referenced this issue Nov 2, 2023
@sergei-maertens
🔥 [#3178] Remove view component styles
b8ced3c 
They have been replaced with the NL DS utrecht-page component.

Design token mapping will take place and/or we will set up some
compatibility shims.
sergei-maertens added a commit that referenced this issue Nov 2, 2023
@sergei-maertens
♻️ [#3178] Refactor global page scaffolding to main 'templates' direc…
117ea23 
…tory

Moving stuff out of the ui 'app' and simplifying the renderen HTML
for better discoverability.
sergei-maertens added a commit that referenced this issue Nov 2, 2023
@sergei-maertens
♻️ [#3178] Refactor header component to utrecht-page-header
96cb004
sergei-maertens added a commit that referenced this issue Nov 2, 2023
@sergei-maertens
♻️ [#3178] Refactor page footer to utrecht-page-footer NL DS component
13eae43
sergei-maertens added a commit that referenced this issue Nov 2, 2023
@sergei-maertens
♻️ [#3178] Ensure SDK CSS is always loaded
b54eee5
sergei-maertens added a commit that referenced this issue Nov 2, 2023
@sergei-maertens
♻️ [#3178] Re-arrange markup/CSS for page layout
ebb4d4b
sergei-maertens added a commit that referenced this issue Nov 3, 2023
@sergei-maertens
♻️ [#3178] Refactor page container class to be utrecht-page NL DS com…
e1072b6 
…ponent
sergei-maertens added a commit that referenced this issue Nov 3, 2023
@sergei-maertens
⬆️ [#3178] Upgrade sass tooling versions used
6d75ecc
sergei-maertens added a commit that referenced this issue Nov 3, 2023
@sergei-maertens
♻️ [#3178] Rewrite page structure and add overrides for openforms-theme
3dd0679 
* The header is now a 'global' include, the ui 'app' is being removed
* The main content container now gets styling from the utrecht-page design tokens
* Header and footer are to be replaced after the 'view' component is refactored
  out of the codebase.
sergei-maertens added a commit that referenced this issue Nov 3, 2023
@sergei-maertens
🔥 [#3178] Remove view component styles
b337340 
They have been replaced with the NL DS utrecht-page component.

Design token mapping will take place and/or we will set up some
compatibility shims.
sergei-maertens added a commit that referenced this issue Nov 3, 2023
@sergei-maertens
♻️ [#3178] Refactor global page scaffolding to main 'templates' direc…
1679c5d 
…tory

Moving stuff out of the ui 'app' and simplifying the renderen HTML
for better discoverability.
sergei-maertens added a commit that referenced this issue Nov 3, 2023
@sergei-maertens
♻️ [#3178] Refactor header component to utrecht-page-header
3b1271a
sergei-maertens added a commit that referenced this issue Nov 3, 2023
@sergei-maertens
♻️ [#3178] Refactor page footer to utrecht-page-footer NL DS component
b9ce931
sergei-maertens added a commit that referenced this issue Nov 3, 2023
@sergei-maertens
♻️ [#3178] Ensure SDK CSS is always loaded
36cc822
sergei-maertens added a commit that referenced this issue Nov 3, 2023
@sergei-maertens
♻️ [#3178] Re-arrange markup/CSS for page layout
59c420e
sergei-maertens added a commit that referenced this issue Nov 3, 2023
@sergei-maertens
♻️ [#3178] Polish footer overrides/extensions
dbe8a71
sergei-maertens added a commit that referenced this issue Nov 3, 2023
@sergei-maertens
♻️ [#3178] Set up CSS to be backwards compatible
5c12c3e
sergei-maertens added a commit that referenced this issue Nov 3, 2023
@sergei-maertens
💚 [#3178] Resolve test failures
73f5bab
sergei-maertens added a commit to open-formulieren/design-tokens that referenced this issue Nov 3, 2023
@sergei-maertens
✨ [open-formulieren/open-forms#3178] Define design tokens for the pag…
e387321 
…e footer

This sets up the out-of-the-box design tokens supported by the upstream
component, and additionally adds responsive token values for the
Open Forms' specific extensions.
sergei-maertens added a commit to open-formulieren/design-tokens that referenced this issue Nov 3, 2023
@sergei-maertens
♻️ [open-formulieren/open-forms#3178] Set up page header/footer tokens
1baa92b 
Added the default/fallback tokens and set up token aliases while
deprecating old tokens. The deprecated tokens will be removed in Open
Forms 3.0.
sergei-maertens added a commit to open-formulieren/design-tokens that referenced this issue Nov 3, 2023
@sergei-maertens
✨ [open-formulieren/open-forms#3178] Incorporate paddings for desktop…
f3d1585 
…/mobile view

The utrecht-page/utrecht-page-content design tokens replace the
layout 'component' we had in the backend.
sergei-maertens added a commit to open-formulieren/design-tokens that referenced this issue Nov 9, 2023
@sergei-maertens
✨ [open-formulieren/open-forms#3178] Added design tokens for app cont…
6a3fd7d 
…ainer component
sergei-maertens added a commit to open-formulieren/design-tokens that referenced this issue Nov 9, 2023
@sergei-maertens
✨ [open-formulieren/open-forms#3178] Add design tokens for app body/f…
3c49834 
…orm styles
sergei-maertens added a commit to open-formulieren/open-forms-sdk that referenced this issue Nov 9, 2023
@sergei-maertens
♻️ [open-formulieren/open-forms#3178] Refactor layout for body/progre…
6ccbda6 
…ss indicator

Using CSS grid we can more easily adapt to different viewports to put
elements in their right place.
sergei-maertens added a commit to open-formulieren/open-forms-sdk that referenced this issue Nov 9, 2023
@sergei-maertens
📝 [open-formulieren/open-forms#3178] Update and expand FormDisplay st…
fa16ef4 
…ories
@sergei-maertens sergei-maertens mentioned this issue Nov 9, 2023
Merged
sergei-maertens added a commit to open-formulieren/open-forms-sdk that referenced this issue Nov 9, 2023
@sergei-maertens
🔥 [open-formulieren/open-forms#3178] Remove layout component
6b38221 
Sayonara and good riddance.

This component had become an unmaintainable mess - while the actual
layout challenges are easily fixed with some appropriate flexbox/grid
layouts in the few places where containers are set up.
@sergei-maertens sergei-maertens mentioned this issue Nov 9, 2023
Merged
sergei-maertens added a commit to open-formulieren/open-forms-sdk that referenced this issue Nov 9, 2023
@sergei-maertens
♻️ [open-formulieren/open-forms#3178] Refactor app display structure
7fde217 
Remove the Layout component usage and instead go for direct styles,
making it easier to override the component too as it's more
straight forward.
sergei-maertens added a commit to open-formulieren/open-forms-sdk that referenced this issue Nov 9, 2023
@sergei-maertens
♻️ [open-formulieren/open-forms#3178] Refactor layout for body/progre…
1426c0f 
…ss indicator

Using CSS grid we can more easily adapt to different viewports to put
elements in their right place.
sergei-maertens added a commit to open-formulieren/open-forms-sdk that referenced this issue Nov 9, 2023
@sergei-maertens
📝 [open-formulieren/open-forms#3178] Update and expand FormDisplay st…
eec8bbe 
…ories
sergei-maertens added a commit to open-formulieren/open-forms-sdk that referenced this issue Nov 9, 2023
@sergei-maertens
🔥 [open-formulieren/open-forms#3178] Remove layout component
755aaa1 
Sayonara and good riddance.

This component had become an unmaintainable mess - while the actual
layout challenges are easily fixed with some appropriate flexbox/grid
layouts in the few places where containers are set up.
sergei-maertens added a commit that referenced this issue Nov 9, 2023
@sergei-maertens
🔥 [#3178] openforms-layout is gone
a27d1fb
sergei-maertens added a commit that referenced this issue Nov 9, 2023
@sergei-maertens
🗃️ [#3178] Set up design token values data migration
8f2e6d6
sergei-maertens added a commit to open-formulieren/design-tokens that referenced this issue Nov 10, 2023
@sergei-maertens
✨ [open-formulieren/open-forms#3178] Define design tokens for the pag…
4c9e07e 
…e footer

This sets up the out-of-the-box design tokens supported by the upstream
component, and additionally adds responsive token values for the
Open Forms' specific extensions.
sergei-maertens added a commit to open-formulieren/design-tokens that referenced this issue Nov 10, 2023
@sergei-maertens
♻️ [open-formulieren/open-forms#3178] Set up page header/footer tokens
a0a7765 
Added the default/fallback tokens and set up token aliases while
deprecating old tokens. The deprecated tokens will be removed in Open
Forms 3.0.
sergei-maertens added a commit to open-formulieren/design-tokens that referenced this issue Nov 10, 2023
@sergei-maertens
✨ [open-formulieren/open-forms#3178] Incorporate paddings for desktop…
5403376 
…/mobile view

The utrecht-page/utrecht-page-content design tokens replace the
layout 'component' we had in the backend.
sergei-maertens added a commit to open-formulieren/design-tokens that referenced this issue Nov 10, 2023
@sergei-maertens
✨ [open-formulieren/open-forms#3178] Added design tokens for app cont…
a7876e3 
…ainer component
sergei-maertens added a commit to open-formulieren/design-tokens that referenced this issue Nov 10, 2023
@sergei-maertens
✨ [open-formulieren/open-forms#3178] Add design tokens for app body/f…
9ce92f2 
…orm styles
sergei-maertens added a commit to open-formulieren/open-forms-sdk that referenced this issue Nov 10, 2023
@sergei-maertens
♻️ [open-formulieren/open-forms#3178] Refactor app display structure
6a710bc 
Remove the Layout component usage and instead go for direct styles,
making it easier to override the component too as it's more
straight forward.
sergei-maertens added a commit to open-formulieren/open-forms-sdk that referenced this issue Nov 10, 2023
@sergei-maertens
♻️ [open-formulieren/open-forms#3178] Refactor layout for body/progre…
23a8eaf 
…ss indicator

Using CSS grid we can more easily adapt to different viewports to put
elements in their right place.
sergei-maertens added a commit to open-formulieren/open-forms-sdk that referenced this issue Nov 10, 2023
@sergei-maertens
📝 [open-formulieren/open-forms#3178] Update and expand FormDisplay st…
b9ac076 
…ories
sergei-maertens added a commit to open-formulieren/open-forms-sdk that referenced this issue Nov 10, 2023
@sergei-maertens
🔥 [open-formulieren/open-forms#3178] Remove layout component
3446b61 
Sayonara and good riddance.

This component had become an unmaintainable mess - while the actual
layout challenges are easily fixed with some appropriate flexbox/grid
layouts in the few places where containers are set up.
sergei-maertens added a commit to open-formulieren/open-forms-sdk that referenced this issue Nov 10, 2023
@sergei-maertens
🐛 [open-formulieren/open-forms#3178] Fix alignment of language selection
beda0b4 
The removal of the layout row broke the CSS.
sergei-maertens added a commit to open-formulieren/open-forms-sdk that referenced this issue Nov 10, 2023
@sergei-maertens
⬆️ [open-formulieren/open-forms#3178] Bump to design tokens 0.48.0
1bbea1e
sergei-maertens added a commit that referenced this issue Nov 10, 2023
@sergei-maertens
⬆️ [#3178] Bump to design tokens 0.48.0
5027432
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@sergei-maertens sergei-maertens

Labels
owner: utrecht topic: nlds
Projects
Development
Archived in project
Milestone
Release 2.5.0
2 participants
@joeribekker @sergei-maertens