Merge branch 'fix/blurry-modals' into 'master'

Fix for blurry fonts in modals

See merge request !186

static/css/utils/modal.scss

@@ -1,27 +1,43 @@
-.modal {
+.modals-wrapper {
   position: fixed;
-  left: 50%;
+  left: 0;
-  top: 50%;
+  top: 0;
-  transform: translate(-50%, -50%) scale(0.8, 0.8);
+  width: 100%;
+  height: 100%;
+  z-index: -1;
   display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &.modals-wrapper--open {
+    z-index: 200;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.modal {
+  position: relative;
+  display: none;
   background-color: rgba(255, 255, 255, 1);
   min-width: 60vw;
+  max-width: 70vw;
   min-height: 100px;
   max-height: calc(100vh - 30px);
   border-radius: 2px;
   z-index: -1;
   color: var(--color-font);
-  padding: 0 65px 0 20px;
+  padding: 0 40px;
   overflow: auto;
   overscroll-behavior: contain;
   pointer-events: none;
   opacity: 0;
 
   &.modal--open {
+    display: flex;
     opacity: 1;
     pointer-events: auto;
     z-index: 200;
-    transform: translate(-50%, -50%) scale(1, 1);
     transition:
       opacity .2s .1s ease-in-out,
       transform .3s ease-in-out;

static/js/services/utilRegistry.js

@@ -144,12 +144,4 @@
     window.UtilRegistry.setupAll();
   });
 
-
-  // REMOVE ME. JUST HERE TO AVOID JS ERRORS
-  window.utils = {
-    setup: function(name) {
-      console.log('not really setting up', name);
-    },
-  };
-
 })();

static/js/utils/modal.js

@@ -37,9 +37,17 @@
 
   var MAIN_CONTENT_CLASS = 'main__content-body'
 
+  // one singleton wrapper to keep all the modals to avoid CSS bug
+  // with blurry text due to `transform: translate(-50%, -50%)`
+  // will be created (and reused) for the first modal that gets initialized
+  var MODALS_WRAPPER_CLASS = 'modals-wrapper';
+  var MODALS_WRAPPER_SELECTOR = '.' + MODALS_WRAPPER_CLASS;
+  var MODALS_WRAPPER_OPEN_CLASS = 'modals-wrapper--open';
+
   var modalUtil = function(element) {
 
-    var overlayElement = document.createElement('div');
+    var modalsWrapper;
+    var modalOverlay;
     var modalUrl;
 
     function _init() {
@@ -51,6 +59,8 @@
         return false;
       }
 
+      ensureModalWrapper();
+
       // param modalTrigger
       if (!element.dataset.modalTrigger) {
         throw new Error('Modal utility cannot be setup without a trigger element!');
@@ -63,8 +73,6 @@
         setupCloser();
       }
 
-      // setupForm();
-
       // mark as initialized and add modal class for styling
       element.classList.add(MODAL_INITIALIZED_CLASS, MODAL_CLASS);
 
@@ -75,6 +83,24 @@
       };
     }
 
+    function ensureModalWrapper() {
+      modalsWrapper = document.querySelector(MODALS_WRAPPER_SELECTOR);
+      if (!modalsWrapper) {
+        // create modal wrapper
+        modalsWrapper = document.createElement('div');
+        modalsWrapper.classList.add(MODALS_WRAPPER_CLASS);
+        document.body.appendChild(modalsWrapper);
+      }
+
+      modalOverlay = modalsWrapper.querySelector('.' + MODAL_OVERLAY_CLASS);
+      if (!modalOverlay) {
+        // create modal overlay
+        modalOverlay = document.createElement('div');
+        modalOverlay.classList.add(MODAL_OVERLAY_CLASS);
+        modalsWrapper.appendChild(modalOverlay);
+      }
+    }
+
     function setupTrigger() {
       var triggerSelector = element.dataset.modalTrigger;
       if (!triggerSelector.startsWith('#')) {
@@ -96,7 +122,7 @@
       element.insertBefore(closerElement, null);
       closerElement.classList.add(MODAL_CLOSER_CLASS);
       closerElement.addEventListener('click', onCloseClicked, false);
-      overlayElement.addEventListener('click', onCloseClicked, false);
+      modalOverlay.addEventListener('click', onCloseClicked, false);
     }
 
     function onTriggerClicked(event) {
@@ -116,11 +142,10 @@
     }
 
     function open() {
-      document.body.insertBefore(element, null);
       element.classList.add(MODAL_OPEN_CLASS);
-      overlayElement.classList.add(MODAL_OVERLAY_CLASS);
+      modalOverlay.classList.add(MODAL_OVERLAY_OPEN_CLASS);
-      document.body.insertBefore(overlayElement, element);
+      modalsWrapper.classList.add(MODALS_WRAPPER_OPEN_CLASS);
-      overlayElement.classList.add(MODAL_OVERLAY_OPEN_CLASS);
+      modalsWrapper.appendChild(element);
 
       if (modalUrl) {
         fillModal(modalUrl);
@@ -130,8 +155,9 @@
     }
 
     function close() {
-      overlayElement.classList.remove(MODAL_OVERLAY_OPEN_CLASS);
+      modalOverlay.classList.remove(MODAL_OVERLAY_OPEN_CLASS);
       element.classList.remove(MODAL_OPEN_CLASS);
+      modalsWrapper.classList.remove(MODALS_WRAPPER_OPEN_CLASS);
 
       document.removeEventListener('keyup', onKeyUp);
     };