@ptcwebops/ptcw-design 4.6.8 → 4.6.9

package/dist/collection/components/organism-bundles/homepage-jumbotron/homepage-jumbotron.css

@@ -801,6 +801,19 @@ ptc-link, ptc-square-card,
   margin-right: 0px;
 }
 
+@media screen and (min-width: 992px) {
+  .swiper-container .swiper-wrapper {
+    justify-content: space-between;
+  }
+
+  .swiper-slide {
+    flex: 1;
+    margin-right: 24px;
+  }
+  .swiper-slide:last-of-type {
+    margin-right: 0px;
+  }
+}
 @media screen and (min-width: 1200px) {
   .swiper-container {
     max-width: 1136px;
@@ -809,10 +822,7 @@ ptc-link, ptc-square-card,
   }
 
   .swiper-slide {
-    margin-right: 28px;
-  }
-  .swiper-slide:last-of-type {
-    margin-right: 0px;
+    margin-right: 32px;
   }
 }
 @media screen and (min-width: 1440px) {
@@ -823,10 +833,7 @@ ptc-link, ptc-square-card,
   }
 
   .swiper-slide {
-    margin-right: 60px;
-  }
-  .swiper-slide:last-of-type {
-    margin-right: 0px;
+    margin-right: 40px;
   }
 }
 .swiper-button-next,

package/dist/collection/components/organism-bundles/homepage-jumbotron/homepage-jumbotron.js

@@ -1,4 +1,5 @@
 import { h, Host } from '@stencil/core';
+import { equalizeHeights } from '../../../utils/utils';
 import Swiper from 'swiper';
 import 'swiper/swiper-bundle.css';
 export class HomepageJumbotron {
@@ -19,12 +20,18 @@ export class HomepageJumbotron {
     this.isTransitioning = undefined;
     this.mediaTag = "VIDEO";
   }
+  handleWindowResize() {
+    equalizeHeights('ptc-info-tile', this.el);
+  }
   componentWillLoad() {
     this.updateDefaultContent();
   }
   componentDidLoad() {
     this.initSlider();
   }
+  componentDidRender() {
+    equalizeHeights('ptc-info-tile', this.el);
+  }
   initSlider() {
     if (this.swiperContainerRef) {
       this.mySwiper = new Swiper(this.swiperContainerRef, {
@@ -43,7 +50,7 @@ export class HomepageJumbotron {
             spaceBetween: 0,
           },
           1200: {
-            width: 1080,
+            //width:1080,
             initialSlide: 1,
             slidesPerView: 3,
             spaceBetween: 0,
@@ -242,6 +249,12 @@ export class HomepageJumbotron {
   static get elementRef() { return "el"; }
   static get listeners() {
     return [{
+        "name": "resize",
+        "method": "handleWindowResize",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }, {
         "name": "itemSelected",
         "method": "onItemSelected",
         "target": undefined,

package/dist/collection/components/ptc-info-tile/ptc-info-tile.css

@@ -57,6 +57,11 @@ ptc-link, ptc-square-card,
 :host {
   display: block;
 }
+@media screen and (min-width: 992px) {
+  :host {
+    flex: 1;
+  }
+}
 
 .tile {
   position: relative;
@@ -69,20 +74,44 @@ ptc-link, ptc-square-card,
   height: 116px;
 }
 .tile.image {
-  width: 373px;
+  width: 299px;
   display: flex;
   flex-wrap: nowrap;
   flex-direction: row;
-  align-items: center;
+  align-items: stretch;
   margin: 0 auto;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  max-width: unset;
+  height: 100%;
+  min-height: 140px;
+}
+@media screen and (min-width: 992px) {
+  .tile.image {
+    width: unset;
+    min-width: 299px;
+  }
+}
+@media screen and (min-width: 1440px) {
+  .tile.image {
+    min-height: 116px;
+  }
+}
+.tile.image .tile-image {
+  flex: 0 0 120px;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
 }
 .tile.image .tile-content {
   border-bottom: 2px solid var(--color-white);
   background: #FFF;
-  height: 82px;
+  height: 100%;
   text-align: left;
   flex: 1;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }
 .tile.image:hover .tile-content {
   border-bottom: 2px solid var(--Blue-6, #4795CD);
@@ -104,10 +133,6 @@ ptc-link, ptc-square-card,
   background-color: var(--color-gray-01);
   border: 1px solid var(--color-gray-07);
 }
-.tile img {
-  width: 120px;
-  height: 116px;
-}
 .tile h3 {
   margin: 0;
   font-size: 1.2em;
@@ -146,7 +171,11 @@ ptc-link, ptc-square-card,
 
 ::slotted(img[slot=tile-image]) {
   width: 120px !important;
-  height: 120px !important;
+  height: 100% !important;
+  object-fit: cover;
+  display: block;
+  max-height: 100%;
+  position: absolute;
 }
 
 ::slotted(h3[slot=tile-title]) {
@@ -165,4 +194,5 @@ ptc-link, ptc-square-card,
   font-weight: var(--ptc-font-weight-bold) !important;
   line-height: var(--ptc-line-height-p) !important;
   text-align: left !important;
+  margin-bottom: 0px !important;
 }

package/dist/collection/utils/utils.js

@@ -118,22 +118,28 @@ export function seoSlotReset(element) {
   }
 }
 // for elements in the light dom
-export function equalizeHeights(selector) {
-  const elements = document.querySelectorAll(selector);
-  //debugger
+export function equalizeHeights(selector, elem) {
+  let elements = elem.querySelectorAll(selector);
+  console.log('element: ' + elements[0].tagName);
+  //reset height
+  elements.forEach((element) => {
+    element.style.removeProperty('height');
+  });
   let tallestHeight = 0;
-  // 1. Find the tallest element
-  elements.forEach(element => {
+  // Find the tallest element
+  elements.forEach((element) => {
     const height = element.offsetHeight;
-    if (height > tallestHeight) {
+    if (height > tallestHeight && element.classList.contains('hydrated')) {
       tallestHeight = height;
     }
   });
-  //console.log('tallest height: ' + tallestHeight)
-  // 2. Set all elements to the tallest height
-  elements.forEach(element => {
-    element.style.height = `${tallestHeight}px`;
-  });
+  if (tallestHeight > 0) {
+    // Set all elements to the tallest height
+    elements.forEach((element) => {
+      element.style.height = `${tallestHeight}px`;
+    });
+    //return true;
+  }
 }
 //for elements in the shadow dom
 export function equalizeHeightsWithinShadow(selector, shadowRootOrHostElement) {