Merge pull request #155 from localgovdrupal/feature/64467-homepage-de…

…sign-updates Feature/64467 homepage design updates
localgovdrupal · Sep 25, 2024 · 26cab17 · 26cab17
2 parents a35ba63 + f84c173
commit 26cab17
Show file tree

Hide file tree

Showing 468 changed files with 16,588 additions and 6,520 deletions.
diff --git a/config/sync/block.block.builtwith.yml b/config/sync/block.block.builtwith.yml
@@ -8,8 +8,8 @@ dependencies:
     - lgd_org_theme
 id: builtwith
 theme: lgd_org_theme
-region: lower_footer_first
-weight: -7
+region: lower_footer_second
+weight: -21
 provider: null
 plugin: lgd_org_blocks_builtwith
 settings:

diff --git a/config/sync/block.block.footer.yml b/config/sync/block.block.footer.yml
@@ -11,7 +11,7 @@ dependencies:
 id: footer
 theme: lgd_org_theme
 region: footer
-weight: -18
+weight: -21
 provider: null
 plugin: 'system_menu_block:footer'
 settings:

diff --git a/config/sync/block.block.footerlogos.yml b/config/sync/block.block.footerlogos.yml
@@ -15,7 +15,7 @@ third_party_settings:
 id: footerlogos
 theme: lgd_org_theme
 region: lower_footer_third
-weight: -12
+weight: -21
 provider: null
 plugin: 'block_content:f6ff6fd8-a3a9-4ae1-b32d-3676d7b4ba40'
 settings:

diff --git a/config/sync/block.block.lgd_org_theme_footerlogosfundedby.yml b/config/sync/block.block.lgd_org_theme_footerlogosfundedby.yml
@@ -8,8 +8,8 @@ dependencies:
     - lgd_org_theme
 id: lgd_org_theme_footerlogosfundedby
 theme: lgd_org_theme
-region: lower_footer_third
-weight: 0
+region: footer
+weight: -19
 provider: null
 plugin: lgd_org_footer_logos
 settings:

diff --git a/config/sync/block.block.lgd_org_theme_odclogo.yml b/config/sync/block.block.lgd_org_theme_odclogo.yml
@@ -1,6 +1,6 @@
 uuid: 67da9865-791a-4635-9cac-36033c188323
 langcode: en
-status: true
+status: false
 dependencies:
   module:
     - lgd_org_blocks
@@ -9,7 +9,7 @@ dependencies:
 id: lgd_org_theme_odclogo
 theme: lgd_org_theme
 region: footer
-weight: -16
+weight: -18
 provider: null
 plugin: lgd_org_odc
 settings:

diff --git a/config/sync/block.block.lgd_org_theme_social.yml b/config/sync/block.block.lgd_org_theme_social.yml
@@ -9,7 +9,7 @@ dependencies:
 id: lgd_org_theme_social
 theme: lgd_org_theme
 region: footer
-weight: -17
+weight: -20
 provider: null
 plugin: lgd_org_social
 settings:

diff --git a/config/sync/block.block.views_block__council_logos_block_1.yml b/config/sync/block.block.views_block__council_logos_block_1.yml
@@ -11,7 +11,7 @@ dependencies:
 id: views_block__council_logos_block_1
 theme: lgd_org_theme
 region: footer
-weight: -15
+weight: -17
 provider: null
 plugin: 'views_block:council_logos-block_1'
 settings:

diff --git a/web/libraries/mmenu-js-9.3.0.tar.gz b/web/libraries/mmenu-js-9.3.0.tar.gz
diff --git a/web/libraries/mmenu/README.md b/web/libraries/mmenu/README.md
@@ -1,4 +1,5 @@
-# mmenu.js
+mmenu.js
+================
 
 The best javascript plugin for app look-alike on- and off-canvas menus with sliding submenus for your website and webapp. It is very customizable through a wide range of options, extensions and add-ons and it will always fit your needs.
 
@@ -8,18 +9,23 @@ Working on a WordPress site? Check out [the mmenu WordPress plugin](https://mmen
 <img src="https://mmenujs.com/img/preview-mmenu.png" alt="mmenu.js" width="100%" />
 
 ### Licence
-
 The mmenu javascript plugin is licensed under the [CC-BY-NC-4.0 license](http://creativecommons.org/licenses/by-nc/4.0/).<br />
 You can [purchase a license](https://mmenujs.com/download.html) if you want to use it in a commercial project.
 
 ### Learn more
-
--   [Tutorial](https://mmenujs.com/tutorials/off-canvas/)
--   [Options](https://mmenujs.com/documentation/core/options.html)
--   [Add-ons](https://mmenujs.com/documentation/addons/)
--   [API](https://mmenujs.com/documentation/core/api.html)
++ [Tutorial](https://mmenujs.com/tutorials/off-canvas/)
++ [Options](https://mmenujs.com/documentation/core/options.html)
++ [Extensions](https://mmenujs.com/documentation/extensions/)
++ [Add-ons](https://mmenujs.com/documentation/addons/)
++ [API](https://mmenujs.com/documentation/core/api.html)
 
 ### Browser support
-
-As of version 9, the mmenu.js plugin only supports [ECMAScript 6 compliant browsers](https://kangax.github.io/compat-table/es6/).<br />
-For Internet Explorer 11, you can use the latest of version 8 and use polyfills where needed.
+As of version 8, the mmenu.js plugin only supports [ECMAScript 6 compliant browsers](https://kangax.github.io/compat-table/es6/).<br />
+For Internet Explorer 10 and 11, you''ll need [some polyfills](https://polyfill.io/v3/polyfill.min.js?features=default%2CElement.prototype.matches%2CElement.prototype.prepend%2CElement.prototype.closest).<br />
+[Version 7](https://github.com/FrDH/jQuery.mmenu/releases/tag/v7.2.2) should work to some degree in Internet Explorer 9, but you'll need a [matchMedia polyfill](https://polyfill.io/v3/polyfill.min.js?features=default%2CmatchMedia),
+[version 6](https://github.com/FrDH/jQuery.mmenu/releases/tag/v6.1.8) should work in Internet Explorer 9 without any shortcomings.</p>
+
+### Development
+This project uses [Gulp(4)](http://gulpjs.com/) to compile, minify and concatenate the TS/JS and SCSS/CSS files.
+If you are unfamiliar with Gulp, check [this tutorial](https://travismaynard.com/writing/getting-started-with-gulp) on how to get started.<br />
+Run `gulp watch` in the command-line to put a watch on the files and run all scripts immediately after saving your changes.
diff --git a/web/libraries/mmenu/demo/advanced.html b/web/libraries/mmenu/demo/advanced.html
@@ -18,40 +18,47 @@
         <link rel="stylesheet" href="../dist/mmenu.css" />
 
         <style>
-            .mm-wrapper--sidebar-expanded.mm-wrapper--opened #header a {
-                display: none;
+            :root {
+                --mm-sidebar-expanded-size: 300px;
+            }
+            .mm-menu {
+                --mm-listitem-size: 50px;
+                --mm-navbar-size: 50px;
             }
 
-            .mm-navbar--tabs span {
-                display: inline-block;
-                margin-inline-start: 8px;
+            @media (min-width: 992px) {
+                .header a {
+                    display: none;
+                }
             }
 
+            .mm-navbar_tabs span {
+                display: inline-block;
+                margin-left: 8px;
+            }
             @media (max-width: 450px) {
-                .mm-navbar--tabs span {
+                .mm-navbar_tabs span {
                     display: none;
                 }
             }
         </style>
     </head>
-
     <body>
         <div id="page">
-            <div id="header">
+            <div class="header">
                 <a href="#menu"><span></span></a>
                 Demo
             </div>
-            <div id="content">
-                <h1>This is a demo.</h1>
-                <p>Click the menu icon to open the menu.</p>
+            <div class="content">
+                <p>
+                    <strong>This is an advanced demo.</strong><br />
+                    Click the menu icon to open the menu.
+                </p>
             </div>
             <nav id="menu">
                 <div id="panel-menu">
                     <ul>
-                        <li>
-                            <a href="#/">Home</a>
-                            <input type="checkbox" class="mm-toggle" />
-                        </li>
+                        <li><a href="#/">Home</a></li>
                         <li>
                             <span>About us</span>
                             <ul>
@@ -75,15 +82,17 @@ <h1>This is a demo.</h1>
                     </ul>
                 </div>
 
-                <ul id="panel-account" data-mm-title="Account">
-                    <li><a href="#/">My profile</a></li>
-                    <li><a href="#/">Privacy settings</a></li>
-                    <li><a href="#/">Activity</a></li>
-                    <li><a href="#/">Sign out</a></li>
-                </ul>
+                <div id="panel-account">
+                    <ul>
+                        <li><a href="#/">My profile</a></li>
+                        <li><a href="#/">Privacy settings</a></li>
+                        <li><a href="#/">Activity</a></li>
+                        <li><a href="#/">Sign out</a></li>
+                    </ul>
+                </div>
 
-                <div id="panel-cart" data-mm-title="Shopping cart">
-                    <p style="text-align: center; padding-top: 30px">
+                <div id="panel-cart">
+                    <p style="text-align: center; padding-top: 30px;">
                         Your shoppingcart is empty.<br />
                         <a href="#/">Continue shopping.</a>
                     </p>
@@ -92,27 +101,20 @@ <h1>This is a demo.</h1>
         </div>
 
         <!-- mmenu scripts -->
+        <script src="../dist/mmenu.polyfills.js"></script>
         <script src="../dist/mmenu.js"></script>
         <script>
             new Mmenu(
-                document.querySelector("#menu"),
+                document.querySelector('#menu'),
                 {
-                    theme: "white",
-                    setSelected: {
-                        hover: true,
-                        parent: true,
-                    },
-                    counters: {
-                        add: true,
-                    },
+                    extensions: ['theme-dark', 'shadow-page'],
+                    setSelected: true,
+                    counters: true,
                     searchfield: {
-                        add: true,
-                        placeholder: "Search menu items",
-                        splash: "<p>What are you looking for?</p>",
-                        title: "Search",
+                        placeholder: 'Search menu items',
                     },
                     iconbar: {
-                        use: "(min-width: 450px)",
+                        use: '(min-width: 450px)',
                         top: [
                             '<a href="#/"><span class="fa fa-home"></span></a>',
                         ],
@@ -122,52 +124,52 @@ <h1>This is a demo.</h1>
                             '<a href="#/"><span class="fa fa-youtube"></span></a>',
                         ],
                     },
-                    iconPanels: {
-                        add: true,
-                        visible: 1,
-                    },
                     sidebar: {
                         collapsed: {
-                            use: "(min-width: 768px)",
+                            use: '(min-width: 450px)',
+                            hideNavbar: false,
                         },
                         expanded: {
-                            use: "(min-width: 1024px)",
-                            initial: "closed",
+                            use: '(min-width: 992px)',
                         },
                     },
                     navbars: [
                         {
-                            content: ["searchfield"],
+                            content: ['searchfield'],
                         },
                         {
-                            type: "tabs",
+                            type: 'tabs',
                             content: [
                                 '<a href="#panel-menu"><i class="fa fa-bars"></i> <span>Menu</span></a>',
                                 '<a href="#panel-account"><i class="fa fa-user"></i> <span>Account</span></a>',
                                 '<a href="#panel-cart"><i class="fa fa-shopping-cart"></i> <span>Cart</span></a>',
                             ],
                         },
                         {
-                            content: ["prev", "breadcrumbs", "close"],
+                            content: ['prev', 'breadcrumbs', 'close'],
                         },
                         {
-                            position: "bottom",
+                            position: 'bottom',
                             content: [
-                                '<a href="https://mmenujs.com/wordpress-plugin" target="_blank">WordPress plugin</a>',
+                                '<a href="http://mmenu.frebsite.nl/wordpress-plugin" target="_blank">WordPress plugin</a>',
                             ],
                         },
                     ],
                 },
                 {
                     searchfield: {
-                        cancel: true,
                         clear: true,
                     },
+                    navbars: {
+                        breadcrumbs: {
+                            removeFirst: true,
+                        },
+                    },
                 }
             );
 
-            document.addEventListener("click", function (evnt) {
-                var anchor = evnt.target.closest('a[href="#/"]');
+            document.addEventListener('click', function (evnt) {
+                var anchor = evnt.target.closest('a[href^="#/"]');
                 if (anchor) {
                     alert("Thank you for clicking, but that's a demo link.");
                     evnt.preventDefault();