Problem/Motivation

Problem/Motivation

The sidebar for adding blocks and sections in layout builder has a jQuery resize option, but it is not usable because the z-index is too low.

Steps to reproduce:

  1. Install Drupal and enable layout builder module
  2. Enable layout builder on a content type
  3. Click manage layout
  4. Click Add block or Add section
  5. Try to resize the sidebar - no resize option appears

Proposed resolution

Increase the z-index of the element so it is usable.

Remaining tasks

Approval of the color, see #8.

User interface changes

Makes the UI resize element visible.

Before:

Screencast:
https://www.screencast.com/t/tFpQcSv3q8

After patch in #2:


Screencast:
https://www.screencast.com/t/Xd5YttSnxwM2

CommentFileSizeAuthor
#27 3133927-27.patch1.16 KB_utsavsharma
#27 interdiff_16-27.txt1.09 KB_utsavsharma
#24 3133927-nr-bot.txt1.57 KBneeds-review-queue-bot
#16 3133927-16.patch565 bytesgauravvvv
#14 Screenshot 2021-04-11 at 15.49.59.png104.45 KBgauravvvv
#14 Screenshot 2021-04-11 at 15.48.28.png47.04 KBgauravvvv
#14 3133927-14.patch567 bytesgauravvvv
#12 Screenshot 2021-04-11 at 15.35.54.png341.35 KBgauravvvv
#8 Screenshot 2020-07-02 15.31.53.png35.89 KBpameeela
#8 Screenshot 2020-07-02 15.25.39.png36.49 KBpameeela
#2 3133927-layout-builder-handle-zindex.patch584 byteschristopherdoherty

Comments

christopherdoherty created an issue. See original summary.

christopherdoherty’s picture

christopherdoherty commented
StatusFileSize
new 3133927-layout-builder-handle-zindex.patch584 bytes
cyb_tachyon’s picture

cyb_tachyon commented
Status: Active » Needs review

This is looking great! Can confirm #2 solves some real UX issues with LB.

ryan.ryan’s picture

ryan.ryan commented

Patch applies cleanly here, thanks!

BalajiDS’s picture

BalajiDS commented
Issue summary: View changes

patch #2 works fine in Drupal - 8.8.6, thanks

Version: 8.8.x-dev » 8.9.x-dev

Drupal 8.8.7 was released on June 3, 2020 and is the final full bugfix release for the Drupal 8.8.x series. Drupal 8.8.x will not receive any further development aside from security fixes. Sites should prepare to update to Drupal 8.9.0 or Drupal 9.0.0 for ongoing support.

Bug reports should be targeted against the 8.9.x-dev branch from now on, and new development or disruptive changes should be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

tim.plunkett’s picture

tim.plunkett
he/him
Primary language English
Location Philadelphia
commented
Version: 8.9.x-dev » 9.1.x-dev
Issue summary: View changes
Status: Needs review » Needs work
Issue tags: +Needs screenshots

Please provide before and after screenshots and fill out the issue summary, thanks!

pameeela’s picture

pameeela commented
Issue summary: View changes
Status: Needs work » Needs review
Issue tags: -Needs screenshots
StatusFileSize
new Screenshot 2020-07-02 15.25.39.png36.49 KB
new Screenshot 2020-07-02 15.31.53.png35.89 KB

Updated IS and added screenshots and screencasts as it is kind of impossible to capture in a screenshot.

The patch works and I like the idea of making it wider so it's easy to grab, but I'm not sure about the blue colour? If others thing the blue works then this can be RTBC.

pameeela’s picture

pameeela commented
Issue tags: +Bug Smash Initiative

Version: 9.1.x-dev » 9.2.x-dev

Drupal 9.1.0-alpha1 will be released the week of October 19, 2020, which means new developments and disruptive changes should now be targeted for the 9.2.x-dev branch. For more information see the Drupal 9 minor version schedule and the Allowed changes during the Drupal 9 release cycle.

quietone’s picture

quietone commented
Issue summary: View changes

The patch still applies to 9.2.x.

This is waiting on approval of the color. I will ask in #ux for comments.

gauravvvv’s picture

gauravvvv commented
StatusFileSize
new Screenshot 2021-04-11 at 15.35.54.png341.35 KB

This color is not passing the accessibility test.

Adding screenshot for reference.

Moving to NW.

gauravvvv’s picture

gauravvvv commented
Status: Needs review » Needs work
gauravvvv’s picture

gauravvvv commented
StatusFileSize
new 3133927-14.patch567 bytes
new Screenshot 2021-04-11 at 15.48.28.png47.04 KB
new Screenshot 2021-04-11 at 15.49.59.png104.45 KB

I have provided the patch with the background color as #fff. Also after and before patch screenshot for reference.

gauravvvv’s picture

gauravvvv commented
Status: Needs work » Needs review
gauravvvv’s picture

gauravvvv commented
StatusFileSize
new 3133927-16.patch565 bytes
quietone’s picture

quietone commented

@Gauravmahlawat, thanks. When making a screen shot it is helpful to update the Issue Summary by removing the old after screenshot and replacing it with the one you made. It saves a lot of time for reviewers. The test didn't run because the patch failed to pass the code quality tests. You can setup your local environment to run these test.

It helps to know that the color used in #2 doesn't pass usability tests. The current patch passes those usability tests but does the color 'fit' with any Drupal standard for this?

gauravvvv’s picture

gauravvvv commented

@quietone, I am not sure the white color is a perfect fit here or not. I just review the other components of that sidebar and found we are basically using two color's light blue and white. Light blue failed in the accessibility test so I thought white would work here.
Can you suggest any color here?

Thank you for

run these test

I was not aware of it. Will use it for sure.

Version: 9.2.x-dev » 9.3.x-dev

Drupal 9.2.0-alpha1 will be released the week of May 3, 2021, which means new developments and disruptive changes should now be targeted for the 9.3.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

larowlan’s picture

larowlan
Location 🇦🇺🏝.au GMT+10
commented

Is this still an issue? I've been able to resize the sidebar in a custom project recently

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.5.x-dev » 10.1.x-dev

Drupal 9.5.0-beta2 and Drupal 10.0.0-beta2 were released on September 29, 2022, which means new developments and disruptive changes should now be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

needs-review-queue-bot’s picture

needs-review-queue-bot commented
Status: Needs review » Needs work
StatusFileSize
new 3133927-nr-bot.txt1.57 KB

The Needs Review Queue Bot tested this issue. It either no longer applies to Drupal core, or fails the Drupal core commit checks. Therefore, this issue status is now "Needs work".

Apart from a re-roll or rebase, this issue may need more work to address feedback in the issue or MR comments. To progress an issue, incorporate this feedback as part of the process of updating the issue. This helps other contributors to know what is outstanding.

Consult the Drupal Contributor Guide to find step-by-step guides for working with issues.

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

bwaindwain’s picture

bwaindwain commented
Related issues: +#3102865: Add RTL support for off-canvas dialog
_utsavsharma’s picture

_utsavsharma commented
StatusFileSize
new interdiff_16-27.txt1.09 KB
new 3133927-27.patch1.16 KB

Fixed CCF in #16.

gauravvvv’s picture

gauravvvv commented

Updated attributions

danielveza’s picture

danielveza
he/him
Location Brisbane, AU
commented
Issue tags: +Needs title update, +Needs issue summary update

The resize handler works as expected now, confirmed by @larowlan in #21 and I've also manually tested it on a fresh install of Drupal 11.

Therefore the title and the IS are now outdated and this issue needs to be rescoped to fixing the color of the resizable section of the off canvas. I'm not 100% sure what this should be re-titled as so I've left it be for the moment

Version: 11.x-dev » main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Read more in the announcement.