UI: footer and headers

dist/css/app.css

@@ -17392,6 +17392,7 @@ p:last-child {
 
 .typography ul li {
   list-style: none;
+  margin: 0.5em 0;
 }
 
 .typography ul li:before {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a2nt/ss-bootstrap-ui-webpack-boilerplate",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "author": "Tony Air <tony@twma.pro>",
   "license": "MIT",
   "description": "This UI Kit allows you to build Bootstrap 4 webapp with some extra UI features. It's easy to extend and easy to convert HTML templates to CMS templates.",

src/js/_components/_ui.header-footer.js

@@ -0,0 +1,65 @@
+'use strict';
+
+import Events from '../_events';
+
+const HeaderUI = (($) => {
+  const D = document;
+  const W = window;
+  const $Body = $('html,body');
+  const NAME = 'HeaderUI';
+  const CLASSNAME = `js${NAME}`;
+
+  class HeaderUI {
+    static init() {
+      const ui = this;
+      ui.dispose();
+
+      if (!$(`.${CLASSNAME}`).length) {
+        return;
+      }
+
+      console.log(`Initializing: ${NAME}`);
+
+      const $header = $('#Header,.jsHeaderUI');
+      const updateHeader = () => {
+        const h = $header.height();
+        const s = $Body.scrollTop();
+        if (s > h) {
+          $Body.addClass('shrink');
+        } else {
+          $Body.removeClass('shrink');
+        }
+      };
+
+      updateHeader();
+      $Body.on('scroll resize', () => {
+        updateHeader();
+      });
+
+      const updateFooter = (i, el) => {
+        const $el = $(el);
+        $el.css('height', 'auto');
+        const footerHeight = $el.height();
+
+        $el.css('margin-top', -footerHeight);
+        $el.siblings('.wrapper').css('padding-bottom', footerHeight);
+      };
+
+      $('.footer,.jsFooterUI').each(updateFooter);
+    }
+
+    static dispose() {
+      console.log(`Destroying: ${NAME}`);
+    }
+  }
+
+  $(W).on(`${Events.AJAX} ${Events.LOADED}`, () => {
+    HeaderUI.init();
+  });
+
+  W.HeaderUI = new HeaderUI();
+
+  return HeaderUI;
+})($);
+
+export default HeaderUI;

src/js/_main.js

@@ -11,6 +11,7 @@ import Spinner from './_components/_ui.spinner';
 import AjaxUI from './_components/_ui.ajax';
 
 import FormBasics from './_components/_ui.form.basics';
+import HeaderUI from './_components/_ui.header-footer';
 
 import SmoothScroll from 'smooth-scroll';
 const smoothScroll = SmoothScroll();

src/scss/types/editor.scss

@@ -114,6 +114,7 @@ ul {
 
     li {
         list-style: none;
+        margin: 0.5em 0;
 
         &:before {
             content: '\2022';