Skip to content

Scroller mode and full width for teaser lists #2242

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

Draft
wants to merge 12 commits into
base: master
Choose a base branch
from

Conversation

tf
Copy link
Member

@tf tf commented Jun 6, 2025

REDMINE-20981

@tf tf added this to the v17.1 milestone Jun 6, 2025
@tf tf force-pushed the teaser-scroller branch 2 times, most recently from 614b4da to 9975893 Compare June 6, 2025 09:23
tf added 11 commits June 11, 2025 13:58
- Make different content max widths available as custom properties -
  including defaults set by different layouts.

- Make content-max-width unset in full width instead of setting it to
  `none`. This allows using different fallback values in vars.

- Do not reset `content-margin` for full width elements. So far,
  `content-margin` has only be used in the non full width
  case. Keeping it unchanged lets full width element align children
  with content margin.

REDMINE-20981
Behind feature flag for now.

REDMINE-20981
- Activate custom margin to allow placing scroll buttons in content
  margin.

- Base item width on reference width instead of container width when
  element has full width. This allows aligning items width different
  content max widths even if element spans full width. Calculate
  padding to align items with other section content based on content
  margin and section max width.

- Optionally render scroller. When full width is used, apply padding
  as scoll padding + margin for the first and last item to make
  padding at the end of the scroller work.

- For centered layout, initially align first and last item with
  section content when scroller is moved to beginning/end
  respectively.

REDMINE-20981
Transforming a scroll snapped element moves the scroller.

REDMINE-20981
Allow rendering action button in floating portals.

REDMINE-20981
- Implement based on floating-ui

- Use portal to prevent clipping in teaser list scroller

REDMINE-20981
@tf tf force-pushed the teaser-scroller branch from 1afe817 to 7af3184 Compare June 11, 2025 13:30
Prevent l and xl items from exceeding the width they would have if the
viewport was wide enough to for the maximum number of columns to be
used.

REDMINE-20979
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.

1 participant