Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Styling engine, interior and exterior focus pages #31

Merged
merged 5 commits into from
Mar 1, 2024
Merged

Styling engine, interior and exterior focus pages #31

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6ef5f7f
28 - Style engine focus page
nagarajnetcentric Feb 29, 2024
9c41fb4
30 - Style interior and exterior focus page
nagarajnetcentric Feb 29, 2024
3475894
30 - Updated focus page with image styling
nagarajnetcentric Mar 1, 2024
cfcb39a
30 - make image position center
nagarajnetcentric Mar 1, 2024
1220b03
30 - update style
nagarajnetcentric Mar 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 28 additions & 0 deletions scripts/aem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand Down Expand Up @@ -633,6 +634,32 @@ function decorateBlocks(main) {
main.querySelectorAll('div.section > div > div').forEach(decorateBlock);
}

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 (!parentElement) {
return;
}

const groupElement = document.createElement('div');
const subGroupElement = document.createElement('div');
const focusH2 = parentElement.querySelector('h2');
const description = parentElement.querySelector('h2 + p');

if (focusH1) {
focusH1.innerHTML = `Selected Spaceship: ${focusH1.textContent}`;
}

groupElement.classList.add('group');
subGroupElement.classList.add('sub-group');
groupElement.appendChild(focusH1);
subGroupElement.appendChild(focusH2);
subGroupElement.appendChild(description);
groupElement.appendChild(subGroupElement);
parentElement.appendChild(groupElement);
}

function decorateGroups() {
const parentElement = document.querySelector('body.ship-focus .default-content-wrapper');
if (!parentElement) {
Expand Down Expand Up @@ -757,6 +784,7 @@ export {
decorateTemplateAndTheme,
decorateSpaceshipFocusPageH1,
decorateGroups,
decorateFocusPage,
fetchPlaceholders,
getMetadata,
loadBlock,
Expand Down
4 changes: 4 additions & 0 deletions scripts/scripts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
loadBlocks,
loadCSS,
getMetadata,
decorateFocusPage,
} from './aem.js';

const LCP_BLOCKS = []; // add your LCP blocks to the list
Expand Down Expand Up @@ -127,6 +128,9 @@ export function decorateMain(main) {
decorateBlocks(main);
decorateGroups();
decorateSpaceshipFocusPageH1();
decorateFocusPage('engine');
decorateFocusPage('interior');
decorateFocusPage('accessory');
}

/**
Expand Down
78 changes: 78 additions & 0 deletions styles/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@
--text-color: black;
--midnight-blue-color: #000048;
--dark-blue: #2F78C4;
--dark-teal: #11C7CC;


/* fonts */
--body-font-family: "Gellix", "Gellix-fallback";
Expand Down Expand Up @@ -391,6 +393,82 @@ main .section.highlight {
line-height: 26px;
font-weight: 600;
}

body.engine-focus .section,
body.interior-focus .section,
body.accessory-focus .section {
padding: 0;
}

body.engine-focus .default-content-wrapper,
body.interior-focus .default-content-wrapper,
body.accessory-focus .default-content-wrapper {
display: flex;
height: 100%;
max-width: 100%;
flex-direction: row-reverse;
}

body.engine-focus .default-content-wrapper h1,
body.interior-focus .default-content-wrapper h1,
body.accessory-focus .default-content-wrapper h1 {
font-size: var(--paragraph-font-size);
line-height: 26px;
}

body.engine-focus .default-content-wrapper .group,
body.interior-focus .default-content-wrapper .group,
body.accessory-focus .default-content-wrapper .group {
font-size: var(--paragraph-font-size);
display: flex;
justify-content: space-between;
padding: 64px 102px 40px 56px;
width: 50%;
flex-direction: column;
box-sizing: border-box;
}

body.engine-focus .default-content-wrapper .sub-group,
body.interior-focus .default-content-wrapper .sub-group,
body.accessory-focus .default-content-wrapper .sub-group {
font-size: var(--paragraph-font-size);
display: flex;
flex-direction: column;
}

body.engine-focus .default-content-wrapper .sub-group h2,
body.interior-focus .default-content-wrapper .sub-group h2,
body.accessory-focus .default-content-wrapper .sub-group h2 {
line-height: 26px;
margin: 0;
font-size: var(--paragraph-font-size);
}

/* stylelint-disable-next-line no-descending-specificity */
body.engine-focus .default-content-wrapper .sub-group h2 + p,
body.interior-focus .default-content-wrapper .sub-group h2 + p,
body.accessory-focus .default-content-wrapper .sub-group h2 + p {
line-height: 27px;
margin-top: 30px;
}

/* stylelint-disable-next-line no-descending-specificity */
body.engine-focus .default-content-wrapper p:first-child,
body.interior-focus .default-content-wrapper p:first-child,
body.accessory-focus .default-content-wrapper p:first-child {
margin: 0;
height: 100vh;
width: 50%;
}

/* stylelint-disable-next-line no-descending-specificity */
body.engine-focus .default-content-wrapper p:first-child img,
body.interior-focus .default-content-wrapper p:first-child img,
body.accessory-focus .default-content-wrapper p:first-child img {
height: 100vh;
object-fit: cover;
}

/* stylelint-disable-next-line no-descending-specificity */
p {
font-size: var(--paragraph-font-size);
Expand Down
Loading