From 9658004691d8e58956ea7ba6be0d215a9e348fd1 Mon Sep 17 00:00:00 2001 From: Nagaraj Devendhiran Date: Wed, 28 Feb 2024 18:57:57 +0100 Subject: [PATCH] NA - Additional styling done but still lot to do --- scripts/aem.js | 52 +++++++++++++++++++++++- scripts/scripts.js | 8 +++- styles/baseModel.css | 19 +++++++-- styles/styles.css | 97 ++++++++++++++++++++++++++++---------------- 4 files changed, 135 insertions(+), 41 deletions(-) diff --git a/scripts/aem.js b/scripts/aem.js index f04b8e8..650b49c 100644 --- 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 index b672f66..d5ba0a8 100644 --- 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 index 5967b6b..8d63469 100644 --- 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 index 6424cc6..7565f39 100644 --- 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 {