NA - Additional styling done but still lot to do

Netcentric · Feb 28, 2024 · 9658004 · 9658004
1 parent 63f3641
commit 9658004
Show file tree

Hide file tree

Showing 4 changed files with 135 additions and 41 deletions.
diff --git a/scripts/aem.js b/scripts/aem.js
@@ -633,8 +633,57 @@ function decorateBlocks(main) {
   main.querySelectorAll('div.section > div > div').forEach(decorateBlock);
 }
 
+function decorateGroups() {
+  const parentElement = document.querySelector('body.ship-focus .default-content-wrapper');
+  const groupContainer = document.createElement('div');
+  const subcontainer = document.createElement('div');
+  let groupElement = document.createElement('div');
+  let isCard = false;
+  let child = parentElement.firstChild;
+  subcontainer.classList.add('blocks');
+  groupElement.classList.add('main-group');
+
+  while (child) {
+    if (groupElement.children.length > 0) {
+      switch (child.nodeName) {
+        case 'H1':
+          groupContainer.appendChild(groupElement);
+          groupElement = document.createElement('div');
+          break;
+        case 'H2':
+          groupContainer.appendChild(groupElement);
+          groupElement = document.createElement('div');
+          groupElement.classList.add('sub-group');
+          break;
+        case 'H3':
+          if (!isCard) {
+            groupContainer.appendChild(groupElement);
+          } else {
+            subcontainer.appendChild(groupElement);
+          }
+          groupElement = document.createElement('div');
+          groupElement.classList.add('block');
+          isCard = true;
+          break;
+        default:
+          break;
+      }
+      groupElement.appendChild(child);
+    } else {
+      groupElement.appendChild(child);
+    }
+    child = parentElement.firstChild;
+
+    if (!child) {
+      subcontainer.appendChild(groupElement);
+      groupContainer.appendChild(subcontainer);
+    }
+  }
+  parentElement.appendChild(groupContainer);
+}
+
 function decorateSpaceshipFocusPageH1() {
-  const spaceshipFocusPageH1Element = document.querySelector('body.ship-focus .default-content-wrapper > h1:first-child');
+  const spaceshipFocusPageH1Element = document.querySelector('body.ship-focus .default-content-wrapper .main-group h1');
 
   if (spaceshipFocusPageH1Element) {
     const innerText = spaceshipFocusPageH1Element.textContent.trim();
@@ -704,6 +753,7 @@ export {
   decorateSections,
   decorateTemplateAndTheme,
   decorateSpaceshipFocusPageH1,
+  decorateGroups,
   fetchPlaceholders,
   getMetadata,
   loadBlock,

diff --git a/scripts/scripts.js b/scripts/scripts.js
@@ -8,6 +8,7 @@ import {
   decorateBlocks,
   decorateTemplateAndTheme,
   decorateSpaceshipFocusPageH1,
+  decorateGroups,
   waitForLCP,
   loadBlocks,
   loadCSS,
@@ -69,9 +70,10 @@ async function prepareSpecification() {
     if (specificationsObj.Range) {
       addSpeedInformation(specificationsObj.Range, infoContainer);
       // Temp content as it is not received from document
-      addSpeedInformation('570 light years', infoContainer);
-      addSpeedInformation('2.6 Sec', infoContainer);
+      addSpeedInformation(specificationsObj['Number of Passengers'], infoContainer);
+      addSpeedInformation(specificationsObj.Length, infoContainer);
     }
+
     addSpecifications(specificationsObj);
 
     infoContainer.classList.add('info-container');
@@ -81,6 +83,7 @@ async function prepareSpecification() {
     document.body.dataset.features = specification.features;
     document.body.dataset.specification = specification.specifications;
   } catch (e) {
+    // eslint-disable-next-line no-console
     console.error('could not load specifications', e);
   }
 }
@@ -122,6 +125,7 @@ export function decorateMain(main) {
   buildAutoBlocks(main);
   decorateSections(main);
   decorateBlocks(main);
+  decorateGroups();
   decorateSpaceshipFocusPageH1();
 }
 

diff --git a/styles/baseModel.css b/styles/baseModel.css
@@ -6,15 +6,26 @@ body.ship-focus .default-content-wrapper {
   max-width: 100%;
 }
 
-body.ship-focus .default-content-wrapper p:not(p ~ p) {
+/* body.ship-focus .default-content-wrapper p:not(p ~ p) {
+  margin: 0 -130px;
+} */
+
+/* stylelint-disable-next-line no-descending-specificity */
+body.ship-focus .default-content-wrapper h1 + p {
+  max-height: 100vh;
+  display: block;
+  overflow-y: hidden;
   margin: 0 -130px;
 }
 
 body.ship-focus .default-content-wrapper p:not(p ~ p) img {
-  width: 100%;
+  width: 100vw;
+  height: 100vh;
+  object-fit: cover;
 }
 
-body.ship-focus .default-content-wrapper > h1:first-child {
+
+body.ship-focus .default-content-wrapper .main-group > h1:first-child {
   position: absolute;
   left: 0;
   right: 0;
@@ -30,7 +41,7 @@ body.ship-focus .default-content-wrapper > h1:first-child {
   line-height: 150px;
 }
 
-body.ship-focus .default-content-wrapper > h1:first-child .rotate {
+body.ship-focus .default-content-wrapper .main-group > h1:first-child .rotate {
   position: relative;
   white-space: pre-wrap;
   transform: skew(-40deg);

diff --git a/styles/styles.css b/styles/styles.css
@@ -221,54 +221,84 @@ main .section.highlight {
   margin-top: 60px;
 }
 
-.default-content-wrapper h3:nth-child(odd) {
-  float: right;
-  width: 50%;
-  padding-left: 50%;
-  font-size: var(--paragraph-font-size);
+.default-content-wrapper .sub-group p {
+  line-height: 27px;
+}
+
+/* 
+.default-content-wrapper .blocks {
+  display: flex;
+  flex-wrap: wrap;
   margin-top: 80px;
+  gap: 107px;
+} 
+
+.default-content-wrapper .block:first-child {
+  flex-basis: 55%;
 }
 
-.default-content-wrapper h3:nth-child(odd) + p {
-  float: left;
-  width: 50%;
-  margin-top: -30px;
-  height: 306px;
+.default-content-wrapper .block:nth-child(2),
+.default-content-wrapper .block:nth-child(3) {
+  flex-basis: 30%;
+} */
+
+.default-content-wrapper .blocks {
+  display: flex;
+  flex-direction: column;
+  margin-top: 80px;
+  gap: 42px;
 }
 
-.default-content-wrapper h3:nth-child(odd) + p img{
-  height: 100%;
+.default-content-wrapper .block {
+  display: flex;
+  flex-direction: column;
+  /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
+  flex-wrap: wrap;
+  font-size: var(--paragraph-font-size);
+  line-height: 27px;
+  width: 100%;
+  height: 500px;
+  overflow: hidden;
 }
 
-.default-content-wrapper h3:nth-child(even) {
-  float: left;
-  width: 50%;
-  padding-right: 50%;
+.default-content-wrapper .block:nth-child(odd) h3 {
+  order: 1;
+  margin-bottom: 0;
+  margin-top: 24px;
   font-size: var(--paragraph-font-size);
-  margin-top: 80px;
 }
 
-.default-content-wrapper h3:nth-child(even) + p {
-  float: right;
-  width: 50%;
-  margin-top: -30px;
-  height: 306px;
+.default-content-wrapper .block:nth-child(odd) h3 + p {
+  order: 3;
+  margin-top: 0;
+  margin-left: 106px;
 }
 
+.default-content-wrapper .block:nth-child(odd) p:last-child {
+  order: 2;
+  margin-top: 10px;
+  width: 40%;
+}
 
-.default-content-wrapper h3:nth-child(even) + p img{
-  height: 100%;
-  float: right;
+.default-content-wrapper .block:nth-child(even) h3 {
+  order: 2;
+  margin-bottom: 0;
+  margin-top: 24px;
+  font-size: var(--paragraph-font-size);
 }
 
-.default-content-wrapper h3:nth-child(odd) + p + p {
-  padding-left: 50%;
-  line-height: 27px;
+/* stylelint-disable-next-line no-descending-specificity */
+.default-content-wrapper .block:nth-child(even) h3 + p {
+  order: 1;
+  margin-top: 0;
+  width: 30%;
+  margin-right: 106px;
 }
 
-.default-content-wrapper h3:nth-child(even) + p + p {
-  padding-right: 50%;
-  line-height: 27px;
+.default-content-wrapper .block:nth-child(even) p:last-child {
+  order: 3;
+  margin-top: 10px;
+  width: 60%;
 }
 
 .default-content-wrapper .info-container {
@@ -301,9 +331,8 @@ main .section.highlight {
   margin-top: 86px;
 }
 
-/* stylelint-disable-next-line no-descending-specificity */
-.default-content-wrapper .spec-container p {
-  margin-left: 0 !important;
+.default-content-wrapper .spec-container h2{
+  clear: both;
 }
 
 .default-content-wrapper .spec-container table {