Merge pull request #689 from hlxsites/fix-product-tbt

improve LHS on product pages
hlxsites · Jan 23, 2024 · 9ea7cd3 · 9ea7cd3
2 parents d13d03e + d59439b
commit 9ea7cd3
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 26 deletions.
diff --git a/blocks/page-tabs/page-tabs.js b/blocks/page-tabs/page-tabs.js
@@ -111,7 +111,6 @@ export default async function decorate(block) {
     block.innerHTML = '';
     block.append(navElement);
     pageTabsContainer.classList.add(...'hidden mb-4 -mt-16 md:block !p-0'.split(' '));
-    main.querySelector('.product-hero-container').classList.add(...'!pb-32'.split(' '));
   }
 
   window.addEventListener('hashchange', () => {

diff --git a/blocks/product-hero/product-hero.css b/blocks/product-hero/product-hero.css
@@ -1,5 +1,5 @@
 .product-hero-container {
-    @apply bg-gray-50 pt-6 pb-24;
+    @apply bg-gray-50 px-2 pt-2 pb-32;
 }
 
 .product-hero {
@@ -72,7 +72,7 @@
 }
 
 .product-hero .vertical-gallery-container > div div:nth-child(1) img {
-    @apply w-full h-80 max-w-[360px] rounded shadow object-contain transition duration-700;
+    @apply w-full h-80 max-w-[360px] mx-auto rounded shadow object-contain transition duration-700;
 }
 
 .product-hero .vertical-gallery-container > div > div:not(:nth-child(1)) {

diff --git a/blocks/product-hero/product-hero.js b/blocks/product-hero/product-hero.js
@@ -34,7 +34,9 @@ function loadMore() {
 }
 
 function imageSlider(allImages) {
-  const slideContent = div(img({ src: allImages[0], class: 'image-content', alt: 'product image' }));
+  const slideContent = div(img({
+    src: allImages[0], class: 'image-content', alt: 'product image', loading: 'eager',
+  }));
   const verticalSlides = div();
   allImages.map((image, index) => {
     const imageElement = img({ src: image, alt: `product image ${index + 1}` });
@@ -49,7 +51,6 @@ function imageSlider(allImages) {
     const showMore = div({ class: 'view-more' }, 'View More ->');
     showMore.addEventListener('click', loadMore);
     verticalSlides.append(showMore);
-    return div({ class: 'vertical-gallery-container' }, div(slideContent, verticalSlides));
   }
   return div({ class: 'vertical-gallery-container' }, div(slideContent, verticalSlides));
 }
@@ -128,7 +129,7 @@ export default async function decorate(block) {
     const rfqEl = block.querySelector('div')?.firstElementChild;
     if (rfqEl && rfqEl.textContent && rfqEl.textContent === 'Request for Quote') {
       rfqEl.classList.add(...'btn-outline-trending-brand text-lg rounded-full px-4 py-2 !no-underline'.split(' '));
-      const rfqParent = p({ class: 'show-modal-btn lg:w-[36%] pt-6 cursor-pointer' }, rfqEl);
+      const rfqParent = p({ class: 'show-modal-btn lg:w-55 pt-6 cursor-pointer' }, rfqEl);
       defaultContent.append(rfqParent);
     }
 

diff --git a/scripts/scripts.js b/scripts/scripts.js
@@ -403,7 +403,7 @@ function lazyLoadHiddenPageNavTabs(sections, nameOfFirstSection) {
       setTimeout(() => {
         observer.disconnect();
         loadLazyBlocks(section);
-      }, 3500);
+      }, 5000);
     }
   });
 }

diff --git a/styles/styles.css b/styles/styles.css
@@ -1313,8 +1313,10 @@ button.suggestion.selected {
 .product-hero-container {
     --tw-bg-opacity: 1;
     background-color: rgb(249 250 251 / var(--tw-bg-opacity));
-    padding-top: 1.5rem;
-    padding-bottom: 6rem;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+    padding-top: 0.5rem;
+    padding-bottom: 8rem;
 }
 
 .product-hero {
@@ -1467,6 +1469,8 @@ button.suggestion.selected {
 }
 
 .product-hero .vertical-gallery-container > div div:nth-child(1) img {
+    margin-left: auto;
+    margin-right: auto;
     height: 20rem;
     width: 100%;
     max-width: 360px;
@@ -2563,7 +2567,7 @@ main .default-content-wrapper h2, main .accordion-wrapper h2 {
     padding-right: 0.75rem;
 }
 
-main .section:not(.stretch) {
+main .section:not(.stretch, .product-hero-container) {
     padding-left: 1.5rem;
     padding-right: 1.5rem;
     padding-top: 4rem;
@@ -2572,7 +2576,7 @@ main .section:not(.stretch) {
 
 @media (min-width: 640px) {
 
-    main .section:not(.stretch) {
+    main .section:not(.stretch, .product-hero-container) {
         padding-top: 4rem;
         padding-bottom: 4rem;
     }
@@ -3216,10 +3220,6 @@ main .default-content-wrapper ul {
     list-style-type: disc;
 }
 
-main .section.product-hero-container {
-    padding: 0.5rem;
-}
-
 .sr-only {
     position: absolute;
     width: 1px;
@@ -4691,10 +4691,6 @@ main .section.product-hero-container {
     padding-bottom: 0.75rem !important;
 }
 
-.\!pb-32 {
-    padding-bottom: 8rem !important;
-}
-
 .\!pt-4 {
     padding-top: 1rem !important;
 }
@@ -5838,8 +5834,8 @@ main .section.top-border {
         width: 11rem;
     }
 
-    .lg\:w-\[36\%\] {
-        width: 36%;
+    .lg\:w-55 {
+        width: 14rem;
     }
 
     .lg\:w-recent-articles {

diff --git a/styles/tailwind.css b/styles/tailwind.css
@@ -97,7 +97,7 @@
     @apply h-full w-full;
   }
 
-  main .section:not(.stretch) {
+  main .section:not(.stretch, .product-hero-container) {
     @apply px-6 py-16 sm:py-16;
   }
 
@@ -306,10 +306,6 @@
   main .default-content-wrapper ul {
     @apply list-disc;
   }
-
-  main .section.product-hero-container {
-    @apply p-2;
-  }
 }
 
 @layer utilities {