Problem/Motivation

Discovered in #2938182: Design intuitive affordances for Layout Builder (for illustrating which parts of the page are editable in a given context)
The editible-area outline in Layout Builder uses a negative offset. This means that if the editable area does not have left or right margins, the left and right outlines are still visible at narrower widths. IE11, however, does not support negative widths, so the right and left outlines are not visible in IE11 on some themes.

left right outline not visible on umami

Proposed resolution

Use a different CSS approach that works in all browsers + Windows high-contrast mode.

Remaining tasks

Patch, review.

User interface changes

Left and right outlines visible in IE at narrower widths, when using themes where the editable area doesn't have Left/Right margins

API changes

NA

Data model changes

NA

Release notes snippet

NA

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

bnjmnm created an issue. See original summary.

bnjmnm’s picture

Status: Active » Needs review
FileSize
121.93 KB
127.46 KB
197.61 KB
215.98 KB
282.94 KB
498 bytes

Here is:

  • A patch
  • Before and after screenshots of IE11 and Umami, to show the fix
  • After screenshots of Chrome, Firefox and Safari, with the help text outline visible for comparison to demonstrate the container was not resized.
lauriii’s picture

Status: Needs review » Needs work
+++ b/core/modules/layout_builder/css/layout-builder.css
@@ -1,8 +1,7 @@
+  box-shadow: inset 0px 0px 0px 3px #2f91da;

We cannot use box-shadow for this because it is not visible in the Windows high contrast mode.

bnjmnm’s picture

Issue summary: View changes
Status: Needs work » Needs review
FileSize
482 bytes
440 bytes
164.45 KB
237.68 KB
131.39 KB
129.4 KB
125.16 KB
106.29 KB
238.06 KB

Took another look at how the .layout-builder element is incorporated on the page, and the sizing concerns that had me avoiding borders do not seem to an issue in this case, particularly since the element is already using padding. This patch just uses border and I've also provided screenshots for various browsers/settings.

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

Drupal 8.7.0-alpha1 will be released the week of March 11, 2019, which means new developments and disruptive changes should now be targeted against the 8.8.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

tim.plunkett’s picture

Priority: Normal » Major
Issue tags: +Layout Builder stable blocker

Tagging

DyanneNova’s picture

Status: Needs review » Reviewed & tested by the community

This looks good to me! I think the simpler border approach will also be easier to understand for themers who want to adjust the styling.

lauriii’s picture

tim.plunkett’s picture

Thanks for the reroll! +1 for RTBC

  • lauriii committed d4ddfe0 on 8.8.x
    Issue #3038413 by bnjmnm, lauriii, DyanneNova: Replace editable-area...
lauriii’s picture

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

Committed d4ddfe0 and pushed to 8.8.x. Thanks!

Leaving open for backport to 8.7.x.

  • lauriii committed c4420e5 on 8.7.x
    Issue #3038413 by bnjmnm, lauriii, DyanneNova: Replace editable-area...
lauriii’s picture

Status: Reviewed & tested by the community » Fixed

Cherry-picked to 8.7.x now that the commit freeze is over. Thank you everyone again!

Status: Fixed » Closed (fixed)

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