Skip to content

Commit

Permalink
Merge pull request #23 from Netcentric/feature/style-focus-page
Browse files Browse the repository at this point in the history 
Styling focus page to similar design
  • Loading branch information
@alexiscoelho
alexiscoelho authored Feb 29, 2024
2 parents cee7c9c + 370a46c commit 59e42a1
Show file tree
Hide file tree
Showing 4 changed files with 273 additions and 21 deletions.
52 changes: 51 additions & 1 deletion scripts/aem.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -704,6 +753,7 @@ export {
decorateSections,
decorateTemplateAndTheme,
decorateSpaceshipFocusPageH1,
decorateGroups,
fetchPlaceholders,
getMetadata,
loadBlock,
Expand Down
86 changes: 72 additions & 14 deletions scripts/scripts.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import {
sampleRUM,
buildBlock,
// loadHeader,
// loadFooter,
decorateButtons,
Expand All @@ -9,25 +8,83 @@ import {
decorateBlocks,
decorateTemplateAndTheme,
decorateSpaceshipFocusPageH1,
decorateGroups,
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);
function addSpeedInformation(info, containerElement) {
const infoElement = document.createElement('div');

infoElement.classList.add('info');

const texts = info.split(' ');
const result = `<span class="info-number">${texts[0]}</span><span class="info-text">${texts.slice(1).join(' ')}</span>`;

infoElement.innerHTML = result;
containerElement.appendChild(infoElement);
}

function addSpecifications(specs) {
const specContainer = document.createElement('div');

specContainer.classList.add('spec-container');

const content = `<h2>SPECIFICATIONS</h2><div><p>Learn more about the ${document.querySelector('h1').textContent} and its technical specifications.</p></div>
<table class="spec-table"><tr><th>length</th><th>width</th><th>height</th><th>weight</th></tr>
<tr><td>${specs.Length}</td><td>${specs.Width}</td><td>${specs.Height}</td><td>${specs.Weight}</td></tr><table></div>`;
specContainer.innerHTML = content;

const parentElement = document.querySelector('body.ship-focus .default-content-wrapper');
parentElement.appendChild(specContainer);
}

async function prepareSpecification() {
try {
if (!document.body.classList.contains('ship-focus')) {
return;
}
const specificationPath = getMetadata('specifications');
if (!specificationPath) {
return;
}
const specificationUrl = new URL(specificationPath);
const specificationsResponse = await fetch('/specifications/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;
}

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(specificationsObj['Number of Passengers'], infoContainer);
addSpeedInformation(specificationsObj.Length, 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) {
// eslint-disable-next-line no-console
console.error('could not load specifications', e);
}
}

Expand All @@ -49,7 +106,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);
Expand All @@ -68,6 +125,7 @@ export function decorateMain(main) {
buildAutoBlocks(main);
decorateSections(main);
decorateBlocks(main);
decorateGroups();
decorateSpaceshipFocusPageH1();
}

Expand Down
21 changes: 16 additions & 5 deletions styles/baseModel.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -26,11 +37,11 @@ body.ship-focus .default-content-wrapper > 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 > 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);
Expand Down
135 changes: 134 additions & 1 deletion styles/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -217,9 +217,142 @@ main .section.highlight {
color: var(--midnight-blue-color);
}

.default-content-wrapper h2 {
margin-top: 60px;
}

.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 .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 .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 .block:nth-child(odd) h3 {
order: 1;
margin-bottom: 0;
margin-top: 24px;
font-size: var(--paragraph-font-size);
}

.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 .block:nth-child(even) h3 {
order: 2;
margin-bottom: 0;
margin-top: 24px;
font-size: var(--paragraph-font-size);
}

/* 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 .block:nth-child(even) p:last-child {
order: 3;
margin-top: 10px;
width: 60%;
}

.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;
}

.default-content-wrapper .spec-container h2{
clear: both;
}

.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);
}

0 comments on commit 59e42a1

Please sign in to comment.