IMPR: UI Header shink

src/js/_components/_ui.ajax.js

@@ -283,7 +283,7 @@ const AjaxUI = (($) => {
       }*/
     },
     restoreAll: () => {
-      for (const url in $.xhrPool.requests) {
+      for (let url in $.xhrPool.requests) {
         const jqXHR = $.xhrPool.requests[url];
         $.ajax(jqXHR.opts);
         console.log(`AJAX request is restored (${jqXHR.opts.url})`);

src/js/_components/_ui.shrink.js

@@ -1,15 +1,34 @@
-"use strict";
+'use strict';
 
 import $ from 'jquery';
+import Events from '../_events';
 
 const ShrinkUI = (($) => {
   // Constants
-  const G = window;
+  const W = window;
   const D = document;
+  const NAME = 'ShrinkUI';
 
-  // shrink bar
-  $(G).scroll(() => {
-    if ($(D).scrollTop() > 100) {
+  console.log(`${NAME}: init`);
+
+  $(W).on(`${Events.LOADED} ${Events.SCROLL} ${Events.RESIZE}`, () => {
+    let h1 = $('#SiteWideMessage').height();
+    if (!h1) {
+      h1 = 0;
+    }
+    let h2 = $('#SiteWideOffline').height();
+    if (!h2) {
+      h2 = 0;
+    }
+
+    let h3 = $('#Header').height();
+    if (!h3) {
+      h3 = 0;
+    }
+
+    const headerHeight = h1 + h2 + h3;
+
+    if ($(D).scrollTop() > headerHeight) {
       $('body').addClass('shrink');
     } else {
       $('body').removeClass('shrink');

src/js/_main.js

@@ -89,7 +89,7 @@ const MainUI = (($) => {
   };
 
   W.addEventListener(
-    'offline',
+    `${Events.OFFLINE}`,
     () => {
       updateOnlineStatus();
     },
@@ -97,14 +97,14 @@ const MainUI = (($) => {
   );
 
   W.addEventListener(
-    'online',
+    `${Events.ONLINE}`,
     () => {
       updateOnlineStatus();
     },
     false,
   );
 
-  W.addEventListener('load', () => {
+  W.addEventListener(`${Events.LOADED}`, () => {
     updateOnlineStatus();
   });
 
@@ -430,7 +430,7 @@ const MainUI = (($) => {
           AjaxUI.preload([lazySrc]).then(() => {
             $el.attr('src', lazySrc);
 
-            $el.on('load', () => {
+            $el.on(`${Events.LOADED}`, () => {
               $el.addClass('loaded');
               $el.removeClass('loading');
 
@@ -491,7 +491,7 @@ const MainUI = (($) => {
     MainUI.init();
   });
 
-  $(W).on('resize', () => {
+  $(W).on(`${Events.RESIZE}`, () => {
     MainUI.detectBootstrapScreenSize();
   });
 

src/scss/types/cms.scss

@@ -71,7 +71,7 @@ body.cms {
 		display: none;
 	}
 
-	.mce-edit-area {
+	/*.mce-edit-area {
 		height: 5em;
 		iframe {
 			height: 5em !important;
@@ -79,16 +79,17 @@ body.cms {
 	}
 	.form-control.textarea {
 		height: 13.5em;
-	}
+	}*/
 }
 
 .fields-row {
 	margin: 0 !important;
-	padding: 0;
-	width: 90%;
+	padding: 0 0 2em !important;
+	width: 100%;
+
 	.form__fieldgroup {
 		margin: 0 !important;
-		padding: 0;
+		padding: 0 !important;
 		width: 100% !important;
 		max-width: 100% !important;
 		flex: 0 0 100% !important;
@@ -96,6 +97,7 @@ body.cms {
 		flex-wrap: wrap;
 		> .form-group {
 			padding: 0 1rem;
+			margin: 0 !important;
 			flex: 1 1 50%;
 			max-width: 50%;
 		}