Subsites page builder unusable in Gin

[andybroomfield]

Trying to edit and add new page builder layouts or existing paragraphs and the modal goes off the page.

How are people solving this on existing sites?

[willguv]

@andybroomfield I made my window bigger, which is OK on the iMac but not on my laptop. This needs a fix ideally

[msayoung]

Yes, it's pretty frustrating. Zooming out helps.

I think this is the rationale for this issue, but not sure where it's at: https://github.com/localgovdrupal/localgov_subsites/issues/57

[graham-web]

I looked at this a little previously.

It's quite similar to this issue (Layout Paragraphs started as a fork of Entity Reference Layout)

As comment 6 on there highlights, "The module adds the ui-dialog within the details wrapper." i.e. the modal dialog is stuck in a stacking context where merely changing the z-index doesn't help avoid the other elements on the page. Forcing the dialog to spawn in a different part of the page did correct the problem, but I didn't find the right combination [yet] to stop it messing up the positioning of the "add paragraph" popup...

[markconroy]

I think that issue is related to this Vertical Tabs Overflow one.

[andybroomfield]

I solved it with jQuery. If one of the Javascript wizards can convert this to vanillia javascript.

/**
 * @file
 *  Fix layout paragrpahs in Gin.
 */
(function ($, Drupal) {
  // Attach after an ajax refresh
  Drupal.behaviors.bhcc_fix_layout_paragraphs = {
    attach: function(context, settings) {
      $('.ui-dialog.layout-paragraphs-dialog', context).each(function() {
        var base_form = $(this).closest('form');
        var overlay = $('.ui-widget-overlay.ui-front');
        var base_field = $(this).closest('.field--type-entity-reference-revisions');
        var placeholder = $('<div>', {
          class: 'js-layout-paragraph-base-field-placeholder',
        });
        if (!$(this).hasClass('js-modal-moved')) {
          // Add the placeholder so the field can be moved back.
          base_field.before(placeholder);

          // Move the overlay and the base field.
          overlay.appendTo(base_form);
          base_field.appendTo(base_form);
          $(this).addClass('js-modal-moved');

          // When modal is removed, move the base field back.
          $(this).on('remove', function() {
            placeholder.replaceWith(base_field);
          });
        }
      });
    }
  }

})(jQuery, Drupal);

[markconroy]

@andybroomfield

I can convert that. Where did you put it, in a custom module, or a fork of the gin theme, or somewhere else?

[andybroomfield]

@markconroy Thanks, its a very quick and dirty custom module. Open to how this should be done the proper way and if it should feedback to Gin developers.

bhcc_layout_paragraphs.zip

[andybroomfield]

Did this get added anywhere? Checking if still a live issue, or should we make the module I wrote to fix it more widley avalible?

[markconroy]

I started working on it before Christmas but only had an hour or two.

I'll try get back to it tomorrow. I'm creating a custom module for it but I think it might be best placed in localgov_core.module and then ripped out when not needed. A custom module might be overkill.

[markconroy]

Hi @andybroomfield

I have this rewritten in vanilla JS and saved in a custom "theme improvements" module to try make it generic (and so we can use the same module for other theme fixes if we ever need them.

Can you have a little test of this and see if you think it's okay to propose to become part of localgov_core or somewhere else?

localgov_admin_theme_improvements.zip

[andybroomfield]

Hi @markconroy I've tested this and it works great, thanks.

No probs this being part of Localgov_core (as a submodule I guess). Would we consider sending this upstream to layout paragraphs or gin?

Should we check that Gin is the admin theme before enabling it?

[finnlewis]

Discussing this in Merge Monday: where this should live.

Possibilities: localgov_core? localgov profile? a separate module?

Is this specific to Gin? Claro?

Perhaps a sub-module of the profile or localgov_core https://github.com/localgovdrupal/localgov_core/tree/2.x/modules

Suggestion is to place this as a sub-module in localgov_core, we can then all move it later if needed.

[markconroy]

Let's close this, in favour of this https://github.com/localgovdrupal/localgov_core/pull/119