kcc-gem-theme 2.12.2 → 2.14.2

data/assets/js/src/all.js

@@ -9,33 +9,81 @@ function loadModule(...moduleArgs) {
   moduleArgs.length > 2 ? funcArg = moduleArgs[2] : null;
 
   import(`./${module}`).then(({ default: defaultFunc }) => {
-    funcArg = undefined ? defaultFunc() : defaultFunc(funcArg);
+    return funcArg = undefined ? defaultFunc() : defaultFunc(funcArg);
   });
 }
 
-document.addEventListener('DOMContentLoaded', function () {
-  window.location.hostname.search(/\.kcc\.edu/) !== -1 ? loadModule('loadClarusCorpScript') : null;
-  loadModule('wrapPowerText');
-  loadModule('sliders', 'initSliders');
-  loadModule('walkText', 'walkText', document.body);
-  loadModule('footerDate');
-  loadModule('lazyLoad');
-  loadModule('addClassToOpenNavbar');
-
-  if (window.localStorage.getItem('darkModeSetting') == 'true' || window.location.pathname == '/settings/') {
-    import(/* webpackChunkName: 'darkMode' */ './darkMode').then(({ default: darkMode }) => {
-      return darkMode;
-    }).then(darkMode => {
-      import(/* webpackChunkName: 'darkModeStyling' */ '../../scss/darkMode.scss').then(() => {
-        darkMode();
-      });
+// Modules that load before window.onload
+window.addEventListener('load', () => {
+
+//  1.) Import hero slider JS modules
+// './wrapPowerText'
+// 'sliders', 'initSliders'
+// Hero slider module import error handler
+
+// 2.) 'walkText', 'walkText', document.body
+// 3.) 'lazyLoad'
+// 4.) 'footerDate'
+// 5.) 'addClassToOpenNavbar'
+// 6.) 'errorPageSearch'
+  
+// 7. 'darkMode' JS modules
+// 8.) 'darkMode.scss'
+  
+// 9. '../../scss/searchPageOverrides.scss'
+// 10.) document.getElementById('google_translate_element') ? loadModule('translateScript', 'watchForMenuClicks') : null;
+  
+  import('../alerts/alerts')
+    .then(({ default: alerts }) => alerts())
+    .then(() => {
+      if (document.querySelector('.hero-slider__slider')) {
+        Promise.resolve()
+          .then(() => loadModule('wrapPowerText'))
+          .then(() => loadModule('sliders', 'initSliders'))
+          .catch((err) => console.error(`Error loading slider modules :${err}`, err))
+      }
+      loadModule('walkText', 'walkText', document.body)
+      document.querySelector('img[data-src]') ? loadModule('lazyLoad') : null;
+      loadModule('footerDate')
+      loadModule('addClassToOpenNavbar')
+      document.getElementById('errorPageSearch') ? loadModule('errorPageSearch', 'errorPageSearch') : null;
     })
-  }
-  if (window.location.pathname == "/search/") {
-    import(/* webpackChunkName: 'searchPageOverrides' */ '../../scss/searchPageOverrides.scss').then(() => {
-      console.info('Search page overrides styling loaded');
-    }).catch( err => console.error(`Error loading searchPageOverrides.scss \n${err}`, err) );
-  }
-  document.getElementById('google_translate_element') ? loadModule('translateScript', 'watchForMenuClicks') : null;
-  document.getElementById('errorPageSearch') ? loadModule('errorPageSearch', 'errorPageSearch') : null;
+    .then(async () => {
+      const { default: megaNav } = await import('../nav/megaNav/megaNav');
+      return megaNav();
+    })
+    .catch(err => console.error(`Error loading window.onload modules: ${err}`, err))
+  
+    if (window.localStorage.getItem('darkModeSetting') == 'true' || window.location.pathname == '/settings/') {
+      import('./darkMode').then(({ default: darkMode }) => {
+        return darkMode;
+      }).then(darkMode => {
+        import('../../scss/darkMode.scss').then(() => {
+          return darkMode();
+        });
+      })
+    }
+    if (window.location.pathname == "/search/") {
+      import('../../scss/searchPageOverrides.scss')
+        .catch(err => console.error(`Error loading searchPageOverrides.scss \n${err}`, err));
+    }
+    if (document.getElementById('google_translate_element')) {
+      import('./translateScript').then(({ default: watchForMenuClicks }) => {
+        return watchForMenuClicks();
+      })
+    }
+
+
+  // if (document.querySelector('.hero-slider__slider')) {
+  //   Promise.resolve()
+  //     .then(() => loadModule('wrapPowerText'))
+  //     .then(() => loadModule('sliders', 'initSliders'))
+  //     .catch((err) => console.error(`Error loading slider modules :${err}`, err))
+  // }
+  // loadModule('walkText', 'walkText', document.body)
+  // document.querySelector('img[data-src]') ? loadModule('lazyLoad') : null;
+  // loadModule('footerDate')
+  // loadModule('addClassToOpenNavbar')
+  // document.getElementById('errorPageSearch') ? loadModule('errorPageSearch', 'errorPageSearch') : null;
 });
+

data/assets/scss/0-tools/_vars.scss

@@ -85,3 +85,6 @@ $btn-hover-bg: #022b55;
 $btn-hover-border: #021e3d;
 $darker-link: #006ce0;
 $orange-heading: $color-orange;
+
+$color-bs-blue: #007bff;
+$color-bs-blue-hover: #0056b3;

data/assets/scss/1-base/_buttons.scss

@@ -170,10 +170,17 @@
 }
 
 .alert:hover .buttons--sync,
-.alert:focus .buttons--sync {
+.alert:focus .buttons--sync,
+.buttons--sync:focus,
+.buttons--sync:focus-visible {
   opacity: 1;
 }
 
+.buttons--sync:focus-visible,
+.buttons__action:focus-visible {
+  outline: -webkit-focus-ring-color auto 1px;
+}
+
 .buttons--sync--visible {
   opacity: 1;
 }

data/assets/scss/1-base/_header-global.scss

@@ -75,6 +75,12 @@
   }
 }
 
+@media screen and (min-width: 992px) {
+  .header-global {
+    border-bottom: solid 1px rgba(0,0,0,.5);
+  }
+}
+
 .header-global__open {
   bottom: 0;
   overflow-x: hidden;

data/assets/scss/1-base/_links.scss

@@ -1,5 +1,6 @@
 // Rules for styling links
 // =========================================
+@import '../2-modules/link-launch';
 
 .links__kcc-logo {
   display: inline;

data/assets/scss/1-base/_svg.scss

@@ -78,8 +78,7 @@
   }
 }
 
-
-
+// Styling of the little sync icon that refreshes the KCC-alerts system/message
 .svg__sync {
   fill: $color-blue-reboot;
   transition: fill ease-in-out .2s;
@@ -89,3 +88,29 @@ button:hover .svg__sync,
 button:focus .svg__sync {
   fill: $color-blue-reboot-hover;
 }
+
+// Styling for `_includes/svg/mykcc.html` - which is a stylized MyKCC link
+// For creating a a stylized MyKCC link via {% include svg/mykcc.html %}
+/**
+*
+* TODO -  Remove these style rules (and `_includes/svg/mykcc.html`) when gem version is higher 
+*         than kcc-gem-theme-2.14.1.gem - these style rules are being moved into the theme
+*
+*/
+
+.svg__mykcc {
+  display: inline-block;
+  height: 1.5rem;
+  width: 80px;
+  fill: $color-bs-blue;
+}
+
+a.svg__link--no-decoration:hover,
+a.svg__link--no-decoration:focus {
+  text-decoration: none;
+}
+
+a.svg__link--no-decoration:hover .svg__mykcc,
+a.svg__link--no-decoration:focus .svg__mykcc{
+  fill: $color-bs-blue-hover;
+}

data/assets/scss/1-base/_typography.scss

@@ -185,7 +185,7 @@ body {
     font-size: 1rem;
     font-weight: 400;
   }
-  & .nav-link:not([role=tab]) {
+  .nav-link:not([role=tab]) {
     margin-left: 5px;
     margin-right: 5px;
   }
@@ -641,4 +641,4 @@ h1 sup, h2 sup, h3 sup, h4 sup, h5 sup, h6 sup { // Make superscripts within hea
 
 .dark-mode .typography__header-global--nav-bottom {
   color: #9bb7dd;
-}
+}

data/assets/scss/2-modules/_hero-slider.scss

@@ -63,7 +63,7 @@
   }
 }
 
-.hero-slider__heading--bold {
+.hero-slider__heading--bold { // ?????????????
   color: $white;
   filter: drop-shadow(2px 2px 5px #000);
   font-family: $font-family-power;
@@ -110,7 +110,6 @@
   padding-left: 5px;
   position: absolute;
   top: 55%;
-  width: 10%;
   z-index: 4444;
 }
 
@@ -146,12 +145,36 @@
   }
 }
 
-.hero-slider__slides-4 {
+.hero-slider__slides-1 .hero-slider__slider--heading-container  {
+  width: 100%;
+}
+
+.hero-slider__slides-2 .hero-slider__slider--heading-container {
+  width: 18.5%;
+}
+
+.hero-slider__slides-3 .hero-slider__slider--heading-container {
+  width: 13%;
+}
+
+.hero-slider__slides-4 .hero-slider__slider--heading-container {
   width: 10%;
 }
 
-.hero-slider__slides-8 {
-  width: 5%;
+.hero-slider__slides-5 .hero-slider__slider--heading-container {
+  width: 8%;
+}
+
+.hero-slider__slides-6 .hero-slider__slider--heading-container {
+  width: 6.65%;
+}
+
+.hero-slider__slides-7 .hero-slider__slider--heading-container {
+  width: 5.75%;
+}
+
+.hero-slider__slides-8 .hero-slider__slider--heading-container {
+  width: 4.85%;
 }
 
 
@@ -236,10 +259,14 @@
   padding-right: 0;
 }
 
-.hero-slider__slide-img--border {
-  border-color: $grey-8;
+.hero-slider__slider--slide-img {
   border-style: solid;
-  border-width: thin;
+  border-width: 1px;
+  border-color: transparent;
+}
+
+.hero-slider__slide-img--border {
+  border-color: rgba(0,0,0,.25);
 }
 
 .hero-slider__slider {   // prevents all slides from displaying vertically before slick has initialized
@@ -275,11 +302,10 @@
   cursor: pointer;
   display: block;
   font-size: 0;
-  height: 25px;
+  height: auto;
   right: 50%;
   margin-right: -12.5px;
   line-height: 0;
-  outline: none;
   padding: 0;
   position: absolute;
   bottom: 0;
@@ -287,10 +313,21 @@
   width: 25px;
 }
 
+.hero-slider__button--toggle:focus-visible,
+.hero-slider__button--toggle:focus,
+.slick-next:focus-visible,
+.slick-prev:focus-visible {
+  outline: -webkit-focus-ring-color auto 1px;
+}
+
+button[id*="slick-slide-control"]:focus-visible {
+  outline: -webkit-focus-ring-color auto 1px;
+}
+
+
 @media screen and (min-width: 992px) {
   .hero-slider__button--toggle {
     width: 40px;
-    bottom: 25px;
     margin-right: -20px;
   }
 }
@@ -320,7 +357,6 @@
 .hero-slider__button--toggle:hover,
 .hero-slider__button--toggle:focus {
   color: transparent;
-  outline: none;
   background: transparent;
 }
 

data/assets/scss/2-modules/_link-launch.scss

@@ -0,0 +1,41 @@
+/**
+*
+*  This module provides a `.links_launch` class can be added to a link to create a launch-icon.
+*    - This icon is a pseudo-element with an SVG in an encoded data-URI as its content.
+*    - The launch icon gives users a visual indicator that the link will launch in a new tab
+*    - The anchor needs at least following attributes: 
+*      `<a target="_blank" rel="noopener noreferrer" class="links__launch">`
+*
+*  @author Wesley Zajicek | <https://github.com/wdzajicek>
+*
+*  @requires sass:string - the "sass:string" sass module
+*  @function launchSvg - takes a single param
+*  @param $color {string} - a hex-color-code for the SVG's fill color
+*
+*/
+
+@use "sass:string";
+
+@function launchSvg($color) {
+  @return 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23#{string.slice($color, 2, 7)}" height="20" viewBox="0 0 24 24" width="20"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"/></svg>';
+}
+
+.links__dropdown-toggle--custom::after {
+  margin-left: .75rem;
+}
+
+[aria-expanded='true'].links__dropdown-toggle--custom::after {
+  transform: rotate(-180deg);
+}
+
+.links__launch {
+  &::after {
+    content: url(launchSvg('#007bff'));
+    margin-left: .375rem;
+    vertical-align: middle;
+    line-height: 1;
+  }
+  &:hover::after {
+    content: url(launchSvg('#0056b3'));
+  }
+}

data/assets/scss/2-modules/_sliders.scss

@@ -1,191 +1,16 @@
-// Styles for both the .heroSlider and .baseballSlider
+/**
+*
+*  Custom SCSS styling for KCC
+*  @copyright © 2022 Kankakee Community College
+*  @author Wesley Zajicek | https://github.com/wdzajicek 
+*/
+
+//  Custom KCC theme-styling for Slickjs carousel/sliders
+//
+//  This smaller SCSS partial needs to be imported into a stylesheet that
+//    loads before/while the page initially renders. Doing so ensures
+//    that Slick renders smoothly. Place any overrides that are needed for 
+//    Slick to render correctly in this file and import it.
+
 // slick carousels
 //==============================================
-.slider-container {
-  padding-left: 0;
-  padding-right: 0;
-}
-
-@media screen and (min-width: 1400px) {
-  .slider-container {
-    max-width: 1300px;
-  }
-}
-
-@media screen and (min-width: 1400px) {
-  .index-slider-container {
-    max-width: 1300px;
-  }
-}
-
-.slider-row {
-  margin-left: 0;
-  margin-right: 0;
-}
-
-.heading-container {   // div container for slide headings
-  border-left-color: $white;
-  border-left-style: solid;
-  border-left-width: 2px;
-  margin-left: .9%;
-  padding-left: 5px;
-  position: absolute;
-  top: 55%;
-  width: 7%;
-  z-index: 4444;
-}
-
-@media screen and (min-width: 488px) {
-  .heading-container {
-    top: 60%;
-    width: 6%;
-  }
-}
-
-@media screen and (min-width: 768px) {
-  .heading-container {
-    margin-left: .7%;
-    padding-left: 10px;
-    top: 61%;
-    width: 6%;
-  }
-}
-
-@media screen and (min-width: 992px) {
-  .heading-container {
-    margin-left: .6%;
-    padding-left: 20px;
-    top: 67%;
-  }
-}
-
-@media screen and (min-width: 1200px) {
-  .heading-container {
-    top: 69%;
-  }
-}
-
-.heroSlider .slide-img,
-.baseballSlider .slide-img {
-  position: relative;
-  width: 100%;
-}
-
-.heroSlider .slick-next,
-.baseballSlider .slick-next {
-  right: 20px;
-}
-
-.heroSlider .slick-prev,
-.baseballSlider .slick-prev {
-  left: 20px;
-  z-index: 4;
-}
-
-@media screen and (min-width: 576px) {
-  .heroSlider .slick-next,
-  .baseballSlider .slick-next {
-    right: 25px;
-  }
-
-  .heroSlider .slick-prev,
-  .baseballSlider .slick-prev {
-    left: 25px;
-    z-index: 4;
-  }
-}
-
-.heroSlider .slick-next,
-.heroSlider .slick-prev,
-.baseballSlider .slick-next,
-.baseballSlider .slick-prev {
-  height: 25px;
-  top: 75%;
-  width: 25px;
-}
-
-@media screen and (min-width: 992px) {
-  .heroSlider .slick-next,
-  .heroSlider .slick-prev,
-  .baseballSlider .slick-next,
-  .baseballSlider .slick-prev {
-    height: 40px;
-    top: 80%;
-    width: 40px;
-  }
-}
-
-.heroSlider .slick-dots li button:before,
-.baseballSlider .slick-dots li button:before {
-  color: $landing-bg;
-  font-size: 12px;
-  line-height: 30px;
-  opacity: 1;
-  text-shadow:
-    -1px -1px 0 $black,
-    1px -1px 0 $black,
-    -1px 1px 0 $black,
-    1px 1px 0 $black;
-}
-
-.heroSlider .slick-dots li.slick-active button:before,
-.baseballSlider .slick-dots li.slick-active button:before {
-  color: $primary-blue;
-  opacity: 1;
-  text-shadow:
-    -1px -1px 0 $black,
-    1px -1px 0 $black,
-    -1px 1px 0 $black,
-    1px 1px 0 $black;
-}
-
-.heroSlider .slick-dots li,
-.baseballSlider .slick-dots li  {
-  margin-left: 1px;
-  margin-right: 1px;
-  padding-left: 0;
-  padding-right: 0;
-}
-
-.njcaa-link {
-  margin-top: 30px;
-  position: absolute;
-  right: 15%;
-  z-index: 1000;
-}
-
-@media screen and (min-width:1600px) {
-  .njcaa-link {
-    right: 20%;
-  }
-}
-
-@media screen and (min-width:1900px) {
-  .njcaa-link {
-    right: 25%;
-  }
-}
-
-@media screen and (min-width:1200px) {
-  .njcaa-logo {
-    width: 175px;
-  }
-}
-
-@media screen and (min-width:1600px) {
-  .njcaa-logo {
-    width: 200px;
-  }
-}
-
-.baseballSlider {   // prevents all slides from displaying vertically before slick has initialized
-  visibility: hidden;
-}
-
-.slick-initialized {   // makes slides visible again once slick has initialized
-  visibility: visible;
-}
-
-.slick-track {
-  margin-left: 0;
-}

data/assets/scss/kcc-theme.scss

@@ -18,7 +18,7 @@
 // Modular components
 @import '2-modules/header';
 @import '2-modules/footer';
-@import '2-modules/sliders';
+// @import '2-modules/sliders';
 @import '2-modules/social-icons';
 @import '2-modules/nav-landing'; // Styles for the navbar in landing pages.
 @import '2-modules/nav-global';  // Remove after implimenting the new header-global with mega-nav.