npm - @madgex/fert - Versions diffs - 1.3.0 - Mend

@madgex/fert 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (120) hide show

package/repo-templates/template-bigworkbag/src/css/reset.scss ADDED Viewed

@@ -0,0 +1,91 @@
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+code,
+del,
+dfn,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+tt,
+var,
+u,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+caption,
+table:not(.mds-edited-text table),
+tbody:not(.mds-edited-text tbody),
+tfoot:not(.mds-edited-text tfoot),
+thead:not(.mds-edited-text thead),
+tr:not(.mds-edited-text tr),
+th:not(.mds-edited-text th),
+td:not(.mds-edited-text td),
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font: inherit;
+}
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  word-wrap: break-word;
+}
+ol,
+ul {
+  list-style-type: none;
+  list-style-position: outside;
+}

package/repo-templates/template-bigworkbag/src/css/styles.scss ADDED Viewed

@@ -0,0 +1,19 @@
+@import "./reset.scss";
+@import "../../public/tokens/scss/index.scss";
+@import "@madgex/design-system/src/scss/import.scss";
+@import "./variables.scss";
+@import "./breakpoints.scss";
+@import "./util.scss";
+@import "./typography.scss";
+@import "./clicky-menu.scss";
+@import "./leaderboard-ad.scss";
+@import "./top-bar.scss";
+@import "./header-top.scss";
+@import "./mobile-main-nav.scss";
+@import "./mobile-user-nav.scss";
+@import "./desktop-user-nav.scss";
+@import "./desktop-main-nav.scss";
+@import "./footer.scss";

package/repo-templates/template-bigworkbag/src/css/top-bar.scss ADDED Viewed

@@ -0,0 +1,13 @@
+[scoped-v6=""] .top-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: $top-bar-height;
+  background: $brand-color-2;
+  color: #fff;
+  @include for-tablet-landscape-up {
+    display: none;
+  }
+}

package/repo-templates/template-bigworkbag/src/css/typography.scss ADDED Viewed

@@ -0,0 +1,20 @@
+[scoped-v6=""] {
+  font-family: sans-serif;
+  /*
+  The design system applies these to <body>.
+  Repeating here for clarity and independence from the design system.
+  */
+  font-size: 1.125rem;
+  line-height: 1.34;
+  @include for-phone-only {
+    font-size: 1rem;
+    line-height: 1.38;
+  }
+  @include for-tablet-landscape-up {
+    font-size: 1rem;
+    line-height: 1.38;
+  }
+}

package/repo-templates/template-bigworkbag/src/css/util.scss ADDED Viewed

@@ -0,0 +1,28 @@
+/* As design system .mds-js-visually-hidden */
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  // If margin is set to a negative value it can cause text to be announced in the wrong order in VoiceOver for OSX
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  border: 0;
+  // For long content, line feeds are not interpreted as spaces and small width
+  // causes content to wrap 1 word per line:
+  // https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
+  white-space: nowrap;
+}
+/* As design system .mds-wrapper */
+[scoped-v6=""] .wrapper {
+  margin: 0 auto;
+  max-width: 1240px;
+  width: $wrapper-width;
+}

package/repo-templates/template-bigworkbag/src/css/variables.scss ADDED Viewed

@@ -0,0 +1,9 @@
+$brand-color-1: #00a99d;
+$brand-color-2: #303030;
+$font-color-1: #343434;
+$gutter-width: calc(1.5vw + 10px);
+$wrapper-width: calc(97% - 20px);
+$top-bar-height: 48px;

package/repo-templates/template-bigworkbag/src/index.js ADDED Viewed

@@ -0,0 +1,3 @@
+import './js/no-js';
+import './js/clicky-menus';
+import './css/styles.scss';

package/repo-templates/template-bigworkbag/src/js/clicky-menus.js ADDED Viewed

@@ -0,0 +1,178 @@
+/**
+ * Use to create clickable menus eg mobile mobile hamburger menu or main nav submenu
+ *
+ * Based on https://css-tricks.com/in-praise-of-the-unambiguous-click-menu/
+ * Modified from the above to use <span class=""> instead of <a href="#">
+ * for placeholder elements to be transformed into buttons.
+ *
+ * To use follow this structure:
+ * <anyelement id="[required]">                                <-- menu container's direct parent
+ *   <anyelement class="clicky-menu js-clicky-menu">           <-- menu container
+ *     <span id="[required]" class="js-clicky-menu-control">   <-- menu control (tranformed into  button when js enabled)
+ *     <ul id="[required]">                                    <-- menu
+ */
+(function () {
+  const ClickyMenus = function (menu) {
+    // DOM element(s)
+    let container = menu.parentElement,
+      currentMenuItem,
+      i,
+      len;
+    this.init = function () {
+      menuSetup();
+      document.addEventListener('click', closeOpenMenu);
+    };
+    /*===================================================
+    =            Menu Open / Close Functions            =
+    ===================================================*/
+    function toggleOnMenuClick(e) {
+      const button = e.currentTarget;
+      // close open menu if there is one
+      if (currentMenuItem && button !== currentMenuItem) {
+        toggleSubmenu(currentMenuItem);
+      }
+      toggleSubmenu(button);
+    }
+    function toggleSubmenu(button) {
+      const submenu = document.getElementById(
+        button.getAttribute('aria-controls')
+      );
+      if ('true' === button.getAttribute('aria-expanded')) {
+        button.setAttribute('aria-expanded', false);
+        submenu.setAttribute('aria-hidden', true);
+        currentMenuItem = false;
+      } else {
+        button.setAttribute('aria-expanded', true);
+        submenu.setAttribute('aria-hidden', false);
+        preventOffScreenSubmenu(submenu);
+        currentMenuItem = button;
+      }
+    }
+    function preventOffScreenSubmenu(submenu) {
+      const screenWidth =
+          window.innerWidth ||
+          document.documentElement.clientWidth ||
+          document.body.clientWidth,
+        parent = submenu.offsetParent,
+        menuLeftEdge = parent.getBoundingClientRect().left,
+        menuRightEdge = menuLeftEdge + submenu.offsetWidth;
+      if (menuRightEdge + 32 > screenWidth) {
+        // adding 32 so it's not too close
+        submenu.classList.add('sub-menu--right');
+      }
+    }
+    function closeOnEscKey(e) {
+      if (27 === e.keyCode) {
+        // we're in a submenu item
+        if (null !== e.target.closest('ul[aria-hidden="false"]')) {
+          currentMenuItem.focus();
+          toggleSubmenu(currentMenuItem);
+          // we're on a parent item
+        } else if ('true' === e.target.getAttribute('aria-expanded')) {
+          toggleSubmenu(currentMenuItem);
+        }
+      }
+    }
+    function closeOpenMenu(e) {
+      if (currentMenuItem && !e.target.closest('#' + container.id)) {
+        toggleSubmenu(currentMenuItem);
+      }
+    }
+    /*===========================================================
+    =            Modify Menu Markup & Bind Listeners            =
+    =============================================================*/
+    function menuSetup() {
+      menu.classList.remove('no-js');
+      menu.querySelectorAll('ul').forEach((submenu) => {
+        const menuItem = submenu.parentElement;
+        if ('undefined' !== typeof submenu) {
+          let button = convertControlElementToButton(menuItem);
+          setUpAria(submenu, button);
+          // bind event listener to button
+          button.addEventListener('click', toggleOnMenuClick);
+          menu.addEventListener('keyup', closeOnEscKey);
+        }
+      });
+    }
+    /**
+     * Why do this? See https://justmarkup.com/articles/2019-01-21-the-link-to-button-enhancement/
+     */
+    function convertControlElementToButton(menuItem) {
+      const controlElement = menuItem.querySelector(
+          'span.js-clicky-menu-control'
+        ),
+        controlElementHTML = controlElement.innerHTML,
+        controlElementAtts = controlElement.attributes,
+        button = document.createElement('button');
+      if (null !== controlElement) {
+        // set button content and attributes
+        button.innerHTML = controlElementHTML.trim();
+        for (i = 0, len = controlElementAtts.length; i < len; i++) {
+          let attr = controlElementAtts[i];
+          button.setAttribute(attr.name, attr.value);
+        }
+        menuItem.replaceChild(button, controlElement);
+      }
+      return button;
+    }
+    function setUpAria(submenu, button) {
+      const submenuId = submenu.getAttribute('id');
+      let id;
+      if (null === submenuId) {
+        id =
+          button.textContent.trim().replace(/\s+/g, '-').toLowerCase() +
+          '-submenu';
+        console.log(
+          'ClickyMenu - No id on: ' +
+            submenu +
+            ', using: ' +
+            id +
+            ' for aria-controls'
+        );
+      } else {
+        id = submenuId;
+      }
+      // set button ARIA
+      button.setAttribute('aria-controls', id);
+      button.setAttribute('aria-expanded', false);
+      // set submenu ARIA
+      submenu.setAttribute('id', id);
+      submenu.setAttribute('aria-hidden', true);
+    }
+  };
+  /* Create a ClickMenus object and initiate menu for any menu with .clicky-menu class */
+  document.addEventListener('DOMContentLoaded', function () {
+    const menus = document.querySelectorAll('.js-clicky-menu');
+    menus.forEach((menu) => {
+      let clickyMenu = new ClickyMenus(menu);
+      clickyMenu.init();
+    });
+  });
+})();

package/repo-templates/template-bigworkbag/src/js/no-js.js ADDED Viewed

@@ -0,0 +1,10 @@
+document.onreadystatechange = () => {
+  if (document.readyState === 'interactive') {
+    const noJsClass = 'no-js';
+    const header = document.querySelector('header');
+    const footer = document.querySelector('footer');
+    header.classList.remove(noJsClass);
+    footer.classList.remove(noJsClass);
+  }
+};

package/repo-templates/template-bigworkbag/templates/context/footer-nav.njk ADDED Viewed

@@ -0,0 +1,27 @@
+{% set footerNavigation = [
+    {
+        "href": "/about-us",
+        "label": "About us",
+        "openInNewWindow": false
+    },
+    {
+        "href": "/contact-us",
+        "label": "Contact us",
+        "openInNewWindow": false
+    },
+    {
+        "href": "/terms-and-conditions/",
+        "label": "Terms & conditions",
+        "openInNewWindow": false
+    },
+    {
+        "href": "/privacy-policy",
+        "label": "Privacy Policy",
+        "openInNewWindow": false
+    },
+    {
+        "href": "https://bigworkbag-rs.madgexjb.com/",
+        "label": "Advertise with us",
+        "openInNewWindow": false
+    }
+] %}

package/repo-templates/template-bigworkbag/templates/context/main-nav.njk ADDED Viewed

@@ -0,0 +1,32 @@
+{% set mainNavigation = [
+    {
+        "href": "/",
+        "label": "Home",
+        "openInNewWindow": false
+    },
+    {
+        "href": "/jobs",
+        "label": "Find a job",
+        "openInNewWindow": false
+    },
+    {
+        "href": "/newalert",
+        "label": "Job alerts",
+        "openInNewWindow": false
+    },
+    {
+        "href": "/employers",
+        "label": "Search recruiters",
+        "openInNewWindow": false
+    },
+    {
+        "href": "/careers",
+        "label": "Career advice",
+        "openInNewWindow": false
+    },
+    {
+        "href": "/careerfairs",
+        "label": "Career fairs",
+        "openInNewWindow": false
+    }
+] %}

package/repo-templates/template-bigworkbag/templates/context/user-nav.njk ADDED Viewed

@@ -0,0 +1,17 @@
+{% set userNavigation = [
+    {
+        "href": "/your-jobs",
+        "label": "Your jobs",
+        "openInNewWindow": false
+    },
+    {
+        "href": "/profile",
+        "label": "Your profile",
+        "openInNewWindow": false
+    },
+    {
+        "href": "/account",
+        "label": "Your account",
+        "openInNewWindow": false
+    }
+] %}

package/repo-templates/template-bigworkbag/templates/footer.njk ADDED Viewed

@@ -0,0 +1,68 @@
+{# Footer #}
+<!-- START HEADER FRAGMENT -->
+<!-- HEADER-FOOTER-PODLET VERSION: {{ version }} -->
+{%- from templatePath + "translations/en.njk" import translations -%}
+{%- from templatePath + "context/footer-nav.njk" import footerNavigation -%}
+<footer role="contentinfo" class="contentinfo no-js" scoped-v6="">
+  <div class="back-to-top">
+    <div class="wrapper">
+      <a href="#top-bar">{{ translations.footer["back-to-top"] }}</a>
+    </div>
+  </div>
+  <div class="wrapper">
+    <nav aria-label="{{ translations.footer["footer"] }}" class="footer-nav">
+      <ul class="footer-nav__items">
+        {%- if footerNavigation.length -%}
+          {%- for item in footerNavigation -%}
+            <li class="footer-nav__item">
+              <a
+                class="footer-nav__link"
+                href="{{ item.href }}"
+                {%- if item.openInNewWindow -%} target="_blank" rel="noopener" {% endif %}>
+                {{ item.label | safe }}
+                {%- if item.openInNewWindow %}
+                  <span class="visually-hidden">{{ translations.header["link-new-window"] }}</span>
+                {%- endif -%}
+              </a>
+            </li>
+          {%- endfor -%}
+        {%- endif -%}
+      </ul>
+    </nav>
+    <ul class="social-media__items">
+      <li class="social-media__item">
+        <a
+          class="social-media__link"
+          href="https://www.facebook.com">
+          {% include templatePath + "svgs/facebook.svg" %}
+          <span class="visually-hidden">Facebook</span>
+        </a>
+      </li>
+      <li class="social-media__item">
+        <a
+          class="social-media__link"
+          href="https://www.linkedin.com">
+          {% include templatePath + "svgs/linkedin.svg" %}
+          <span class="visually-hidden">linkedIn</span>
+        </a>
+      </li>
+      <li class="social-media__item">
+        <a
+          class="social-media__link"
+          href="https://www.youtube.com">
+          {% include templatePath + "svgs/youtube.svg" %}
+          <span class="visually-hidden">YouTube</span>
+        </a>
+      </li>
+    </ul>
+    <p class="copyright">
+      © 2008 - 2021 bigworkbag.com, all rights reserved. Powered by Madgex Job Board Software
+    </p>
+  </div>
+</footer>

package/repo-templates/template-bigworkbag/templates/header.njk ADDED Viewed

@@ -0,0 +1,54 @@
+{# Header #}
+{% include templatePath + "includes/dev-console-context.njk" %}
+<!-- START HEADER FRAGMENT -->
+<!-- HEADER-FOOTER-PODLET VERSION: {{ version }} -->
+{%- from templatePath + "translations/en.njk" import translations -%}
+<header role="banner" class="banner no-js" scoped-v6="">
+  <div id="ad-leaderboard" class="ad ad--leaderboard ad--leaderboard--empty"></div>
+  <div id="top-bar" class="top-bar">
+    <nav aria-label="{{ translations.header["main"] }}" id="mobile-main-nav" class="mobile-main-nav">
+      <div class="clicky-menu js-clicky-menu">
+        <span
+          id="mobile-main-nav-clicky-menu-control"
+          class="clicky-menu-control js-clicky-menu-control">
+          <div class="hamburger">
+            <div class="hamburger-line"></div>
+            <div class="hamburger-line"></div>
+            <div class="hamburger-line"></div>
+            <div class="hamburger-line"></div>
+          </div>
+        </span>
+        <ul id="mobile-main-nav__items" class="mobile-main-nav__items">
+          {% include templatePath + "includes/mobile-main-nav-items.njk" %}
+        </ul>
+      </div>
+    </nav>
+    {% include templatePath + "includes/mobile-user-nav/user-nav.njk" %}
+  </div>
+  <div id="ad-mobileleaderboard" class="ad ad--mobileleaderboard ad--mobileleaderboard--empty"></div>
+  <div class="header-top">
+    <div class="wrapper">
+      <div class="primary-logo">
+        <a href="/" aria-label="{{ translations.header["homepage"] }}">
+          <img src="/_/jobseekers-frontend/assets/images/logo.png" title="bigworkbag.com" alt="bigworkbag.com logo"/>
+        </a>
+      </div>
+      {% include templatePath + "includes/desktop-user-nav/user-nav.njk" %}
+    </div>
+  </div>
+  <nav aria-label="{{ translations.header["main"] }}" id="desktop-main-nav" class="desktop-main-nav">
+    <div class="wrapper">
+      <ul class="desktop-main-nav__items">
+        {% include templatePath + "includes/desktop-main-nav-items.njk" %}
+      </ul>
+    </div>
+  </nav>
+</header>
+<!-- END HEADER FRAGMENT -->

package/repo-templates/template-bigworkbag/templates/includes/desktop-main-nav-items.njk ADDED Viewed

@@ -0,0 +1,18 @@
+{# Desktop main nav items #}
+{%- from templatePath + "context/main-nav.njk" import mainNavigation -%}
+{% if mainNavigation.length %}
+  {% for item in mainNavigation %}
+    <li class="desktop-main-nav__item">
+      <a
+        class="desktop-main-nav__link"
+        href="{{ item.href }}"
+        {%- if item.openInNewWindow -%}target="_blank" rel="noopener"{% endif %}>
+        <span class="desktop-main-nav__label">{{- item.label | safe -}}</span>
+        {%- if item.openInNewWindow %}<span class="visually-hidden">{{ translations.header["link-new-window"] }}</span>{% endif %}
+      </a>
+    </li>
+  {% endfor %}
+{% endif %}

package/repo-templates/template-bigworkbag/templates/includes/desktop-user-nav/loggedin-items.njk ADDED Viewed

@@ -0,0 +1,28 @@
+{# Desktop user nav logged in items #}
+<li class="desktop-user-nav__item clicky-menu js-clicky-menu">
+  <span
+    id="desktop-user-nav-clicky-menu-control"
+    class="clicky-menu-control js-clicky-menu-control"
+    aria-label="Account menu">
+    {% include templatePath + "svgs/profile.svg" %}
+    {{ auth.credentials.username | safe }}
+    {% include templatePath + "svgs/arrow-down.svg" %}
+  </span>
+  <ul
+    id="desktop-user-nav-submenu-items"
+    class="desktop-user-nav__submenu-items">
+    {% include templatePath + "includes/desktop-user-nav/submenu-items.njk" %}
+</ul>
+</li>
+<li class="desktop-user-nav__item desktop-user-nav__item--shortlist">
+<a
+  href="/your-jobs?ActiveSection=ShortList"
+  aria-label="{{ translations.header["your-shortlist"] }}">
+  <span class="desktop-user-nav__shortlist-count">{{ auth.artifacts.shortlistedJobs | length | default(0) }}</span>
+  {% include templatePath + "svgs/star-filled.svg" %}
+</a>
+</li>
+<li class="desktop-user-nav__item">
+  <a href="{{ getServiceRoute('jobseekersite', 'account.logoff') }}">{{ translations.header["sign-out"] }}</a>
+</li>

package/repo-templates/template-bigworkbag/templates/includes/desktop-user-nav/loggedout-items.njk ADDED Viewed

@@ -0,0 +1,9 @@
+{# Desktop user nav logged in items #}
+<li class="desktop-user-nav__item">
+  <a href="{{ getServiceRoute('jobseekersite', 'account.login') }}">{{ translations.header["sign-in"] }}</a>
+</li>
+<li class="desktop-user-nav__item">{{ translations.header["or"] }}</li>
+<li class="desktop-user-nav__item">
+  <a href="{{ getServiceRoute('jobseekersite', 'account.signup') }}">{{ translations.header["create-account"] }}</a>
+</li>

package/repo-templates/template-bigworkbag/templates/includes/desktop-user-nav/submenu-items.njk ADDED Viewed

@@ -0,0 +1,18 @@
+{# Desktop user nav submenu items #}
+{%- from templatePath + "context/user-nav.njk" import userNavigation -%}
+{% if userNavigation.length %}
+  {% for item in userNavigation %}
+    <li class="desktop-user-nav__submenu-item">
+      <a
+        class="desktop-user-nav__submenu-link"
+        href="{{ item.href }}"
+        {%- if item.openInNewWindow -%}target="_blank" rel="noopener"{% endif %}>
+        <span class="desktop-user-nav__label">{{- item.label | safe -}}</span>
+        {%- if item.openInNewWindow %}
+          <span class="visually-hidden">{{ translations.header["link-new-window"] }}</span>{% endif %}
+      </a>
+    </li>
+  {% endfor %}
+{% endif %}