28 - Style engine focus page

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

Hide file tree

Showing 3 changed files with 101 additions and 0 deletions.
diff --git a/scripts/aem.js b/scripts/aem.js
@@ -21,6 +21,7 @@
  * @param {string} data.target subject of the checkpoint event,
  * for instance the href of a link, or a search term
  */
+
 function sampleRUM(checkpoint, data = {}) {
   sampleRUM.defer = sampleRUM.defer || [];
   const defer = (fnname) => {
@@ -633,6 +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');
+
+  if (engineFocusH1) {
+    engineFocusH1.innerHTML = `Selected Spaceship: ${engineFocusH1.textContent}`;
+  }
+
+  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);
+  }
+}
+
 function decorateGroups() {
   const parentElement = document.querySelector('body.ship-focus .default-content-wrapper');
   if (!parentElement) {
@@ -757,6 +782,7 @@ export {
   decorateTemplateAndTheme,
   decorateSpaceshipFocusPageH1,
   decorateGroups,
+  decorateEngineFocusPage,
   fetchPlaceholders,
   getMetadata,
   loadBlock,

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

diff --git a/styles/styles.css b/styles/styles.css
@@ -10,6 +10,8 @@
   --text-color: black;
   --midnight-blue-color: #000048;
   --dark-blue: #2F78C4;
+  --dark-teal: #11C7CC;
+
 
   /* fonts */
   --body-font-family: "Gellix", "Gellix-fallback";
@@ -391,6 +393,77 @@ main .section.highlight {
   line-height: 26px;
   font-weight: 600;
 }
+
+body.engine-focus .section {
+  padding: 0;
+}
+
+body.engine-focus .default-content-wrapper { 
+  display: grid; 
+  grid-template-rows: 1fr 1fr;
+  grid-template-columns: 1fr 1fr;
+  gap: 0;
+  height: 100%;
+  max-width: 100%;
+}
+
+body.engine-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 {
+  margin-right: 117px;
+  margin-left: 56px;
+  font-size: var(--paragraph-font-size);
+}
+
+body.engine-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 {
+  line-height: 27px;
+  margin-top: 30px;
+  margin-bottom: 35px;
+}
+
+body.engine-focus .default-content-wrapper .group .btn-select {
+  padding: 15px 45px 15px 25px;
+  border-radius: 100px;
+  background-color: var(--dark-teal);
+  line-height: 20px;
+  color: var(--midnight-blue-color);
+  font-size: var(--paragraph-font-size);
+  margin: 0;
+}
+
+body.engine-focus .default-content-wrapper .group .btn-select::after {
+  content: url('../app/arrow-right-bold.svg');
+  width: 20px;
+  height: 20px;
+  display: inline-block;
+  position: absolute;
+  padding-left: 5px;
+}
+/* stylelint-disable-next-line no-descending-specificity */
+body.engine-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 {
+  height: 100%;
+}
+
 /* stylelint-disable-next-line no-descending-specificity */
 p {
   font-size: var(--paragraph-font-size);