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

#36: Load engine specification data on engine focus page. #38

Merged
merged 6 commits into from
Mar 6, 2024
Merged

#36: Load engine specification data on engine focus page. #38

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
2d6b04e
#36: Load enginge specification data on engine focus page.
nc-andreashaller Mar 5, 2024
13d8176
remove deprecated comment
nc-andreashaller Mar 5, 2024
b3b5148
36 - Engine specs styling
alexiscoelho Mar 6, 2024
3c3e421
Merge branch 'main' into 36-engine-specs
alexiscoelho Mar 6, 2024
2ecba2f
36 - Fix spec page overflow
alexiscoelho Mar 6, 2024
af85e02
36 - Fix image display
alexiscoelho Mar 6, 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
54 changes: 37 additions & 17 deletions scripts/scripts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,9 +30,19 @@ function addSpeedInformation(info, containerElement, name, splitWords = false) {
containerElement.appendChild(infoElement);
}

function addSpecifications(specs) {
const specContainer = document.createElement('div');
function addShipSpecifications(specs) {
const infoContainer = document.createElement('div');
const titleElement = document.querySelector('h2');

if (specs.Range) {
addSpeedInformation(specs.Range, infoContainer);
addSpeedInformation(specs['Number of Passengers'].replace('to', '–').replaceAll(' ', ''), infoContainer, 'passengers', true);
addSpeedInformation(specs.Length, infoContainer);
}
infoContainer.classList.add('info-container');
titleElement.parentNode.insertBefore(infoContainer, titleElement);

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>
Expand All @@ -44,9 +54,28 @@ function addSpecifications(specs) {
parentElement.appendChild(specContainer);
}

function addEngineSpecifications(specs) {
const specContainer = document.createElement('div');
specContainer.classList.add('spec-container');

const content = `<table>
<tr><td>Length</td><td>${specs.Length}</td></tr>
<tr><td>Width</td><td>${specs.Width}</td></tr>
<tr><td>Maximum Speed</td><td>${specs['Maximum Speed']}</td></tr>
<tr><td>Range</td><td>${specs.Range}</td></tr>
<table>`;
specContainer.innerHTML = content;

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

async function prepareSpecification() {
const isTemplate = (template) => document.body.classList.contains(template);
const isShipFocus = isTemplate('ship-focus');
const isEngineFocus = !isShipFocus && isTemplate('engine-focus');
try {
if (!document.body.classList.contains('ship-focus')) {
if (!isShipFocus && !isEngineFocus) {
return;
}
const specificationPath = getMetadata('specifications');
Expand All @@ -65,22 +94,13 @@ async function prepareSpecification() {
}

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'].replace('to', '–').replaceAll(' ', ''), infoContainer, 'passengers', true);
addSpeedInformation(specificationsObj.Length, infoContainer);
}

addSpecifications(specificationsObj);

infoContainer.classList.add('info-container');
titleElement.parentNode.insertBefore(infoContainer, titleElement);
if (isShipFocus) {
addShipSpecifications(specificationsObj);
} else /* if (isEngineFocus) */ {
addEngineSpecifications(specificationsObj);
}

// these dataset are reference and will be removed later
document.body.dataset.features = specification.features;
document.body.dataset.specification = specification.specifications;
} catch (e) {
Expand Down
105 changes: 105 additions & 0 deletions styles/accessories.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@


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(--heading-font-size-l);
}

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;
max-height: 100vh;
overflow-y: scroll;
}

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

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%;
position: relative;
}

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

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 {
width: 100%;
height: 100vh;
object-fit: cover;
position: absolute;
}

body.engine-focus .spec-container,
body.interior-focus .spec-container,
body.accessory-focus .spec-container {
width: 100%;
margin-top: 30px;
}

body.engine-focus .spec-container table,
body.interior-focus .spec-container table,
body.accessory-focus .spec-container table {
width: 100%;
border-collapse: collapse;
}

body.engine-focus .spec-container table td,
body.interior-focus .spec-container table td,
body.accessory-focus .spec-container table td {
border-bottom: 1px solid #8F8F8F;
padding: 15px 20px;
width: 50%;
}

body.engine-focus .spec-container table tr td:first-child,
body.interior-focus .spec-container table tr td:first-child,
body.accessory-focus .spec-container table tr td:first-child {
font-weight: bold;
}
45 changes: 44 additions & 1 deletion styles/baseModel.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ body.ship-focus .default-content-wrapper {
max-width: 100%;
}

/* stylelint-disable-next-line no-descending-specificity */
body.ship-focus .default-content-wrapper h1 + p {
max-height: 100vh;
display: block;
Expand Down Expand Up @@ -45,3 +44,47 @@ body.ship-focus .default-content-wrapper .sub-group p,
body.ship-focus .default-content-wrapper .block:last-child p:last-child {
width: 80%;
}

body.ship-focus .default-content-wrapper .spec-container {
margin-top: 86px;
}

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

body.ship-focus .default-content-wrapper .spec-container table {
width: 100%;
margin-top: 37px;
}

body.ship-focus .default-content-wrapper .spec-container th {
font-size: 15px;
line-height: 24px;
font-weight: 400;
text-align: left;
}

body.ship-focus .default-content-wrapper .spec-container td {
font-size: 20px;
line-height: 26px;
font-weight: 600;
}

body.ship-focus .default-content-wrapper .info-container {
position: absolute;
top: 550px;
right: 130px;
}

body.ship-focus .default-content-wrapper .info-container .info-number {
font-size: 50px;
line-height: 70px;
font-weight: 300;
}

body.ship-focus .default-content-wrapper .info-container .info-text {
font-size: 15px;
line-height: 24px;
padding-left: 5px;
}
Loading
Loading