Gin Compatibility: Account for "open" vertical toolbar

Working on a patch.

MR15 replaces --gin-toolbar-width-collapsed with --gin-toolbar-x-offset and removes -4px/-3px margin adjustments which seem no longer necessary.

Gin actually uses --gin-toolbar-x-offset to position sub-menus. It is calculated using --gin-toolbar-width (for open toolbar) and --gin-toolbar-width-collapsed (for closed toolbar), and it also takes the screen width into account.

This change also (mostly) fixed another issue I noticed. Before the change, sub-menus had excessive margin/indentation with Environment Indicator enabled at screen widths < 976px — basically the "tablet" breakpoint (below, left). The extra margin was replaced, though, with a small negative margin that caused sub-menus to slightly overlap the border (below, middle). To resolve that, I removed the "-4px" margin adjustment that was previously introduced by #3309626: Integration with Gin Toolbar and Admin Toolbar → (below, right).

This worked well at all screen widths, at least with Gin 3.0-rc1. So much so, that I also removed the (seemingly redundant?) -3px margin adjustment that was being added to <li>s by environment_indicator.js.

I still plan to test with Gin 3.0-beta5, but it seems like the margin adjustments are no longer needed. I can only assume something in Gin changed that addressed the extra margin described in #3309626: Integration with Gin Toolbar and Admin Toolbar → .

I'm hoping someone else on Gin 3.0-rc1 can test these changes.

After testing with Gin 3.0-beta5, here's what I've learned:

The extra margin described in #3309626: Integration with Gin Toolbar and Admin Toolbar → still appears in beta5, but is no longer an issue in Gin 3.0-rc1. So, Environment Indicator no longer needs to include the negative margin adjustment for sites on Gin 3.0-rc1+. We can still support earlier versions with a fallback value:

/* TODO: Remove this when it's no longer necessary to support Gin 3.0@beta. */
@media (min-width: 61em) {
  [dir="ltr"] .gin--vertical-toolbar .toolbar-menu-administration > .toolbar-menu > .menu-item .toolbar-menu {
    margin-left: var(--gin-toolbar-x-offset, calc(var(--ginVerticalToolbarOffset) - 7px));
  }

  [dir="rtl"] .gin--vertical-toolbar .toolbar-menu-administration > .toolbar-menu > .menu-item .toolbar-menu {
    margin-right: var(--gin-toolbar-x-offset, calc(var(--ginVerticalToolbarOffset) - 7px));
  }
}

This consolidates the previous negative margin adjustments (-7px in total) in CSS, rather than having -4px in CSS, and -3px in JS. The media query prevents the margin issues at smaller breakpoints described in #4.

The margin adjustment is only applied to the fallback value (--ginVerticalToolbarOffset for beta5 and earlier), since RC1's --gin-toolbar-x-offset doesn't need it. In fact, when we use --gin-toolbar-x-offset, we're doing exactly what Gin is doing (as of RC1), so this block becomes redundant once it's no longer necessary to support older versions, and it can be removed entirely (per the TODO comment).

There is a more recent issue #3367093-8: Gin compatibility: Small screen vertical toolbar submenu items margin too big → where the css has been removed along with the js to support the latest versions of Gin, which is currently at 3.0.0-rc5.

This still fixes an issue with gin compatibility (even without the JS) but I will re-roll.

Here is what it looks like before the patch:

I guess I changed the code so Needs Review is appropriate, I deleted those CSS lines that were marked for removal

The patch works. Thanks! Changing to RTBC

The original issue might already be addressed by 🐛 Gin vertical toolbar submenu's overlap Active as I couldn't replicate the issue on there, so updating the issue to better support for Gin (by having a dedicated CSS file) as well as improving theming support by removing most of the inline styles and JS in favour of stylesheet inheritance via CSS custom properties in the form of --environment-indicator-background and --environment-indicator-color.

Looks like this could be a duplicate of 📌 Update module to use CSS variables instead of adding inline CSS. Active Sorry! Would you all be willing to review the merge request on that issue, and possibly add in anything from this issue that is required to combine the two?

Following along here since I'm looking for a fix for https://www.drupal.org/project/environment_indicator/issues/3504634 🐛 Updating from 4.0.19 to 4.0.21 changes the foreground color on non-admin pages Active . I'm hopeful that this issue will be the one that fixes everything!

PHPCS test failing on MR95. Also plain diff MR95 patch does not apply to 4.0.21

FYI I've added instructions to this module's .tugboat configuration file to install gin and gin_toolbar module, set gin as the default admin theme, and three environment switchers in order to help us test.

To view a demo site with a copy of the module installed with this merge request applied, click the view live preview link under this issue's summary.

To log in use these credentials
username: admin
password: admin

I've done the same on 📌 Update module to use CSS variables instead of adding inline CSS. Active If you'd like to review that alternate Merge request.

trackleft2 → changed the visibility of the branch 4.x to hidden.

I've updated MR !95 by merging in upstream changes and rearranging things a bit in order to be more in line with where the module is headed. In order to test you must now enable the environment_indicator_toolbar module.