Improve the modal block layout UI

Created on 29 November 2024, about 2 months ago

Problem/Motivation

The UX for the modal would be improved if the blocks were displayed within the UI as "Cards" as opposed to a stacked list.

Steps to reproduce

D10.3.10 Umami with:

  1. Admin Toolbar 3.5.1
  2. Layout Builder Browser 8.x-1.7
  3. Layout Builder Modal 2.0.0
  4. Layout Builder Restrictions 3.0.0
  5. Umami 10.3.10 (default theme)

Create two Block categories under the LBB config pages - one open by default and one closed by default. Add two Blocks to each with some images on both.

Proposed resolution

Use a Card layout for each block with each image sat above the block description, so multiple blocks appear horizontally across the page. Tis would make better use of the modal window's size and shape, which currently looks a bit bare. Resize the image, so it always fits within the card and all descriptions align even when the source images have different aspect ratios. Better CSS for hover would further improve the UI.

Something like this:

Remaining tasks

User interface changes

API changes

Data model changes

Feature request
Status

Active

Version

1.7

Component

User interface

Created by

🇬🇧United Kingdom dunx

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

Comments & Activities

  • Issue created by @dunx
  • 🇬🇧United Kingdom dunx

    I see from one of the module page images, that it is supposed to be a card display, so could be theme related. The layout should come from the module though and not rely on having a particular theme installed.

Production build 0.71.5 2024