30 - Style interior and exterior focus page

Netcentric · Feb 29, 2024 · 9c41fb4 · 9c41fb4
1 parent 6ef5f7f
commit 9c41fb4
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 31 deletions.
diff --git a/scripts/aem.js b/scripts/aem.js
@@ -634,28 +634,30 @@ function decorateBlocks(main) {
   main.querySelectorAll('div.section > div > div').forEach(decorateBlock);
 }
 
-function decorateEngineFocusPage() {
-  const parentElement = document.querySelector('body.engine-focus .default-content-wrapper');
-  const engineFocusH1 = document.querySelector('body.engine-focus .default-content-wrapper > h1:first-child');
+function decorateFocusPage(pageType) {
+  const parentElement = document.querySelector(`body.${pageType}-focus .default-content-wrapper`);
+  const focusH1 = document.querySelector(`body.${pageType}-focus .default-content-wrapper > h1:first-child`);
 
-  if (engineFocusH1) {
-    engineFocusH1.innerHTML = `Selected Spaceship: ${engineFocusH1.textContent}`;
+  if (!parentElement) {
+    return;
   }
 
-  if (parentElement) {
-    const groupElement = document.createElement('div');
-    const engineFocusH2 = parentElement.querySelector('h2');
-    const buttonSelect = document.createElement('button');
-    groupElement.classList.add('group');
-    buttonSelect.classList.add('btn-select');
-    buttonSelect.textContent = 'Select ';
-
-    const description = parentElement.querySelector('h2 + p');
-    groupElement.appendChild(engineFocusH2);
-    groupElement.appendChild(description);
-    groupElement.appendChild(buttonSelect);
-    parentElement.appendChild(groupElement);
+  if (focusH1) {
+    focusH1.innerHTML = `Selected Spaceship: ${focusH1.textContent}`;
   }
+
+  const groupElement = document.createElement('div');
+  const focusH2 = parentElement.querySelector('h2');
+  const buttonSelect = document.createElement('button');
+  groupElement.classList.add('group');
+  buttonSelect.classList.add('btn-select');
+  buttonSelect.textContent = 'Select ';
+
+  const description = parentElement.querySelector('h2 + p');
+  groupElement.appendChild(focusH2);
+  groupElement.appendChild(description);
+  groupElement.appendChild(buttonSelect);
+  parentElement.appendChild(groupElement);
 }
 
 function decorateGroups() {
@@ -782,7 +784,7 @@ export {
   decorateTemplateAndTheme,
   decorateSpaceshipFocusPageH1,
   decorateGroups,
-  decorateEngineFocusPage,
+  decorateFocusPage,
   fetchPlaceholders,
   getMetadata,
   loadBlock,

diff --git a/scripts/scripts.js b/scripts/scripts.js
@@ -13,7 +13,7 @@ import {
   loadBlocks,
   loadCSS,
   getMetadata,
-  decorateEngineFocusPage,
+  decorateFocusPage,
 } from './aem.js';
 
 const LCP_BLOCKS = []; // add your LCP blocks to the list
@@ -128,7 +128,9 @@ export function decorateMain(main) {
   decorateBlocks(main);
   decorateGroups();
   decorateSpaceshipFocusPageH1();
-  decorateEngineFocusPage();
+  decorateFocusPage('engine');
+  decorateFocusPage('interior');
+  decorateFocusPage('accessory');
 }
 
 /**

diff --git a/styles/styles.css b/styles/styles.css
@@ -394,11 +394,15 @@ main .section.highlight {
   font-weight: 600;
 }
 
-body.engine-focus .section {
+body.engine-focus .section,
+body.interior-focus .section,
+body.accessory-focus .section {
   padding: 0;
 }
 
-body.engine-focus .default-content-wrapper { 
+body.engine-focus .default-content-wrapper,
+body.interior-focus .default-content-wrapper,
+body.accessory-focus .default-content-wrapper { 
   display: grid; 
   grid-template-rows: 1fr 1fr;
   grid-template-columns: 1fr 1fr;
@@ -407,33 +411,43 @@ body.engine-focus .default-content-wrapper {
   max-width: 100%;
 }
 
-body.engine-focus .default-content-wrapper h1 {
+body.engine-focus .default-content-wrapper h1,
+body.interior-focus .default-content-wrapper h1,
+body.accessory-focus .default-content-wrapper h1 {
   grid-row: 1 / 1;
   grid-column: 1 / 2;
   font-size: var(--paragraph-font-size);
   line-height: 26px;
   margin: 64px 102px 0 56px;
 }
 
-body.engine-focus .default-content-wrapper .group {
+body.engine-focus .default-content-wrapper .group,
+body.interior-focus .default-content-wrapper .group,
+body.accessory-focus .default-content-wrapper .group {
   margin-right: 117px;
   margin-left: 56px;
   font-size: var(--paragraph-font-size);
 }
 
-body.engine-focus .default-content-wrapper .group h2 {
+body.engine-focus .default-content-wrapper .group h2,
+body.interior-focus .default-content-wrapper .group h2,
+body.accessory-focus .default-content-wrapper .group h2 {
   line-height: 26px;
   font-size: var(--paragraph-font-size);
 }
 
 /* stylelint-disable-next-line no-descending-specificity */
-body.engine-focus .default-content-wrapper .group h2 + p {
+body.engine-focus .default-content-wrapper .group h2 + p,
+body.interior-focus .default-content-wrapper .group h2 + p,
+body.accessory-focus .default-content-wrapper .group h2 + p {
   line-height: 27px;
   margin-top: 30px;
   margin-bottom: 35px;
 }
 
-body.engine-focus .default-content-wrapper .group .btn-select {
+body.engine-focus .default-content-wrapper .group .btn-select,
+body.interior-focus .default-content-wrapper .group .btn-select,
+body.accessory-focus .default-content-wrapper .group .btn-select {
   padding: 15px 45px 15px 25px;
   border-radius: 100px;
   background-color: var(--dark-teal);
@@ -443,7 +457,9 @@ body.engine-focus .default-content-wrapper .group .btn-select {
   margin: 0;
 }
 
-body.engine-focus .default-content-wrapper .group .btn-select::after {
+body.engine-focus .default-content-wrapper .group .btn-select::after,
+body.interior-focus .default-content-wrapper .group .btn-select::after,
+body.accessory-focus .default-content-wrapper .group .btn-select::after {
   content: url('../app/arrow-right-bold.svg');
   width: 20px;
   height: 20px;
@@ -452,15 +468,19 @@ body.engine-focus .default-content-wrapper .group .btn-select::after {
   padding-left: 5px;
 }
 /* stylelint-disable-next-line no-descending-specificity */
-body.engine-focus .default-content-wrapper h1 + p {
+body.engine-focus .default-content-wrapper h1 + p,
+body.interior-focus .default-content-wrapper h1 + p,
+body.accessory-focus .default-content-wrapper h1 + p {
   grid-row: 1 / 4;
   grid-column: 2 / 3;
   margin: 0;
   height: 100vh;
 }
 
 /* stylelint-disable-next-line no-descending-specificity */
-body.engine-focus .default-content-wrapper h1 + p img {
+body.engine-focus .default-content-wrapper h1 + p img,
+body.interior-focus .default-content-wrapper h1 + p img,
+body.accessory-focus .default-content-wrapper h1 + p img {
   height: 100%;
 }