Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
Problem/Motivation
The current Layout Builder ships with rudimentary styling, and has not been updated as the mockups have evolved.
Proposed resolution
https://projects.invisionapp.com/boards/KH3EPJMFNWR4Z
Remaining tasks
User interface changes
Yes
API changes
N/A
Data model changes
N/A
Comment | File | Size | Author |
---|---|---|---|
#23 | interdiff.txt | 1.16 KB | joelpittet |
#23 | 2916877-23.patch | 3.86 KB | joelpittet |
#19 | 2916877-layout-css-19.patch | 3.86 KB | tim.plunkett |
#19 | 2916877-layout-css-19-interdiff.txt | 1.99 KB | tim.plunkett |
#16 | 2916877-layout-css-16-interdiff.txt | 570 bytes | tim.plunkett |
Comments
Comment #2
larowlanComment #3
MaskOta CreditAttribution: MaskOta commentedDon't these mockups need to be updated first too? Unless i am misunderstanding something you are not managing the layout on the on the display of the node anymore.
Also we have links to add blocks in all regions which are not shown on the current mockup.
The button to remove the section is missing
Comment #4
EclipseGc CreditAttribution: EclipseGc at Acquia commentedThis particular mockup is indeed not completely accurate. Multiple blocks can be added to any region, and that doesn't seem to be reflected here.
Eclipse
Comment #5
tim.plunkettCorrect. Updated the IS with the link to the latest mocks
Comment #7
tim.plunkettComment #8
tim.plunkettTagging as this is currently on our shortlist.
Comment #9
DyanneNovaHere's a small patch to update the colors and add the plus button. The markup needs to be changed to move the delete button, and to move the blue background on add block to only the empty area. I'm working on the draggable affordance next, but this small patch gets us one step closer to the mockups.
This patch gets us to this state:
Comment #10
DyanneNovaThis patch adds a fix for the first issue in #2940212: [meta] Miscellaneous UI issues for the Layout Builder module, by adding a background and outline to blocks when dragging, along with adding visible drop zones for the dragged content.
Comment #11
tim.plunkettJust for paranoia's sake, can these be prefixed with .layout-section or something more top-level to prevent it from changing something else on the page? (I really hope there'd be nothing else, but you never know)
Usually we avoid !important, but in the case of jQuery UI there's not too much choice.
Comment #12
EclipseGc CreditAttribution: EclipseGc at Acquia commentedCan we get a different color for either the droppable area or the add block links? I wouldn't mind the add block links to be more "buttony" in their style and keep the blue drop zone styling as is. Thoughts?
Eclipse
Comment #13
DyanneNovaHere's a patch with prefixed ui classes, and I've set a placeholder class in the js, so that we don't need to use important now. Thanks for pointing that out and getting me thinking about that over again!
Comment #14
DyanneNovaI've changed the drop zone to a yellow to distinguish it from the add block regions. I think you're right, it makes sense to distinguish movement vs adding.
Comment #15
tim.plunkettThis looks great and is a huge step up from what we have, and can be iterated upon later.
Comment #16
tim.plunkett... except the change needs to be in the ES6 file, and transpiled to the regular JS file.
Fixing, and leaving at RTBC
Comment #17
EclipseGc CreditAttribution: EclipseGc at Acquia commented++ing the rtbc on this. Seems like a really good step.
Eclipse
Comment #18
lauriiiSorry that I haven't been able to give you feedback earlier. The UI improvements look great. There's one improvement that I wish we could do for the markup and the CSS:
The link should have a class so we don't have to use CSS the combinators. Something like .add-section__link would work.
Comment #19
tim.plunkettOkay
Comment #20
DyanneNovaThis looks good to me.
Comment #21
pifagorLooks good for me.
Comment #22
lauriiiThere's still following stylelint errors that are blocking the commit:
Comment #23
joelpittetHere's the stylelint fixes.
Comment #24
tim.plunkettComment #27
lauriiiThank you. The changes look good now.
Committed 377dddf and pushed to 8.6.x and cherry picked ad2a831 and pushed to 8.5.x. Thanks!
Ps. this patch was committed 41000ft. on top of East China Sea on the way to DrupalCon.