Need @media(max-width)/(min-width) capacity

Created on 27 February 2022, almost 3 years ago
Updated 28 June 2023, over 1 year ago

Problem/Motivation

This is just what I've been hoping for with Layout Builder (while waiting on D10). The initial interface is great and straightforward. I realize this is just the beta, but it's great so far.

I realize that you're just beginning and need to keep going, but the next step in CSS Grid is the ability to change layouts as the device size changes. So we need @media(max-width)/(min-width) capacity.

Proposed resolution

  1. Breakpoints can be established/edited in the Configuration section or as part of the sub-theme.
  2. Each section created would have it's own specific breakpoint.
  3. It might work best to have the ability to use Named Areas to avoid unnecessary Layout Builder section duplication.

This is great stuff! Please continue!

Feature request
Status

Active

Version

1.0

Component

User interface

Created by

🇺🇸United States hmt3design

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • 🇳🇿New Zealand john pitcairn

    It would be great to be able to work with container queries as well as media queries.

  • 🇺🇸United States mortona2k Seattle

    The layout config form would need to be modified to define breakpoints as a set of the current config.

    The config schema would also have to be modified to define the new object structure.

    The grid styles are injected to an inline attribute in CssGrid::build().

    Inline styles can't support media queries, but we could inject a style tag instead.

  • Status changed to Needs review 11 months ago
  • 🇺🇸United States mortona2k Seattle

    I modified the layout form to contain sets of breakpoints, with fields for media query settings (it's working, check it out!).

    Inline styles replaced with style element.

    I have the grid cells currently hardcoded to 4. That will have to be recalculated.

    I copied some code for setConfiguration from BootstrapLayoutBase. Currently we used the default NestedArray::mergeDeep, which was messing up the config values. This area might have bugs.

    Form validation needs to be updated.

    Form styling needs to be updated.

    We may be able to improve the translation between the layout config and form_state. Currently, columns and rows have an 'items' element containing the items, but this is only for working with the form structure. It's probably better to load the config values and prepare the form state from them.

    This probably needs to be in a 2.x branch since the data is changing, and a migration is needed to convert current settings into a breakpoint.

    I'm unsure if defining a config schema is helpful here? I was thinking it would help with validation and defaults.

  • 🇺🇸United States k_a_l

    This is looking great! I finally had the chance to test out the fork, and thank you, mortona2k, for your contributions. I completely agree—this seems like a strong candidate for a v2 release. Moving away from inline styles is essential for adding improvements and new features, so it’s great to see that shift happening.

    It’s been a while since I’ve reviewed this code, so I may need a bit more time to dive in and offer more detailed feedback. That said, I’m really pleased to see a solid solution addressing the known issue, along with several enhancements. Well done, and cheers!

  • 🇺🇸United States k_a_l
Production build 0.71.5 2024