AB#36691 terminal posters (#434)

* AB#36691: Tram image in all terminal posters if used * AB#44833: All footer elements replaceable * Spacer tweaks * Tweak footer to work with smaller terminal poster
HSLdevcom · Dec 11, 2024 · 8c0cbf8 · 8c0cbf8
1 parent 597d80a
commit 8c0cbf8
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 12 deletions.
diff --git a/scripts/util/createEmptyTemplate.js b/scripts/util/createEmptyTemplate.js
@@ -65,6 +65,14 @@ module.exports = function createEmptyTemplate(label, id) {
             image: null,
             size: 1,
           },
+          {
+            image: null,
+            size: 1,
+          },
+          {
+            image: null,
+            size: 1,
+          },
         ],
       },
     ]),

diff --git a/src/components/routeDiagram/routeDiagram.css b/src/components/routeDiagram/routeDiagram.css
@@ -46,6 +46,14 @@
   font-family: GothamRounded-Book;
 }
 
+.componentNameA3 > .titleA3 {
+  font-family: GothamRounded-Medium;
+}
+
+.componentNameA3 > .subtitleA3 {
+  font-family: GothamRounded-Book;
+}
+
 .start {
   display: flex;
   align-items: center;

diff --git a/src/components/stopPoster/footer.css b/src/components/stopPoster/footer.css
@@ -14,7 +14,6 @@
   position: absolute;
   top: 33px;
   overflow: hidden;
-  border-radius: 25px;
 }
 
 .svgContainer {

diff --git a/src/components/stopPoster/footer.js b/src/components/stopPoster/footer.js
@@ -65,7 +65,27 @@ function getDynamicAreas(svg, widthModifier, heightModifier) {
 const slotMargin = 25;
 const slotWidth = 392;
 const slotHeight = 358;
-const firstSlotLeft = 453;
+
+const getFirstSlotPosition = slotsAmount => {
+  let firstSlotMargin;
+
+  switch (slotsAmount) {
+    case 3:
+      firstSlotMargin = 453;
+      break;
+    case 4:
+      firstSlotMargin = 120;
+      break;
+    case 5:
+      firstSlotMargin = 25;
+      break;
+    default:
+      firstSlotMargin = 25;
+      break;
+  }
+
+  return firstSlotMargin;
+};
 
 function createTemplateSlots(areaSlots) {
   return areaSlots.reduce((slots, { image, size }, idx) => {
@@ -76,9 +96,11 @@ function createTemplateSlots(areaSlots) {
       return slots;
     }
 
+    const firstSlotLeftPosition = getFirstSlotPosition(areaSlots.length);
+
     const marginToWidth = size > 1 ? (size - 1) * slotMargin : 0;
     const width = slotWidth * size + marginToWidth;
-    const left = firstSlotLeft + slotWidth * idx + slotMargin * idx;
+    const left = firstSlotLeftPosition + slotWidth * idx + slotMargin * idx;
     const $svg = cheerio.load(svg);
 
     const svgViewBox = $svg('svg')
@@ -114,16 +136,26 @@ const Footer = props => {
     feedback: getFeedbackUrl(props.shortId),
   };
 
-  const slots = createTemplateSlots(get(props, 'template.slots', []));
+  const templateSlots = get(props, 'template.slots', []);
+
+  if (templateSlots.length === 5 && props.isSmallTerminalPoster) {
+    templateSlots.splice(4, 1); // Remove the fifth SVG slot to fit the smaller terminal poster footer
+  }
+
+  const slots = createTemplateSlots(templateSlots);
 
   return (
     <div className={styles.footerWrapper}>
       <InlineSVG className={styles.dottedLine} src={dottedLine} />
-      <InlineSVG className={classnames(styles.footerPiece, styles.hslLogo)} src={hslLogo} />
-      <InlineSVG
-        className={classnames(styles.footerPiece, styles.customerService)}
-        src={customerService}
-      />
+      {slots.length === 3 && (
+        <div>
+          <InlineSVG className={classnames(styles.footerPiece, styles.hslLogo)} src={hslLogo} />
+          <InlineSVG
+            className={classnames(styles.footerPiece, styles.customerService)}
+            src={customerService}
+          />
+        </div>
+      )}
       {slots.map((slot, slotIdx) => {
         const svg = get(slot, 'svg', '');
 
@@ -179,10 +211,12 @@ Footer.propTypes = {
   shortId: PropTypes.string.isRequired,
   isTrunkStop: PropTypes.bool.isRequired,
   onError: PropTypes.func.isRequired,
+  isSmallTerminalPoster: PropTypes.bool,
 };
 
 Footer.defaultProps = {
   template: null,
+  isSmallTerminalPoster: false,
 };
 
 export default Footer;
diff --git a/src/components/stopPoster/terminalPoster.js b/src/components/stopPoster/terminalPoster.js
@@ -357,7 +357,7 @@ class TerminalPoster extends Component {
     const tramImage = get(src, 'slots[0].image.svg', '');
     let useDiagram = this.state.hasDiagram;
 
-    if (isTramStop && tramImage) useDiagram = false;
+    if (tramImage) useDiagram = false;
 
     const TerminalPosterTimetable = props => (
       <React.Fragment>
@@ -449,7 +449,7 @@ class TerminalPoster extends Component {
                 <Measure client>
                   {({ measureRef, contentRect }) => (
                     <div className={styles.right} ref={measureRef}>
-                      {!useDiagram && <Spacer height={10} />}
+                      <Spacer height={10} />
                       {/* The key will make sure the map updates its size if the layout changes */}
                       {shouldRenderMap && (
                         <CustomMap
@@ -482,7 +482,7 @@ class TerminalPoster extends Component {
                           maxColumns={hasLeftColumn ? 6 : 8}
                         />
                       )}
-                      {isTramStop && tramImage && <TramDiagram svg={tramImage} />}
+                      {!useDiagram && tramImage && <TramDiagram svg={tramImage} />}
                     </div>
                   )}
                 </Measure>
@@ -494,6 +494,7 @@ class TerminalPoster extends Component {
               template={template ? get(template, 'areas', []).find(t => t.key === 'footer') : {}}
               shortId={shortId}
               isTrunkStop={isTrunkStop}
+              isSmallTerminalPoster={isSmallTerminalPoster}
             />
             <Metadata date={date} />
           </JustifiedColumn>