Add new Layout: Dynamic Content Grid

Created on 1 September 2022, about 2 years ago
Updated 28 September 2023, 12 months ago

Problem/Motivation

Currently each DROWL Layout hast statically defined layout/breakpoint classes (small-12, medium-6, etc.).
In many situations this is really bad and inflexible.

Example:

Case A) 3 column layout, each cell has a video, lets say those videos should have a minium width of ~300px, so all controls are still clickable and the video doesn't become to small at all. So the cells should break already on all breakpoints smaller than large (currently this will break on screens smaller than medium).

Case B) 3 column layout, each cell with a simple icon in it ~32px width. This will also break on screens smaller than medium, what works, but looks crappy and wastes a lot of space.

Proposed resolution

Add a new layout called "Dynamic Content Grid". Technically this is a layout with only one region, the layout will be created from direct childs of this region by a CSS Grid or/and Flexbox. Using the child blocks/paragraphs as layout cells is a good thing at all in many situations and very flexible.

This layout needs the following options:
- Our layout regular alignment settings
- Class field
- Cell with by breakpoint (so one select for each breakpoint), values:
-- "unset"/"-"/"none" ...
-- Grid Column 1 ... 12
-- Automatic (fit content)
-- Min-Content
-- Max-Content
- Grid Gutter Width (select)
-- "default" => foundation grid gutter width
-- xxs - xxl (drowl base theme spacing classes)

Remaining tasks

[x]We need to define the layout, with the settings defined above.
[x] Review & optimize the PHP code: https://git.drupalcode.org/issue/drowl_layouts-3307235/-/commit/dd473283...
[x] Provide a Drupal library for "dynamic grids"
[x] Add required (S)CSS
[x] Add the required CSS classes in the layout template

Feature request
Status

Fixed

Version

4.0

Component

Miscellaneous

Created by

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.

  • Assigned to Grevil
  • Status changed to RTBC over 1 year ago
  • Status changed to Fixed over 1 year ago
  • Status changed to Needs work over 1 year ago
  • Status changed to Fixed over 1 year ago
  • Status changed to Needs work over 1 year ago
  • Got the following issue on a customer page while configuring this layout in a layout paragraph:

    Warning: Undefined array key "layout_dynamic_grid_behavoir" in Drupal\drowl_layouts\Plugin\Layout\DrowlLayoutsDynamicContentGridLayout->buildConfigurationForm()

  • 🇩🇪Germany Anybody Porta Westfalica

    @thomas.frobieter: @Grevil is still assigned, should he pick up the errors and fix them?

  • 🇩🇪Germany Grevil

    Sorry guys, seems that I skipped the email...

  • 🇩🇪Germany Grevil

    We haven't set any default values, that's why the errors appear.

  • 🇩🇪Germany Grevil

    Yep, setting the default configurations fixes this issue, but I have no idea what the defaults should be...

    @thomas.frobieter, please tell me the default configurations for:

      public function defaultConfiguration() {
        return parent::defaultConfiguration() + [
          // Add dynamic Layout settings:
          'layout_dynamic_grid_col_min_width' => 10, // ?
          'layout_dynamic_grid_col_max_width' => 10, // ?
          'layout_dynamic_grid_gutter_size' => 'md',
          'layout_dynamic_grid_behavoir' => 'auto-fit', // ?
        ];
      }
    
    • Grevil committed 6aaa7629 on 4.x
      Follow up fix to: Issue #3307235 Add new Layout: Dynamic Content Grid
  • Status changed to Fixed 12 months ago
  • 🇩🇪Germany Grevil

    Alright, talked with @thomas.frobieter internally. The defaults are fine. I'll create a new release ASAP!

  • Automatically closed - issue fixed for 2 weeks with no activity.

Production build 0.71.5 2024