From f7f1479ced788df2a247bc0967f088ede87c9a3a Mon Sep 17 00:00:00 2001 From: Andreas Haller Date: Tue, 20 Feb 2024 10:49:32 +0100 Subject: [PATCH 1/7] load specification data for ship focus pages --- scripts/scripts.js | 41 +++++++++++++++++++++++++---------------- 1 file changed, 25 insertions(+), 16 deletions(-) diff --git a/scripts/scripts.js b/scripts/scripts.js index d14d6f3..606affd 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -1,8 +1,5 @@ import { sampleRUM, - buildBlock, - loadHeader, - loadFooter, decorateButtons, decorateIcons, decorateSections, @@ -11,22 +8,34 @@ import { waitForLCP, loadBlocks, loadCSS, + getMetadata, } from './aem.js'; const LCP_BLOCKS = []; // add your LCP blocks to the list -/** - * Builds hero block and prepends to main in a new section. - * @param {Element} main The container element - */ -function buildHeroBlock(main) { - const h1 = main.querySelector('h1'); - const picture = main.querySelector('picture'); - // eslint-disable-next-line no-bitwise - if (h1 && picture && (h1.compareDocumentPosition(picture) & Node.DOCUMENT_POSITION_PRECEDING)) { - const section = document.createElement('div'); - section.append(buildBlock('hero', { elems: [picture, h1] })); - main.prepend(section); +async function prepareSpecification(main) { + try { + if (!document.body.classList.contains('ship-focus')) { + return; + } + const specificationPath = getMetadata('specification'); + if (!specificationPath) { + return; + } + const specificationUrl = new URL(specificationPath); + const specificationsResponse = await fetch('/specifications/ships/query-index.json'); + if (!specificationsResponse.ok) { + return; + } + const specifications = await specificationsResponse.json(); + const specification = specifications.data.find((s) => s.path === specificationUrl.pathname); + if (!specification) { + return; + } + document.body.dataset.features = specification.features; + document.body.dataset.specification = specification.specifications; + } catch (e) { + console.error('could not load specifications', e); } } @@ -48,7 +57,7 @@ async function loadFonts() { */ function buildAutoBlocks(main) { try { - buildHeroBlock(main); + prepareSpecification(main); } catch (error) { // eslint-disable-next-line no-console console.error('Auto Blocking failed', error); From 7952e49dd8b226cc61e7dab95992437c5729d011 Mon Sep 17 00:00:00 2001 From: Andreas Haller Date: Tue, 27 Feb 2024 11:01:27 +0100 Subject: [PATCH 2/7] fixed specification path --- scripts/scripts.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/scripts/scripts.js b/scripts/scripts.js index 606affd..4ac369c 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -18,12 +18,12 @@ async function prepareSpecification(main) { if (!document.body.classList.contains('ship-focus')) { return; } - const specificationPath = getMetadata('specification'); + const specificationPath = getMetadata('specifications'); if (!specificationPath) { return; } const specificationUrl = new URL(specificationPath); - const specificationsResponse = await fetch('/specifications/ships/query-index.json'); + const specificationsResponse = await fetch('/specifications/query-index.json'); if (!specificationsResponse.ok) { return; } From eaeb0e57564f498580755afa9fca07f232a600fb Mon Sep 17 00:00:00 2001 From: Nagaraj Devendhiran Date: Tue, 27 Feb 2024 14:20:32 +0100 Subject: [PATCH 3/7] NA - Style focus page heading, texts and images --- styles/styles.css | 54 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 54 insertions(+) diff --git a/styles/styles.css b/styles/styles.css index 2f14ba0..eaacc01 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -217,6 +217,60 @@ main .section.highlight { color: var(--midnight-blue-color); } +.default-content-wrapper h2 { + margin-top: 60px; +} + +.default-content-wrapper h3:nth-child(odd) { + float: right; + width: 50%; + padding-left: 50%; + font-size: var(--paragraph-font-size); + margin-top: 80px; +} + +.default-content-wrapper h3:nth-child(odd) + p { + float: left; + width: 50%; + margin-top: -30px; + height: 306px; +} + +.default-content-wrapper h3:nth-child(odd) + p img{ + height: 100%; +} + +.default-content-wrapper h3:nth-child(even) { + float: left; + width: 50%; + padding-right: 50%; + 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 h3:nth-child(even) + p img{ + height: 100%; + float: right; +} + +.default-content-wrapper h3:nth-child(odd) + p + p { + padding-left: 50%; + line-height: 27px; +} + +.default-content-wrapper h3:nth-child(even) + p + p { + padding-right: 50%; + line-height: 27px; +} + /* stylelint-disable-next-line no-descending-specificity */ p { From 555c3c38a3ced9f68ce52f3bb8d866978894a34f Mon Sep 17 00:00:00 2001 From: Nagaraj Devendhiran Date: Tue, 27 Feb 2024 17:36:10 +0100 Subject: [PATCH 4/7] NA - Updated speed info and specs --- scripts/scripts.js | 43 ++++++++++++++++++++++++++++++++++++++ styles/styles.css | 51 ++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 94 insertions(+) diff --git a/scripts/scripts.js b/scripts/scripts.js index 7b65a1a..c002510 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -16,6 +16,32 @@ import { const LCP_BLOCKS = []; // add your LCP blocks to the list +function addSpeedInformation(info, containerElement) { + const infoElement = document.createElement('div'); + + infoElement.classList.add('info'); + + const texts = info.split(' '); + const result = `${texts[0]}${texts.slice(1).join(' ')}`; + + infoElement.innerHTML = result; + containerElement.appendChild(infoElement); +} + +function addSpecifications(specs) { + const specContainer = document.createElement('div'); + + specContainer.classList.add('spec-container'); + + const content = `

SPECIFICATIONS

Learn more about the ${document.querySelector('h1').textContent} and its technical specifications.

+ +
lengthwidthheightweight
${specs.Length}${specs.Width}${specs.Height}${specs.Weight}
`; + specContainer.innerHTML = content; + + const parentElement = document.querySelector('body.ship-focus .default-content-wrapper'); + parentElement.appendChild(specContainer); +} + async function prepareSpecification(main) { try { if (!document.body.classList.contains('ship-focus')) { @@ -35,6 +61,23 @@ async function prepareSpecification(main) { if (!specification) { return; } + + const specificationsObj = JSON.parse(specification.specifications); + const infoContainer = document.createElement('div'); + const titleElement = document.querySelector('h2'); + + 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); + } + addSpecifications(specificationsObj); + + infoContainer.classList.add('info-container'); + titleElement.parentNode.insertBefore(infoContainer, titleElement); + + // these dataset are reference and will be removed later document.body.dataset.features = specification.features; document.body.dataset.specification = specification.specifications; } catch (e) { diff --git a/styles/styles.css b/styles/styles.css index bfb3803..6424cc6 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -271,7 +271,58 @@ main .section.highlight { line-height: 27px; } +.default-content-wrapper .info-container { + position: absolute; + top: 550px; + right: 130px; +} + +.default-content-wrapper .info-container .info-number { + font-size: 50px; + line-height: 70px; + font-weight: 300; +} + +.default-content-wrapper .info-container .info-text { + font-size: 15px; + line-height: 24px; + padding-left: 5px; + vertical-align: super; +} + +.default-content-wrapper .info { + background-color: var(--background-color); + opacity: 0.9; + padding: 10px 20px; + margin-bottom: 20px; +} + +.default-content-wrapper .spec-container { + 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 table { + width: 100%; + margin-top: 37px; +} + +.default-content-wrapper .spec-container th { + font-size: 15px; + line-height: 24px; + font-weight: 400; + text-align: left; +} + +.default-content-wrapper .spec-container td { + font-size: 20px; + line-height: 26px; + font-weight: 600; +} /* stylelint-disable-next-line no-descending-specificity */ p { font-size: var(--paragraph-font-size); From 63f364142de34f0a0ad2ab37d3d522e2b246cedd Mon Sep 17 00:00:00 2001 From: Nagaraj Devendhiran Date: Tue, 27 Feb 2024 17:44:29 +0100 Subject: [PATCH 5/7] NA - resolved lint error by removing unused variable main --- scripts/scripts.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/scripts.js b/scripts/scripts.js index c002510..b672f66 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -42,7 +42,7 @@ function addSpecifications(specs) { parentElement.appendChild(specContainer); } -async function prepareSpecification(main) { +async function prepareSpecification() { try { if (!document.body.classList.contains('ship-focus')) { return; From 9658004691d8e58956ea7ba6be0d215a9e348fd1 Mon Sep 17 00:00:00 2001 From: Nagaraj Devendhiran Date: Wed, 28 Feb 2024 18:57:57 +0100 Subject: [PATCH 6/7] 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 { From 370a46cdaa98bdd8d85e807189b3a3bf6e63e049 Mon Sep 17 00:00:00 2001 From: Alexis Coelho Date: Thu, 29 Feb 2024 08:37:51 +0100 Subject: [PATCH 7/7] NA - Fix page overflow --- styles/baseModel.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles/baseModel.css b/styles/baseModel.css index 8d63469..080059b 100644 --- a/styles/baseModel.css +++ b/styles/baseModel.css @@ -37,8 +37,8 @@ body.ship-focus .default-content-wrapper .main-group > h1:first-child { color: var(--dark-blue); text-transform: uppercase; transform: skew(40deg); - padding-left: 400px; line-height: 150px; + width: 60%; } body.ship-focus .default-content-wrapper .main-group > h1:first-child .rotate {