Commit 6174765d authored by Thomas Frobieter's avatar Thomas Frobieter
Browse files

Issue #3303238: Quickfix Core Modal behavoir: Weird jumping and resizing

parent 3034ba93

css/drowl_admin.theme_overrides.gin.min.css

+1 −1
Original line number Diff line number Diff line 
.ui-dialog .ui-widget-content.ui-dialog-content{max-height:calc(100vh - 10rem)!important}
 
 No newline at end of file
 
.ui-dialog.ui-widget-content{position:fixed!important;top:50%!important;width:100%!important;max-width:1350px!important;max-height:calc(100vh - 2rem)!important;left:50%!important;transform:translate(-50%,-50%)!important;margin:0 1rem!important;display:flex!important;flex-direction:column!important;box-shadow:0 0 30px rgba(0,0,0,.15)!important}.ui-dialog.ui-widget-content~.ui-dialog.ui-widget-content{box-shadow:0 20px 30px rgba(0,0,0,.25),0 0 100px rgba(0,0,0,.5),0 0 800px 100px rgba(255,255,255,.9)!important}.ui-dialog .ui-widget-content.ui-dialog-content{max-height:calc(100vh - 10rem)!important}.drowl-admin--core-dialog-open{overflow-y:hidden}
 
 No newline at end of file

drowl_admin.libraries.yml

+2 −0
Original line number Diff line number Diff line
@@ -34,6 +34,8 @@ admin_theme_overrides_gin: 
  css:

    theme:

      css/drowl_admin.theme_overrides.gin.min.css: { minimized: true }

  js:

    js/drowl_admin.core_dialog_enhancements.min.js: { minified: true }

  dependencies:

    - drowl_admin/admin

admin_theme_overrides_adminimal:

js/drowl_admin.core_dialog_enhancements.js

0 → 100644
+24 −0
Original line number Diff line number Diff line 
(function ($, Drupal) {

  Drupal.behaviors.drowl_admin_core_dialog_enhancements = {

    attach: function (context, settings) {

      // Add body classes if a modal is currently opened or not.

      // We use them in drowl_admin.theme_overrides.gin.scss to block

      // disturbing body scrolling while a modal is opened.

      $(window)

        .once("drowl-admin-core-dialog-enhancements")

        .on("dialog:beforecreate", function () {

          $("body:first").addClass("drowl-admin--core-dialog-open");

        })

        .on("dialog:aftercreate", function () {

          $("body:first").addClass("drowl-admin--core-dialog-open");

        })

        .on("dialog:beforeclose", function () {

          $("body:first").removeClass("drowl-admin--core-dialog-open");

        })

        .on("dialog:afterclose", function () {

          $("body:first").removeClass("drowl-admin--core-dialog-open");

        });

    },

  };

})(jQuery, Drupal);

s;

js/drowl_admin.core_dialog_enhancements.min.js

0 → 100644
+1 −0
Original line number Diff line number Diff line 
"use strict";!function(n){Drupal.behaviors.drowl_admin_core_dialog_enhancements={attach:function(o,e){n(window).once("drowl-admin-core-dialog-enhancements").on("dialog:beforecreate",function(){n("body:first").addClass("drowl-admin--core-dialog-open")}).on("dialog:aftercreate",function(){n("body:first").addClass("drowl-admin--core-dialog-open")}).on("dialog:beforeclose",function(){n("body:first").removeClass("drowl-admin--core-dialog-open")}).on("dialog:afterclose",function(){n("body:first").removeClass("drowl-admin--core-dialog-open")})}}}(jQuery),s;
 
 No newline at end of file

scss/drowl_admin.theme_overrides.gin.scss

+31 −2
Original line number Diff line number Diff line
@@ -3,9 +3,38 @@ 
@import "./node_modules/drowl-sass-base/all_mixins";



// Enhancements for the GIN Admin Theme

.ui-dialog.ui-widget-content {

  position: fixed !important;

  top: 50% !important;

  width: 100% !important;

  max-width: 1350px !important;

  max-height: calc(100vh - 2rem) !important;

  left: 50% !important;

  transform: translate(-50%, -50%) !important;

  margin: 0 1rem !important;

  display: flex !important;

  flex-direction: column !important;

  box-shadow: 0 0 30px rgba(0, 0, 0, 0.15) !important;

  ~ .ui-dialog.ui-widget-content {

    // Larger drop shadow for further, overlaying, dialogs

    box-shadow: 0px 20px 30px rgba(0, 0, 0, 0.25),

      0px 0px 100px rgba(0, 0, 0, 0.5),

      0px 0px 800px 100px rgba(255, 255, 255, 0.9) !important;

  }

}



// Set a max-height for ui-dialogs - otherwise no scrollbar appears

// and high dialogs getting cut off if heigher then the viewport.

.ui-dialog .ui-widget-content.ui-dialog-content {

  max-height: calc(100vh - 10rem) !important;

}



// Prevent body from being scrolled in the background while the dialog is open

.drowl-admin--core-dialog-open {

  // This is not perfect, because the vertical scrollbar disappears,

  // what cause a little horizontal jump of the whole body.

  // But seems to be okay for now, as it just happens while the modal

  // is opening, and the user not started to interact with it in

  // this second.

  overflow-y: hidden;

}