Merge pull request #38 from Netcentric/36-engine-specs

#36: Load engine specification data on engine focus page.
Netcentric · Mar 6, 2024 · 2689fcf · 2689fcf
2 parents 9f33116 + af85e02
commit 2689fcf
Show file tree

Hide file tree

Showing 4 changed files with 192 additions and 146 deletions.
diff --git a/scripts/scripts.js b/scripts/scripts.js
@@ -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>
@@ -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');
@@ -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) {

diff --git a/styles/accessories.css b/styles/accessories.css
@@ -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;
+}
diff --git a/styles/baseModel.css b/styles/baseModel.css
@@ -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;
@@ -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;
+}