Image content grid block (#358)

* Navattic hamburger icons. * Image content grid block. * Image content grid css fixes. * Css updated fixes. * Image content grid multiple blocks. * Spacing issue fix. * Spacing below main title fix.
hlxsites · Nov 29, 2023 · fd4e099 · fd4e099
1 parent 884c6ae
commit fd4e099
Show file tree

Hide file tree

Showing 2 changed files with 250 additions and 0 deletions.
diff --git a/blocks/image-content-grid/image-content-grid.css b/blocks/image-content-grid/image-content-grid.css
@@ -0,0 +1,196 @@
+main .image-content-grid-container {
+  width: 100%;
+}
+
+main .image-content-grid-container .main-image-content-grid-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.image-content-grid-container .image-content-grid-wrapper > p {
+  font-size: var(--font-size-11);
+  font-family: var(--sans-serif-font-medium);
+  line-height: var(--line-height-120); /* 16.8px */
+  letter-spacing: var(--letter-spacing-02-em);
+  text-transform: uppercase;
+  margin: 0;
+}
+
+.image-content-grid-container .image-content-grid-wrapper > h2 {
+  margin: unset;
+  margin-top: var(--spacer-element-08);
+  width: 85%;
+}
+
+.image-content-grid-container .default-content-wrapper {
+  display: none;
+}
+
+.image-content-grid-container .image-content-grid-wrapper .image-content-grid {
+  position: relative;
+  display: grid;
+  grid-template-columns: 1fr;
+}
+
+.image-content-grid-container .image-content-grid-wrapper .image-content-grid div p {
+  font-size: var(--font-size-16);
+  letter-spacing: var(--letter-spacing-001-em);
+  margin: var(--spacer-element-05) 0 var(--spacer-element-07) 0;
+  line-height: var(--line-height-160);
+}
+
+.image-content-grid-container .image-content-grid-wrapper .image-content-grid div p span svg {
+  height: var(--spacer-layout-03);
+  width: auto;
+}
+
+.image-content-grid-container .image-content-grid-wrapper .image-content-grid div p:first-child {
+  margin: unset;
+}
+
+.image-content-grid-container .image-content-grid-wrapper .image-content-grid div {
+  width: 100%;
+  margin: 0 auto;
+  padding-top: var(--spacer-element-10);
+}
+
+.image-content-grid-container .image-content-grid-wrapper .image-content-grid div:last-child {
+  border-bottom: none;
+  padding-bottom: 0;
+}
+
+.image-content-grid-container .image-content-grid-wrapper .image-content-grid div h3 {
+  font-family: var(--sans-serif-font-medium);
+  font-size: var(--font-size-18);
+  line-height: var(--line-height-160);
+  letter-spacing: var(--letter-spacing-1);
+  margin: 0;
+}
+
+.image-content-grid-container .image-content-grid-wrapper .image-content-grid div .button-container {
+  margin: 0;
+}
+
+.image-content-grid-container .image-content-grid-wrapper .image-content-grid div a {
+  display: inline-block;
+  text-decoration: none;
+  font-family: var(--sans-serif-font-medium);
+  font-size: var(--font-size-16);
+  letter-spacing: var(--letter-spacing-1);
+  height: var(--spacer-element-06);
+  border-bottom: var(--spacer-element-01) solid var(--primary-purple);
+  color: var(--primary-purple);
+}
+
+.image-content-grid-container .image-content-grid-wrapper .image-content-grid div a:hover {
+  background: var(--gradient-left-right);
+  background-clip: text;
+  -webkit-background-clip: text; /* stylelint-disable-line */
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+  border-image-slice: 1;
+  border-image-source: var(--gradient-left-right);
+}
+
+@media only screen and (min-width: 768px) {
+  main .image-content-grid-container .main-image-content-grid-wrapper {
+    display: flex;
+    flex-flow: row nowrap;
+    padding: var(--spacer-layout-06) 0;
+    align-items: flex-start;
+    gap: 84px;
+    flex-shrink: 0;
+    margin: 0 auto;
+    width: calc(100% - 72px);
+  }
+
+  .section.image-content-grid-container .image-content-grid-wrapper  {
+    padding-bottom: 0;
+  }
+
+  .image-content-grid-container .default-content-wrapper {
+    display: block;
+    flex-shrink: 0;
+  }
+
+  .image-content-grid-container .image-content-grid-wrapper > h2 {
+    margin: unset;
+    margin-top: var(--spacer-element-07);
+    margin-bottom: var(--spacer-element-10);
+    width: 100%;
+  }
+
+  .image-content-grid-container .image-content-grid-wrapper .image-content-grid div:first-child {
+    padding-top: 0;
+  }
+
+  .main-image-content-grid-wrapper .default-content-wrapper > p > picture > img {
+    width: 163px;
+    border-bottom-right-radius: 163px;
+    border-top-right-radius: 163px;
+  }
+}
+
+@media only screen and (min-width: 1200px) {
+  main .image-content-grid-container .main-image-content-grid-wrapper {
+    width: var(--section-width-desktop);
+    padding: var(--spacer-layout-07) 0;
+    gap: var(--gap-120);
+  }
+
+  .image-content-grid-container .image-content-grid-wrapper > p {
+    font-size: var(--font-size-14);
+    letter-spacing: var(--letter-spacing-02-em);
+  }
+
+  .image-content-grid-container .image-content-grid-wrapper .image-content-grid div p {
+    max-width: 305px;
+  }
+
+  .image-content-grid-container .image-content-grid-wrapper > h2 {
+    margin: unset;
+    margin-top: var(--spacer-element-08);
+    margin-bottom: var(--spacer-element-05);
+  }
+
+  .image-content-grid-container .image-content-grid-wrapper .image-content-grid {
+    position: relative;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: auto auto auto;
+  }
+
+  .image-content-grid-container .image-content-grid-wrapper .image-content-grid div, .image-content-grid-container .image-content-grid-wrapper .image-content-grid div:first-child {
+    padding-top: var(--spacer-layout-04);
+  }
+
+  .main-image-content-grid-wrapper .default-content-wrapper > p > picture > img {
+    width: 265px;
+    border-bottom-right-radius: 265px;
+    border-top-right-radius: 265px;
+  }
+
+  .image-content-grid-container .image-content-grid-wrapper .image-content-grid div h3 {
+    font-size: var(--font-size-21);
+  }
+
+  .image-content-grid-container .image-content-grid-wrapper .image-content-grid div:nth-child(odd) > *, .image-content-grid-container .image-content-grid-wrapper .image-content-grid div:nth-child(odd) > p {
+    margin-right: 39px;
+  }
+
+  .image-content-grid-container .image-content-grid-wrapper .image-content-grid div:nth-child(even) > *, .image-content-grid-container .image-content-grid-wrapper .image-content-grid div:nth-child(even) > p {
+    margin-left: 39px;
+  }
+
+  /* no bottom padding for last row of cards */
+  .image-content-grid-container .image-content-grid-wrapper .image-content-grid div:nth-last-child(2), .image-content-grid-container .image-content-grid-wrapper .image-content-grid div:last-child {
+    padding-bottom: 0;
+  }
+
+  /* no border on last row of cards */
+  .image-content-grid-container .image-content-grid-wrapper .image-content-grid div:nth-child(2n + 1):nth-last-child(-n + 2),
+  .image-content-grid-container .image-content-grid-wrapper .image-content-grid div:nth-child(2n + 1):nth-child(2n + 1):nth-last-child(-n + 2) ~ .image-content-grid-container .image-content-grid-wrapper .image-content-grid div {
+    border-bottom: none;
+  }
+}
diff --git a/blocks/image-content-grid/image-content-grid.js b/blocks/image-content-grid/image-content-grid.js
@@ -0,0 +1,54 @@
+/* eslint-disable max-len */
+export default async function decorate(block) {
+  // Remove first level of nesting
+  const childDivs = block.querySelectorAll('.image-content-grid > div');
+
+  childDivs.forEach((childDiv) => {
+    while (childDiv.firstChild) {
+      block.appendChild(childDiv.firstChild);
+    }
+    childDiv.remove();
+  });
+
+  // Function to find the ancestor with the class .image-content-grid-container
+  function findImageContentGridContainer(element) {
+    let parent = element.parentElement;
+
+    while (parent) {
+      if (parent.classList.contains('image-content-grid-container')) {
+        return parent; // Return the element with the desired class
+      }
+      parent = parent.parentElement; // Move up to the next parent element
+    }
+
+    return null; // Return null if the ancestor isn't found
+  }
+
+  const imageContentGridContainer = findImageContentGridContainer(block);
+
+  // Create a new div element
+  const newWrapper = document.createElement('div');
+  newWrapper.classList.add('main-image-content-grid-wrapper');
+
+  // Iterate through the existing children and move them into the new div
+  while (imageContentGridContainer.firstChild) {
+    newWrapper.appendChild(imageContentGridContainer.firstChild);
+  }
+
+  // Append the new div back to the solution-list-container
+  imageContentGridContainer.appendChild(newWrapper);
+
+  // Get the parent element with class "default-content-wrapper"
+  const defaultContentWrapper = imageContentGridContainer.querySelector('.default-content-wrapper');
+
+  // Get the first p element among all p elements inside the default content wrapper
+  const firstPTag = defaultContentWrapper.querySelector('p');
+
+  // Get the h2 tag from default content wrapper
+  const heading = defaultContentWrapper.querySelector('h2');
+
+  // Select the image-content-grid-wrapper element
+  const imageContentGridWrapper = imageContentGridContainer.querySelector('.image-content-grid-wrapper');
+  imageContentGridWrapper.insertBefore(heading, imageContentGridWrapper.firstChild);
+  imageContentGridWrapper.insertBefore(firstPTag, imageContentGridWrapper.firstChild);
+}