diff --git a/scripts/util/createEmptyTemplate.js b/scripts/util/createEmptyTemplate.js index c8db0108..a1863978 100644 --- 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 index 69afef76..13ebf47e 100644 --- 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 index ec9af3f8..5cdefaed 100644 --- 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 index 80b7491c..a7af9b69 100644 --- 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 (
- - + {slots.length === 3 && ( +
+ + +
+ )} {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 index 4d2bb9bd..0a29bc90 100644 --- 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 => ( @@ -449,7 +449,7 @@ class TerminalPoster extends Component { {({ measureRef, contentRect }) => (
- {!useDiagram && } + {/* The key will make sure the map updates its size if the layout changes */} {shouldRenderMap && ( )} - {isTramStop && tramImage && } + {!useDiagram && tramImage && }
)}
@@ -494,6 +494,7 @@ class TerminalPoster extends Component { template={template ? get(template, 'areas', []).find(t => t.key === 'footer') : {}} shortId={shortId} isTrunkStop={isTrunkStop} + isSmallTerminalPoster={isSmallTerminalPoster} />