From e69b1e1613610ecfb000ac5bde9c31195d3b9434 Mon Sep 17 00:00:00 2001 From: e-halinen Date: Thu, 24 Oct 2024 09:54:32 +0300 Subject: [PATCH 01/10] AB#32085: Add page numbers --- .../lineTimetable/lineTableColumns.css | 1 + .../lineTimetable/lineTableHeader.css | 1 + .../lineTimetable/lineTimetable.css | 9 + src/components/lineTimetable/lineTimetable.js | 330 ++++++++++-------- .../lineTimetable/lineTimetableContainer.js | 2 + 5 files changed, 202 insertions(+), 141 deletions(-) diff --git a/src/components/lineTimetable/lineTableColumns.css b/src/components/lineTimetable/lineTableColumns.css index 3b829c0a..320a72c1 100644 --- a/src/components/lineTimetable/lineTableColumns.css +++ b/src/components/lineTimetable/lineTableColumns.css @@ -18,6 +18,7 @@ align-items: normal; min-width: 100px; max-width: 350px; + page-break-inside: avoid; } .tableContainer { diff --git a/src/components/lineTimetable/lineTableHeader.css b/src/components/lineTimetable/lineTableHeader.css index 8c9154e7..92b3e8f3 100644 --- a/src/components/lineTimetable/lineTableHeader.css +++ b/src/components/lineTimetable/lineTableHeader.css @@ -1,5 +1,6 @@ .headerContainer { display: flex; + page-break-inside: avoid; } .stop { diff --git a/src/components/lineTimetable/lineTimetable.css b/src/components/lineTimetable/lineTimetable.css index 742cd477..6bb8fcae 100644 --- a/src/components/lineTimetable/lineTimetable.css +++ b/src/components/lineTimetable/lineTimetable.css @@ -180,6 +180,15 @@ page-break-after: always; } +.address { + font-family: GothamRounded-Medium; + font-size: 16px; + color: black; + position: absolute; + left: 680px; + right: var(--border-radius); +} + @media print { .noPrint, .noPrint * { diff --git a/src/components/lineTimetable/lineTimetable.js b/src/components/lineTimetable/lineTimetable.js index 6b173f68..b08852c4 100644 --- a/src/components/lineTimetable/lineTimetable.js +++ b/src/components/lineTimetable/lineTimetable.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { Component } from 'react'; import PropTypes from 'prop-types'; import styles from './lineTimetable.css'; import LineTimetableHeader from './lineTimetableHeader'; @@ -23,6 +23,9 @@ import { shortenTrainParsedLineId } from '../../util/routes'; const MAX_STOPS = 4; // Maximum amount of timed stops rendered on the timetable +const A5_PAGE_HEIGHT = 960; +const PAGE_NUMBER_HEIGHT = 46; + const getScheduleWeekdaysText = dayType => { switch (dayType) { case scheduleSegments.weekdays: @@ -247,75 +250,212 @@ const addFridayNote = notes => { return notes.splice(0, 0, { noteText: 'p) Vain perjantaisin' }); }; -function LineTimetable(props) { - const { routes } = props; - const notes = props.line.notes.nodes; - addFridayNote(notes); - const showTimedStops = hasTimedStopRoutes(routes); +class LineTimetable extends Component { + constructor(props) { + super(props); + this.state = { + renderPageNumbers: false, + }; + } - const checkedRoutes = checkForTrainRoutes(routes); + componentDidMount() { + const { renderPageNumbers } = this.state; + if (this.props.printPageNumbers && !renderPageNumbers) { + this.setState({ renderPageNumbers: true }); + } + } - const mappedNotes = notes.map(note => { - return ( -
- {note.noteText} -
- ); - }); + render() { + const { routes } = this.props; + const notes = this.props.line.notes.nodes; + addFridayNote(notes); + const showTimedStops = hasTimedStopRoutes(routes); - if (showTimedStops) { - return ( -
- {checkedRoutes.map(routeWithDepartures => { - const routesByDateRanges = routeWithDepartures.departuresByDateRanges.map( - departuresForDateRange => { - const { nameFi, nameSe, routeIdParsed } = routeWithDepartures; - return { + const checkedRoutes = checkForTrainRoutes(routes); + + const mappedNotes = notes.map(note => { + return ( +
+ {note.noteText} +
+ ); + }); + + const pageNumberPositions = []; + + if (this.state.renderPageNumbers && this.content) { + const { scrollHeight } = this.content; + const pages = Math.ceil(scrollHeight / A5_PAGE_HEIGHT); + let j = 0; + for (let i = 1; i < pages + 1; i++) { + pageNumberPositions.push(i * A5_PAGE_HEIGHT + j * PAGE_NUMBER_HEIGHT); + j++; + } + } + + if (showTimedStops) { + return ( +
{ + this.content = ref; + }}> + {pageNumberPositions.length > 0 && + pageNumberPositions.map((height, index) => { + const pageNumber = index + 1; + return ( + + {pageNumber} + + ); + })} + {checkedRoutes.map(routeWithDepartures => { + const routesByDateRanges = routeWithDepartures.departuresByDateRanges.map( + departuresForDateRange => { + const { nameFi, nameSe, routeIdParsed } = routeWithDepartures; + return { + nameFi, + nameSe, + routeIdParsed, + departuresByStop: departuresForDateRange.departuresByStop.slice(0, MAX_STOPS), + dateBegin: departuresForDateRange.dateBegin, + dateEnd: departuresForDateRange.dateEnd, + }; + }, + ); + + const routeDeparturesForDateRanges = routesByDateRanges.map(routeForDateRange => { + const { nameFi, nameSe, routeIdParsed, - departuresByStop: departuresForDateRange.departuresByStop.slice(0, MAX_STOPS), - dateBegin: departuresForDateRange.dateBegin, - dateEnd: departuresForDateRange.dateEnd, - }; - }, - ); - - const routeDeparturesForDateRanges = routesByDateRanges.map(routeForDateRange => { - const { - nameFi, - nameSe, - routeIdParsed, - departuresByStop, - dateBegin, - dateEnd, - } = routeForDateRange; + departuresByStop, + dateBegin, + dateEnd, + } = routeForDateRange; + + return ( + routeForDateRange.departuresByStop.length > 0 && ( +
+ + +
+
+ ) + ); + }); + + return routeDeparturesForDateRanges; + })} + {checkedRoutes.length >= 1 &&
{mappedNotes}
} + {checkedRoutes.length === 0 && ( +
+ Linjaa ei löytynyt, tarkista tulosteen asetukset +
+ )} +
+ ); + } + + // The logic below is for timetables that do not have timed stops to display, only the starting stop for a route. + // These stops are displayed with both directions side by side in the timetable. + const groupedRoutes = groupBy(checkedRoutes, 'routeId'); + + // Map the departures from both directions into unique date ranges, so that we can display both directions for a date range side by side + const routeGroupsMappedDepartures = Object.values(groupedRoutes).map(routeGroup => { + const { routeId, routeIdParsed, nameFi, nameSe, routeSegments } = routeGroup[0]; + + const allDepartureDateRanges = routeGroup.map(route => { + return route.departuresByDateRanges; + }); + + const uniqueDateRanges = flatten(uniqBy(allDepartureDateRanges, 'dateBegin')); + + const mappedDeparturesBothDirections = uniqueDateRanges.map(dateRange => { + const { dateBegin, dateEnd } = dateRange; + const bothDirectionDepartures = []; + + forEach(allDepartureDateRanges, departureDateRange => { + const departures = flatten(departureDateRange); + if (departures[0].dateBegin === dateBegin && departures[0].dateEnd === dateEnd) { + bothDirectionDepartures.push(departures[0].departuresByStop); + } + }); + return { + dateBegin, + dateEnd, + departuresByStop: flatten(bothDirectionDepartures), + }; + }); + + return { + routeId, + routeIdParsed, + nameFi, + nameSe, + routeSegments, + departuresByDateRanges: mappedDeparturesBothDirections, + }; + }); + + return ( +
{ + this.content = ref; + }}> + {routeGroupsMappedDepartures.map(routeWithDepartures => { + return routeWithDepartures.departuresByDateRanges.map(departuresFordateRange => { + const { nameFi, nameSe, routeIdParsed } = routeWithDepartures; + const { dateBegin, dateEnd, departuresByStop } = departuresFordateRange; + + const hasDepartures = some(departuresByStop, stop => + some(stop.departures, departureDay => departureDay.length > 0), + ); + + if ( + hasDepartures && + departuresByStop[0].stop.stopId === departuresByStop[1].stop.stopId + ) { + departuresByStop.pop(1); + } return ( - routeForDateRange.departuresByStop.length > 0 && ( -
+
+ {hasDepartures && ( + )} + {hasDepartures && ( -
-
- ) + )} + {hasDepartures &&
} +
); }); - - return routeDeparturesForDateRanges; })} {checkedRoutes.length >= 1 &&
{mappedNotes}
} {checkedRoutes.length === 0 && ( @@ -326,106 +466,13 @@ function LineTimetable(props) {
); } - - // The logic below is for timetables that do not have timed stops to display, only the starting stop for a route. - // These stops are displayed with both directions side by side in the timetable. - const groupedRoutes = groupBy(checkedRoutes, 'routeId'); - - // Map the departures from both directions into unique date ranges, so that we can display both directions for a date range side by side - const routeGroupsMappedDepartures = Object.values(groupedRoutes).map(routeGroup => { - const { routeId, routeIdParsed, nameFi, nameSe, routeSegments } = routeGroup[0]; - - const allDepartureDateRanges = routeGroup.map(route => { - return route.departuresByDateRanges; - }); - - const uniqueDateRanges = flatten(uniqBy(allDepartureDateRanges, 'dateBegin')); - - const mappedDeparturesBothDirections = uniqueDateRanges.map(dateRange => { - const { dateBegin, dateEnd } = dateRange; - const bothDirectionDepartures = []; - - forEach(allDepartureDateRanges, departureDateRange => { - const departures = flatten(departureDateRange); - if (departures[0].dateBegin === dateBegin && departures[0].dateEnd === dateEnd) { - bothDirectionDepartures.push(departures[0].departuresByStop); - } - }); - return { - dateBegin, - dateEnd, - departuresByStop: flatten(bothDirectionDepartures), - }; - }); - - return { - routeId, - routeIdParsed, - nameFi, - nameSe, - routeSegments, - departuresByDateRanges: mappedDeparturesBothDirections, - }; - }); - - return ( -
- {routeGroupsMappedDepartures.map(routeWithDepartures => { - return routeWithDepartures.departuresByDateRanges.map(departuresFordateRange => { - const { nameFi, nameSe, routeIdParsed } = routeWithDepartures; - const { dateBegin, dateEnd, departuresByStop } = departuresFordateRange; - - const hasDepartures = some(departuresByStop, stop => - some(stop.departures, departureDay => departureDay.length > 0), - ); - - if ( - hasDepartures && - departuresByStop[0].stop.stopId === departuresByStop[1].stop.stopId - ) { - departuresByStop.pop(1); - } - - return ( -
- {hasDepartures && ( - - )} - {hasDepartures && ( - - )} - {hasDepartures &&
} -
- ); - }); - })} - {checkedRoutes.length >= 1 &&
{mappedNotes}
} - {checkedRoutes.length === 0 && ( -
- Linjaa ei löytynyt, tarkista tulosteen asetukset -
- )} -
- ); } LineTimetable.defaultProps = { routes: {}, showPrintBtn: false, lang: 'fi', + printPageNumbers: true, }; LineTimetable.propTypes = { @@ -433,6 +480,7 @@ LineTimetable.propTypes = { routes: PropTypes.object, showPrintBtn: PropTypes.bool, lang: PropTypes.string, + printPageNumbers: PropTypes.bool, }; export default LineTimetable; diff --git a/src/components/lineTimetable/lineTimetableContainer.js b/src/components/lineTimetable/lineTimetableContainer.js index b66d77b0..bdb54f4e 100644 --- a/src/components/lineTimetable/lineTimetableContainer.js +++ b/src/components/lineTimetable/lineTimetableContainer.js @@ -249,6 +249,7 @@ LineTimetableContainer.defaultProps = { date: null, showPrintBtn: false, lang: 'fi', + printPageNumbers: true, }; LineTimetableContainer.propTypes = { @@ -258,6 +259,7 @@ LineTimetableContainer.propTypes = { date: PropTypes.string, showPrintBtn: PropTypes.bool, lang: PropTypes.string, + printPageNumbers: PropTypes.bool, }; export default LineTimetableContainer; From c9136b9ac5a7c2f0f3ce41a2c01c57ae36618aac Mon Sep 17 00:00:00 2001 From: e-halinen Date: Tue, 29 Oct 2024 14:41:47 +0200 Subject: [PATCH 02/10] Add page numbering to other rendering state --- .../lineTimetable/lineTimetable.css | 11 +----- src/components/lineTimetable/lineTimetable.js | 37 ++++++++++++------- 2 files changed, 25 insertions(+), 23 deletions(-) diff --git a/src/components/lineTimetable/lineTimetable.css b/src/components/lineTimetable/lineTimetable.css index 6bb8fcae..b816408f 100644 --- a/src/components/lineTimetable/lineTimetable.css +++ b/src/components/lineTimetable/lineTimetable.css @@ -85,15 +85,6 @@ font-size: 1.75em; } -.address { - font-family: GothamRounded-Medium; - font-size: 0.6rem; - color: black; - position: absolute; - top: 1110px; - right: var(--border-radius); -} - .validity .title { font-family: GothamRounded-Medium; } @@ -180,7 +171,7 @@ page-break-after: always; } -.address { +.pageNumber { font-family: GothamRounded-Medium; font-size: 16px; color: black; diff --git a/src/components/lineTimetable/lineTimetable.js b/src/components/lineTimetable/lineTimetable.js index b08852c4..a3a7baff 100644 --- a/src/components/lineTimetable/lineTimetable.js +++ b/src/components/lineTimetable/lineTimetable.js @@ -24,7 +24,7 @@ import { shortenTrainParsedLineId } from '../../util/routes'; const MAX_STOPS = 4; // Maximum amount of timed stops rendered on the timetable const A5_PAGE_HEIGHT = 960; -const PAGE_NUMBER_HEIGHT = 46; +const PAGE_NUMBER_HEIGHT = 21; const getScheduleWeekdaysText = dayType => { switch (dayType) { @@ -303,7 +303,7 @@ class LineTimetable extends Component { pageNumberPositions.map((height, index) => { const pageNumber = index + 1; return ( - + {pageNumber} ); @@ -415,6 +415,15 @@ class LineTimetable extends Component { ref={ref => { this.content = ref; }}> + {pageNumberPositions.length > 0 && + pageNumberPositions.map((height, index) => { + const pageNumber = index + 1; + return ( + + {pageNumber} + + ); + })} {routeGroupsMappedDepartures.map(routeWithDepartures => { return routeWithDepartures.departuresByDateRanges.map(departuresFordateRange => { const { nameFi, nameSe, routeIdParsed } = routeWithDepartures; @@ -434,17 +443,19 @@ class LineTimetable extends Component { return (
{hasDepartures && ( - +
+ +
)} {hasDepartures && ( Date: Tue, 5 Nov 2024 16:55:19 +0200 Subject: [PATCH 03/10] Add styling tweaks and note filtering --- .../lineTimetable/lineTableColumns.css | 8 ++--- .../lineTimetable/lineTableHeader.css | 6 ++++ src/components/lineTimetable/lineTimetable.js | 32 +++++++++++++++---- .../lineTimetable/lineTimetableContainer.js | 21 +++++++++--- 4 files changed, 51 insertions(+), 16 deletions(-) diff --git a/src/components/lineTimetable/lineTableColumns.css b/src/components/lineTimetable/lineTableColumns.css index 320a72c1..aebcd090 100644 --- a/src/components/lineTimetable/lineTableColumns.css +++ b/src/components/lineTimetable/lineTableColumns.css @@ -3,6 +3,8 @@ min-width: 120px; font-family: GothamRounded-Book; margin: 0.5rem 0; + page-break-inside: avoid; + page-break-after: always; } .departureRow { @@ -60,9 +62,3 @@ .departureRowContainer > *:nth-child(even) { background-color: #eaeaea; } - -@media print { - .departureRow { - page-break-inside: avoid; - } -} diff --git a/src/components/lineTimetable/lineTableHeader.css b/src/components/lineTimetable/lineTableHeader.css index 92b3e8f3..abdd139c 100644 --- a/src/components/lineTimetable/lineTableHeader.css +++ b/src/components/lineTimetable/lineTableHeader.css @@ -26,3 +26,9 @@ font-family: GothamRounded-Medium; font-size: 1rem; } + +@media print { + .headerContainer { + page-break-inside: avoid; + } +} diff --git a/src/components/lineTimetable/lineTimetable.js b/src/components/lineTimetable/lineTimetable.js index a3a7baff..f998ebf8 100644 --- a/src/components/lineTimetable/lineTimetable.js +++ b/src/components/lineTimetable/lineTimetable.js @@ -6,16 +6,15 @@ import LineTableColumns from './lineTableColumns'; import AllStopsList from './allStopsList'; import { filter, - isEmpty, uniqBy, flatten, forEach, groupBy, - find, unionWith, omit, isEqual, some, + uniq, } from 'lodash'; import { scheduleSegments } from '../../util/domain'; import { addMissingFridayNote, combineConsecutiveDays } from '../timetable/timetableContainer'; @@ -247,9 +246,27 @@ const checkForTrainRoutes = routes => { // Add note for friday departures because of merged timetables const addFridayNote = notes => { - return notes.splice(0, 0, { noteText: 'p) Vain perjantaisin' }); + const mutableArr = notes.splice(0); + return mutableArr.splice(0, 0, { noteText: 'p) Vain perjantaisin' }); }; +const hasFridayDepartures = routes => { + let hasFriDepartures = false; + forEach(routes, route => { + const departures = [...route.timedStopsDepartures.nodes]; + const fridayDepartures = departures.filter(departure => departure.dayType.includes('Pe')); + hasFriDepartures = hasFriDepartures ? true : fridayDepartures.length > 0; + }); + return hasFriDepartures; +}; + +const usesFridayDepartureNote = routes => { + let usesFridayDepartureNotation = true; + forEach(routes, route => { + usesFridayDepartureNotation = !usesFridayDepartureNotation ? false : route.mode !== 'TRAM'; + }); + return usesFridayDepartureNotation; +}; class LineTimetable extends Component { constructor(props) { super(props); @@ -267,10 +284,13 @@ class LineTimetable extends Component { render() { const { routes } = this.props; - const notes = this.props.line.notes.nodes; - addFridayNote(notes); - const showTimedStops = hasTimedStopRoutes(routes); + let { notes } = this.props.line; + if (hasFridayDepartures(routes) && usesFridayDepartureNote(routes)) { + const addedFridayNotes = addFridayNote(this.props.line.notes); + notes = uniq(addedFridayNotes); + } + const showTimedStops = hasTimedStopRoutes(routes); const checkedRoutes = checkForTrainRoutes(routes); const mappedNotes = notes.map(note => { diff --git a/src/components/lineTimetable/lineTimetableContainer.js b/src/components/lineTimetable/lineTimetableContainer.js index bdb54f4e..59ed2b76 100644 --- a/src/components/lineTimetable/lineTimetableContainer.js +++ b/src/components/lineTimetable/lineTimetableContainer.js @@ -4,7 +4,7 @@ import { graphql } from 'react-apollo'; import gql from 'graphql-tag'; import mapProps from 'recompose/mapProps'; import compose from 'recompose/compose'; -import { filter, forEach, isEmpty, uniqBy, some } from 'lodash'; +import { filter, forEach, isEmpty, uniqBy, some, uniqWith } from 'lodash'; import apolloWrapper from 'util/apolloWrapper'; @@ -207,6 +207,19 @@ const filterRoutes = routesWithGroupedDepartures => { }); }; +const filterNotes = (notes, dateBegin) => { + const timetableDateBegin = new Date(dateBegin); + const filteredNotes = notes.filter(note => { + if (note.dateEnd === null) { + return true; + } + const noteDateEnd = new Date(note.dateEnd); + return noteDateEnd > timetableDateBegin; + }); + const duplicatesRemoved = uniqWith(filteredNotes, (a, b) => a.noteText === b.noteText); + return duplicatesRemoved; +}; + const lineQueryMapper = mapProps(props => { const line = props.data.lines.nodes[0]; const { showPrintBtn, lang } = props; @@ -233,8 +246,10 @@ const lineQueryMapper = mapProps(props => { return { ...route, departuresByDateRanges: dateRangesGroupedByStopAndDay }; }); + const filteredNotes = filterNotes(line.notes.nodes, props.dateBegin); + return { - line, + line: { ...line, notes: filteredNotes }, routes: filterRoutes(routesWithGroupedDepartures), showPrintBtn, lang, @@ -246,7 +261,6 @@ const hoc = compose(graphql(lineQuery), apolloWrapper(lineQueryMapper)); const LineTimetableContainer = hoc(LineTimetable); LineTimetableContainer.defaultProps = { - date: null, showPrintBtn: false, lang: 'fi', printPageNumbers: true, @@ -256,7 +270,6 @@ LineTimetableContainer.propTypes = { lineId: PropTypes.string.isRequired, dateBegin: PropTypes.string.isRequired, dateEnd: PropTypes.string.isRequired, - date: PropTypes.string, showPrintBtn: PropTypes.bool, lang: PropTypes.string, printPageNumbers: PropTypes.bool, From 5c5368bf24fe243510246f00e2e2a8a7c19d8ea5 Mon Sep 17 00:00:00 2001 From: e-halinen Date: Thu, 7 Nov 2024 14:32:28 +0200 Subject: [PATCH 04/10] WIP: tweak styling for better page breaks --- src/components/a3Timetable/a3TableHeader.css | 2 +- src/components/lineTimetable/allStopsList.css | 3 +-- .../lineTimetable/lineTableColumns.css | 6 ++--- .../lineTimetable/lineTableHeader.css | 13 +++++++++- .../lineTimetable/lineTableHeader.js | 10 +++++--- .../lineTimetable/lineTimetable.css | 25 +++++-------------- src/components/lineTimetable/lineTimetable.js | 1 + .../lineTimetable/lineTimetableHeader.css | 2 -- src/components/timetable/tableHeader.css | 2 +- src/components/util.css | 4 +-- 10 files changed, 33 insertions(+), 35 deletions(-) diff --git a/src/components/a3Timetable/a3TableHeader.css b/src/components/a3Timetable/a3TableHeader.css index 27e21669..31165e4d 100644 --- a/src/components/a3Timetable/a3TableHeader.css +++ b/src/components/a3Timetable/a3TableHeader.css @@ -2,7 +2,7 @@ margin: 0.938em 0; font-family: GothamRounded-Book; color: var(--timetable-text-color); - page-break-after: avoid; + break-after: avoid; margin: 0; } diff --git a/src/components/lineTimetable/allStopsList.css b/src/components/lineTimetable/allStopsList.css index 727cc90f..1a7f95df 100644 --- a/src/components/lineTimetable/allStopsList.css +++ b/src/components/lineTimetable/allStopsList.css @@ -1,8 +1,7 @@ .stopListsContainer { margin-top: 1rem; max-width: 95%; - page-break-inside: avoid; - page-break-after: always; + break-inside: avoid; } .stopList { diff --git a/src/components/lineTimetable/lineTableColumns.css b/src/components/lineTimetable/lineTableColumns.css index aebcd090..ad8dc27f 100644 --- a/src/components/lineTimetable/lineTableColumns.css +++ b/src/components/lineTimetable/lineTableColumns.css @@ -3,8 +3,8 @@ min-width: 120px; font-family: GothamRounded-Book; margin: 0.5rem 0; - page-break-inside: avoid; - page-break-after: always; + break-inside: avoid; + break-after: always; } .departureRow { @@ -20,7 +20,7 @@ align-items: normal; min-width: 100px; max-width: 350px; - page-break-inside: avoid; + break-inside: avoid; } .tableContainer { diff --git a/src/components/lineTimetable/lineTableHeader.css b/src/components/lineTimetable/lineTableHeader.css index abdd139c..0169266e 100644 --- a/src/components/lineTimetable/lineTableHeader.css +++ b/src/components/lineTimetable/lineTableHeader.css @@ -1,8 +1,18 @@ +div { + break-inside: avoid; + page-break-inside: avoid; +} + .headerContainer { - display: flex; + display: block; + break-inside: avoid; page-break-inside: avoid; } +.flexHeader { + display: flex; +} + .stop { flex-grow: 1; height: 50px; @@ -29,6 +39,7 @@ @media print { .headerContainer { + break-inside: avoid; page-break-inside: avoid; } } diff --git a/src/components/lineTimetable/lineTableHeader.js b/src/components/lineTimetable/lineTableHeader.js index ffa2005e..a741ee02 100644 --- a/src/components/lineTimetable/lineTableHeader.js +++ b/src/components/lineTimetable/lineTableHeader.js @@ -7,11 +7,13 @@ const LineTableHeader = props => { const { stop, isLastStop } = props; return (
-
-

{stop.nameFi}

-

{stop.nameSe}

+
+
+

{stop.nameFi}

+

{stop.nameSe}

+
+ {!isLastStop &&
>
}
- {!isLastStop &&
>
}
); }; diff --git a/src/components/lineTimetable/lineTimetable.css b/src/components/lineTimetable/lineTimetable.css index b816408f..470ceee4 100644 --- a/src/components/lineTimetable/lineTimetable.css +++ b/src/components/lineTimetable/lineTimetable.css @@ -1,15 +1,6 @@ -.root { - position: relative; - width: 100%; - padding: var(--border-radius); - padding-top: calc(var(--border-radius) - 15px); - border-radius: var(--border-radius); - color: var(--hsl-blue); - background: var(--light-background); - --timetable-accent-color: white; - font-size: 16px; - margin-bottom: 10px; - font-family: GothamRounded-Medium; +.container { + page-break-inside: avoid; + break-inside: avoid; } .root.a3 { @@ -147,7 +138,7 @@ } .pageBreak { - page-break-inside: avoid; + break-inside: avoid; } .timetableDivider { @@ -157,7 +148,7 @@ } .timetableContainer { - page-break-after: always; + break-after: always; } .fridayNote { @@ -168,7 +159,7 @@ .notesContainer { margin: 0.5rem 0 1rem 0.5rem; - page-break-after: always; + break-after: always; } .pageNumber { @@ -185,8 +176,4 @@ .noPrint * { display: none !important; } - - body { - overflow-y: visible; - } } diff --git a/src/components/lineTimetable/lineTimetable.js b/src/components/lineTimetable/lineTimetable.js index f998ebf8..7dc14c79 100644 --- a/src/components/lineTimetable/lineTimetable.js +++ b/src/components/lineTimetable/lineTimetable.js @@ -316,6 +316,7 @@ class LineTimetable extends Component { if (showTimedStops) { return (
{ this.content = ref; }}> diff --git a/src/components/lineTimetable/lineTimetableHeader.css b/src/components/lineTimetable/lineTimetableHeader.css index 3a5502e4..a3245459 100644 --- a/src/components/lineTimetable/lineTimetableHeader.css +++ b/src/components/lineTimetable/lineTimetableHeader.css @@ -2,8 +2,6 @@ display: flex; margin-bottom: 1rem; word-wrap: break-word; - page-break-before: always; - page-break-inside: avoid; } .lineId { diff --git a/src/components/timetable/tableHeader.css b/src/components/timetable/tableHeader.css index 6ddcb1c6..27d7cd21 100644 --- a/src/components/timetable/tableHeader.css +++ b/src/components/timetable/tableHeader.css @@ -2,7 +2,7 @@ margin: 0.938em 0; font-family: GothamRounded-Book; color: var(--timetable-text-color); - page-break-after: avoid; + break-after: avoid; } .root.largerPaddingTop { diff --git a/src/components/util.css b/src/components/util.css index 55bb26c6..6c4b492b 100644 --- a/src/components/util.css +++ b/src/components/util.css @@ -1,7 +1,7 @@ .row { display: flex; align-items: center; - page-break-inside: avoid; + break-inside: avoid; } .justifiedRow { @@ -83,6 +83,6 @@ display: none !important; } .row * { - page-break-inside: avoid; + break-inside: avoid; } } From 4f2c2b92fde4ffc9eca17ea78957bc3f0dcdf955 Mon Sep 17 00:00:00 2001 From: e-halinen Date: Thu, 7 Nov 2024 14:35:39 +0200 Subject: [PATCH 05/10] Add tweaked test script --- test/testStops.js | 21 +++++++++------------ 1 file changed, 9 insertions(+), 12 deletions(-) diff --git a/test/testStops.js b/test/testStops.js index 1b81fe15..af26b94a 100644 --- a/test/testStops.js +++ b/test/testStops.js @@ -6,8 +6,10 @@ const fs = require('fs'); const { finished } = require('node:stream/promises'); const path = require('path'); -const stopIds = ['1020105', '1284188', '6301068', '1040411', '4930205', '4930209']; +// Stop poster tests +const stopIds = ['1020105', '1284188', '6301068', '1040411', '4930205', '4930209', '2311220']; +// Terminal poster tests const testTerminalPosters = [ { terminalId: '1000004', @@ -21,15 +23,12 @@ const testTerminalPosters = [ }, ]; -// Lines for testing the LineTimetable component +// LineTimetable tests const testLines = [ - { lineId: '2015', dateBegin: '2024-05-01', dateEnd: '2024-06-30' }, - { lineId: '1052', dateBegin: '2024-06-30', dateEnd: '2024-07-29' }, - { lineId: '1500', dateBegin: '2023-10-12', dateEnd: '2050-12-31' }, - { lineId: '1016', dateBegin: '2016-10-04', dateEnd: '2050-12-31' }, - { lineId: '4570', dateBegin: '2022-08-15', dateEnd: '2050-12-31' }, - { lineId: '6211U', dateBegin: '2024-05-05', dateEnd: '2024-06-16' }, - { lineId: '6211X', dateBegin: '2024-05-05', dateEnd: '2024-09-01' }, + { lineId: '2015', dateBegin: '2024-12-01', dateEnd: '2024-12-10' }, + { lineId: '1007', dateBegin: '2024-12-01', dateEnd: '2024-12-30' }, + { lineId: '1052', dateBegin: '2024-12-01', dateEnd: '2024-12-30' }, + { lineId: '2510', dateBegin: '2024-12-01', dateEnd: '2024-12-30' }, ]; const TEST_RESULTS_PATH = './test/results'; @@ -57,7 +56,7 @@ function buildGenerationRequestBody(buildId, component, printAsA4) { lineId, dateBegin, dateEnd, - printTimetablesAsA4: true, + printAsA5: true, selectedRuleTemplates: [], template: 'default', // Server throws error if template and selectedRuleTemplate aren't included in properties, however they aren't needed for rendering though }; @@ -87,8 +86,6 @@ function buildGenerationRequestBody(buildId, component, printAsA4) { } else { props = stopIds.map(stopId => { return { - dateBegin: '2024-06-17', - dateEnd: '2024-08-11', date: new Date().toISOString().split('T')[0], isSummerTimetable: true, legend: true, From 22e9e7cfec404576c6b38eed5b3c74e784197602 Mon Sep 17 00:00:00 2001 From: e-halinen Date: Wed, 13 Nov 2024 16:02:03 +0200 Subject: [PATCH 06/10] Fix duplicate hour cutoff bug --- src/components/timetable/tableRows.js | 28 ++++++++++++++++++++++++++- 1 file changed, 27 insertions(+), 1 deletion(-) diff --git a/src/components/timetable/tableRows.js b/src/components/timetable/tableRows.js index f31ffd6a..3b96f05a 100644 --- a/src/components/timetable/tableRows.js +++ b/src/components/timetable/tableRows.js @@ -73,6 +73,21 @@ const isEqualDepartureHour = (a, b) => { return true; }; +const isCutOffValid = (rows, startIndex, cutOffIndex) => { + let isValid = true; + + const startingHour = Number(rows[startIndex].hour); + const cutOffHour = Number(rows[cutOffIndex].hour); + + for (let i = startingHour; i < cutOffHour; i++) { + const hourDepartures = rows.filter(row => Number(row.hour) === i); + if (hourDepartures.length === 0) { + isValid = false; + } + } + return isValid; +}; + export const getDuplicateCutOff = (startIndex, rows) => { const startRow = rows[startIndex]; let cutOffIndex = startIndex; @@ -83,7 +98,18 @@ export const getDuplicateCutOff = (startIndex, rows) => { } cutOffIndex = i; } - return cutOffIndex; + if (isCutOffValid(rows, startIndex, cutOffIndex)) { + return cutOffIndex; + } + + let newCutOffIndex = cutOffIndex; + + // Roll back the cutoff hour until the result is a valid cutoff + while (!isCutOffValid(rows, startIndex, newCutOffIndex)) { + newCutOffIndex--; + } + + return newCutOffIndex; }; export const filterDuplicateDepartureHours = departureRows => { From cdf6b7bdd8f9c898ec1cb31ba2eaff87f0eb2b8a Mon Sep 17 00:00:00 2001 From: e-halinen Date: Tue, 19 Nov 2024 18:07:50 +0200 Subject: [PATCH 07/10] WIP: Latest tweaks for linetimetable printing --- src/components/lineTimetable/allStopsList.css | 1 - .../lineTimetable/lineTableColumns.css | 3 - .../lineTimetable/lineTableHeader.css | 14 +- .../lineTimetable/lineTimetable.css | 55 +++--- src/components/lineTimetable/lineTimetable.js | 167 ++++++++++-------- .../lineTimetable/lineTimetableHeader.css | 1 - 6 files changed, 114 insertions(+), 127 deletions(-) diff --git a/src/components/lineTimetable/allStopsList.css b/src/components/lineTimetable/allStopsList.css index 1a7f95df..045fa33f 100644 --- a/src/components/lineTimetable/allStopsList.css +++ b/src/components/lineTimetable/allStopsList.css @@ -1,7 +1,6 @@ .stopListsContainer { margin-top: 1rem; max-width: 95%; - break-inside: avoid; } .stopList { diff --git a/src/components/lineTimetable/lineTableColumns.css b/src/components/lineTimetable/lineTableColumns.css index ad8dc27f..5c416c17 100644 --- a/src/components/lineTimetable/lineTableColumns.css +++ b/src/components/lineTimetable/lineTableColumns.css @@ -3,8 +3,6 @@ min-width: 120px; font-family: GothamRounded-Book; margin: 0.5rem 0; - break-inside: avoid; - break-after: always; } .departureRow { @@ -20,7 +18,6 @@ align-items: normal; min-width: 100px; max-width: 350px; - break-inside: avoid; } .tableContainer { diff --git a/src/components/lineTimetable/lineTableHeader.css b/src/components/lineTimetable/lineTableHeader.css index 0169266e..2b1e0790 100644 --- a/src/components/lineTimetable/lineTableHeader.css +++ b/src/components/lineTimetable/lineTableHeader.css @@ -1,12 +1,7 @@ -div { - break-inside: avoid; - page-break-inside: avoid; -} - .headerContainer { display: block; - break-inside: avoid; page-break-inside: avoid; + break-inside: avoid; } .flexHeader { @@ -36,10 +31,3 @@ div { font-family: GothamRounded-Medium; font-size: 1rem; } - -@media print { - .headerContainer { - break-inside: avoid; - page-break-inside: avoid; - } -} diff --git a/src/components/lineTimetable/lineTimetable.css b/src/components/lineTimetable/lineTimetable.css index 470ceee4..52fd2d39 100644 --- a/src/components/lineTimetable/lineTimetable.css +++ b/src/components/lineTimetable/lineTimetable.css @@ -1,33 +1,3 @@ -.container { - page-break-inside: avoid; - break-inside: avoid; -} - -.root.a3 { - border-radius: 30px; - padding: 15px 0px 30px 0px; -} - -.root.standalone { - font-size: 22px; -} - -.root.summer { - background: white; - --timetable-accent-color: var(--light-background); -} - -.root.greyscale { - background: white; - color: black; - --timetable-accent-color: #eaeaea; -} - -.root.printable { - width: auto; - border-radius: 0; -} - .header { padding: 0 0 0 0.4em; } @@ -138,7 +108,8 @@ } .pageBreak { - break-inside: avoid; + break-before: avoid; + break-inside: always; } .timetableDivider { @@ -147,8 +118,14 @@ border-bottom: 2px dotted gray; } +.parentContainer { + display: block; +} + .timetableContainer { - break-after: always; + page-break-inside: avoid; + page-break-after: always; + display: block; } .fridayNote { @@ -159,7 +136,6 @@ .notesContainer { margin: 0.5rem 0 1rem 0.5rem; - break-after: always; } .pageNumber { @@ -168,7 +144,9 @@ color: black; position: absolute; left: 680px; - right: var(--border-radius); + right: 30px; + width: fit-content; + height: fit-content; } @media print { @@ -176,4 +154,13 @@ .noPrint * { display: none !important; } + + .pageBreak { + break-inside: always; + } + + .timetableContainer, + .timetableContainer * { + break-inside: avoid; + } } diff --git a/src/components/lineTimetable/lineTimetable.js b/src/components/lineTimetable/lineTimetable.js index 7dc14c79..6fc57338 100644 --- a/src/components/lineTimetable/lineTimetable.js +++ b/src/components/lineTimetable/lineTimetable.js @@ -15,6 +15,7 @@ import { isEqual, some, uniq, + sortBy, } from 'lodash'; import { scheduleSegments } from '../../util/domain'; import { addMissingFridayNote, combineConsecutiveDays } from '../timetable/timetableContainer'; @@ -278,7 +279,7 @@ class LineTimetable extends Component { componentDidMount() { const { renderPageNumbers } = this.state; if (this.props.printPageNumbers && !renderPageNumbers) { - this.setState({ renderPageNumbers: true }); + this.setState({ renderPageNumbers: false }); } } @@ -306,86 +307,98 @@ class LineTimetable extends Component { if (this.state.renderPageNumbers && this.content) { const { scrollHeight } = this.content; const pages = Math.ceil(scrollHeight / A5_PAGE_HEIGHT); - let j = 0; + let index = 0; + let inverseIndex = pages + 1; for (let i = 1; i < pages + 1; i++) { - pageNumberPositions.push(i * A5_PAGE_HEIGHT + j * PAGE_NUMBER_HEIGHT); - j++; + pageNumberPositions.push({ + top: i * A5_PAGE_HEIGHT + index * PAGE_NUMBER_HEIGHT, + bottom: inverseIndex * A5_PAGE_HEIGHT - index * PAGE_NUMBER_HEIGHT, + }); + index++; + inverseIndex--; } } if (showTimedStops) { return ( -
{ - this.content = ref; - }}> - {pageNumberPositions.length > 0 && - pageNumberPositions.map((height, index) => { - const pageNumber = index + 1; - return ( - - {pageNumber} - +
+
{ + this.content = ref; + }}> + {checkedRoutes.map(routeWithDepartures => { + const routesByDateRanges = routeWithDepartures.departuresByDateRanges.map( + departuresForDateRange => { + const { nameFi, nameSe, routeIdParsed } = routeWithDepartures; + return { + nameFi, + nameSe, + routeIdParsed, + departuresByStop: departuresForDateRange.departuresByStop.slice(0, MAX_STOPS), + dateBegin: departuresForDateRange.dateBegin, + dateEnd: departuresForDateRange.dateEnd, + }; + }, ); - })} - {checkedRoutes.map(routeWithDepartures => { - const routesByDateRanges = routeWithDepartures.departuresByDateRanges.map( - departuresForDateRange => { - const { nameFi, nameSe, routeIdParsed } = routeWithDepartures; - return { + + const sortedRoutes = sortBy(routesByDateRanges, ['dateBegin']); + + const routeDeparturesForDateRanges = sortedRoutes.map(routeForDateRange => { + const { nameFi, nameSe, routeIdParsed, - departuresByStop: departuresForDateRange.departuresByStop.slice(0, MAX_STOPS), - dateBegin: departuresForDateRange.dateBegin, - dateEnd: departuresForDateRange.dateEnd, - }; - }, - ); - - const routeDeparturesForDateRanges = routesByDateRanges.map(routeForDateRange => { - const { - nameFi, - nameSe, - routeIdParsed, - departuresByStop, - dateBegin, - dateEnd, - } = routeForDateRange; - - return ( - routeForDateRange.departuresByStop.length > 0 && ( -
- - -
-
- ) - ); - }); - - return routeDeparturesForDateRanges; - })} - {checkedRoutes.length >= 1 &&
{mappedNotes}
} - {checkedRoutes.length === 0 && ( -
- Linjaa ei löytynyt, tarkista tulosteen asetukset -
- )} + departuresByStop, + dateBegin, + dateEnd, + } = routeForDateRange; + + return ( + routeForDateRange.departuresByStop.length > 0 && ( +
+ + +
+
+ ) + ); + }); + + return routeDeparturesForDateRanges; + })} + {checkedRoutes.length >= 1 && ( +
{mappedNotes}
+ )} + {checkedRoutes.length === 0 && ( +
+ Linjaa ei löytynyt, tarkista tulosteen asetukset +
+ )} + {pageNumberPositions.length > 0 && + pageNumberPositions.map((position, index) => { + const pageNumber = index + 1; + return ( + + {pageNumber} + + ); + })} +
); } @@ -403,8 +416,9 @@ class LineTimetable extends Component { }); const uniqueDateRanges = flatten(uniqBy(allDepartureDateRanges, 'dateBegin')); + const sortedUniqueDateRanges = sortBy(uniqueDateRanges, ['dateBegin']); - const mappedDeparturesBothDirections = uniqueDateRanges.map(dateRange => { + const mappedDeparturesBothDirections = sortedUniqueDateRanges.map(dateRange => { const { dateBegin, dateEnd } = dateRange; const bothDirectionDepartures = []; @@ -437,10 +451,12 @@ class LineTimetable extends Component { this.content = ref; }}> {pageNumberPositions.length > 0 && - pageNumberPositions.map((height, index) => { + pageNumberPositions.map((position, index) => { const pageNumber = index + 1; return ( - + {pageNumber} ); @@ -464,7 +480,7 @@ class LineTimetable extends Component { return (
{hasDepartures && ( -
+
+
)} {hasDepartures && ( diff --git a/src/components/lineTimetable/lineTimetableHeader.css b/src/components/lineTimetable/lineTimetableHeader.css index a3245459..358370da 100644 --- a/src/components/lineTimetable/lineTimetableHeader.css +++ b/src/components/lineTimetable/lineTimetableHeader.css @@ -11,7 +11,6 @@ } .nameContainer { - display: block; padding-top: 2rem; } From 2b739402861a5bc4b45ad94fac1283c3e1cbeeb1 Mon Sep 17 00:00:00 2001 From: e-halinen Date: Thu, 21 Nov 2024 13:43:49 +0200 Subject: [PATCH 08/10] Fix page break issues when printing --- src/components/app.js | 4 +++ src/components/lineTimetable/allStopsList.css | 3 +- .../lineTimetable/lineTableColumns.css | 9 +++++- .../lineTimetable/lineTableColumns.js | 30 ++++++++++--------- .../lineTimetable/lineTableHeader.css | 5 ++-- .../lineTimetable/lineTimetable.css | 13 +------- src/components/lineTimetable/lineTimetable.js | 7 +++-- .../lineTimetable/lineTimetableHeader.css | 3 ++ 8 files changed, 41 insertions(+), 33 deletions(-) diff --git a/src/components/app.js b/src/components/app.js index 11daadc2..98dc52ac 100644 --- a/src/components/app.js +++ b/src/components/app.js @@ -105,6 +105,10 @@ class App extends Component { rootStyle = { display: 'inline-block' }; } + if (ComponentToRender === components.LineTimetable) { + rootStyle = { display: 'block' }; + } + return (
{ return a.minutes - b.minutes; }); return ( - - -
{hour}
-
- {sortedMinuteDepartures.map((departure, index) => ( -
- {departure.note !== null - ? `${departure.minutes.toString().padStart(2, '0')}${departure.note}` - : departure.minutes.toString().padStart(2, '0')} -
- ))} -
- - +
+ + +
{hour}
+
+ {sortedMinuteDepartures.map((departure, index) => ( +
+ {departure.note !== null + ? `${departure.minutes.toString().padStart(2, '0')}${departure.note}` + : departure.minutes.toString().padStart(2, '0')} +
+ ))} +
+ + +
); }; diff --git a/src/components/lineTimetable/lineTableHeader.css b/src/components/lineTimetable/lineTableHeader.css index 2b1e0790..bc6e2b13 100644 --- a/src/components/lineTimetable/lineTableHeader.css +++ b/src/components/lineTimetable/lineTableHeader.css @@ -1,7 +1,7 @@ .headerContainer { display: block; - page-break-inside: avoid; break-inside: avoid; + break-before: avoid-page; } .flexHeader { @@ -12,13 +12,14 @@ flex-grow: 1; height: 50px; padding-right: 16px; - margin-bottom: 1.5rem; + margin-bottom: 1rem; } .stopNamePrimary { font-size: 1rem; margin: 0 0 0 1.2rem; font-family: GothamRounded-Medium; + break-inside: avoid; } .stopNameSecondary { diff --git a/src/components/lineTimetable/lineTimetable.css b/src/components/lineTimetable/lineTimetable.css index 52fd2d39..7db5037f 100644 --- a/src/components/lineTimetable/lineTimetable.css +++ b/src/components/lineTimetable/lineTimetable.css @@ -108,8 +108,7 @@ } .pageBreak { - break-before: avoid; - break-inside: always; + break-inside: auto; } .timetableDivider { @@ -118,13 +117,7 @@ border-bottom: 2px dotted gray; } -.parentContainer { - display: block; -} - .timetableContainer { - page-break-inside: avoid; - page-break-after: always; display: block; } @@ -155,10 +148,6 @@ display: none !important; } - .pageBreak { - break-inside: always; - } - .timetableContainer, .timetableContainer * { break-inside: avoid; diff --git a/src/components/lineTimetable/lineTimetable.js b/src/components/lineTimetable/lineTimetable.js index 6fc57338..99b3e310 100644 --- a/src/components/lineTimetable/lineTimetable.js +++ b/src/components/lineTimetable/lineTimetable.js @@ -188,7 +188,7 @@ const RouteDepartures = props => { const combinedDepartureTables = Object.keys(mergedWeekdaysDepartures[0].combinedDays).map(key => { const showDivider = departuresByStop.length === 1 ? false : !showTimedStops; return ( -
+
{ departuresByStop={mergedWeekdaysDepartures} days={key} /> +
); }); @@ -321,7 +322,7 @@ class LineTimetable extends Component { if (showTimedStops) { return ( -
+
{ this.content = ref; @@ -355,7 +356,7 @@ class LineTimetable extends Component { return ( routeForDateRange.departuresByStop.length > 0 && ( -
+
Date: Thu, 21 Nov 2024 14:09:24 +0200 Subject: [PATCH 09/10] Remove unused code for LineTimetable --- .../lineTimetable/lineTimetable.css | 96 ------------------- src/components/lineTimetable/lineTimetable.js | 4 +- .../lineTimetable/lineTimetableContainer.js | 2 +- .../lineTimetable/lineTimetableHeader.css | 1 - 4 files changed, 3 insertions(+), 100 deletions(-) diff --git a/src/components/lineTimetable/lineTimetable.css b/src/components/lineTimetable/lineTimetable.css index 7db5037f..4edf4c2a 100644 --- a/src/components/lineTimetable/lineTimetable.css +++ b/src/components/lineTimetable/lineTimetable.css @@ -1,99 +1,3 @@ -.header { - padding: 0 0 0 0.4em; -} - -.headerTitle { - font-size: 1.75em; -} - -.componentName { - padding: 0 0 0 0.205em; - font-size: 1.875em; -} - -.title { - font-family: GothamRounded-Medium; - white-space: nowrap; - font-size: 0.9em; -} - -.subtitle { - font-family: GothamRounded-Book; - font-size: 0.9em; -} - -.footnote { - padding: 0.125em 0.625em; - font-family: GothamXNarrow-Book; - font-size: 0.813em; -} - -.validity { - font-family: GothamXNarrow-Book; - font-size: 0.75em; - line-height: 1.1; - letter-spacing: -0.025em; - text-align: right; - margin-left: auto; - position: absolute; - margin-top: -5px; - top: calc(var(--border-radius)); - right: var(--border-radius); -} - -.validity .shortId { - font-family: GothamRounded-Medium; - font-size: 1.75em; -} - -.validity .title { - font-family: GothamRounded-Medium; -} - -.stopZone { - padding-left: 0.5em; - margin-top: 0.875em; - display: flex; - flex-direction: row; - align-items: center; -} - -.zoneTitle { - font-size: 0.75em; - line-height: 1.1; - font-family: GothamRounded-Medium; - white-space: nowrap; - margin-right: 0.4em; -} - -.zoneSubtitle { - font-size: 0.75em; - composes: zoneTitle; - font-family: GothamRounded-Book; -} - -.zone { - position: relative; - box-sizing: border-box; - flex: none; - width: 1.5em; - height: 1.5em; - color: white; - background: var(--hsl-blue); - border-radius: 50%; -} - -.zoneLetter { - font-size: 1.25em; - position: absolute; - top: 50%; - left: 50%; - text-align: center; - line-height: 1; - font-family: GothamRounded-Medium; - text-transform: uppercase; -} - .timetableDays { margin: 0 1rem 1rem 1.2rem; font-size: 0.8em; diff --git a/src/components/lineTimetable/lineTimetable.js b/src/components/lineTimetable/lineTimetable.js index 99b3e310..75b42d20 100644 --- a/src/components/lineTimetable/lineTimetable.js +++ b/src/components/lineTimetable/lineTimetable.js @@ -463,9 +463,9 @@ class LineTimetable extends Component { ); })} {routeGroupsMappedDepartures.map(routeWithDepartures => { - return routeWithDepartures.departuresByDateRanges.map(departuresFordateRange => { + return routeWithDepartures.departuresByDateRanges.map(departuresForDateRange => { const { nameFi, nameSe, routeIdParsed } = routeWithDepartures; - const { dateBegin, dateEnd, departuresByStop } = departuresFordateRange; + const { dateBegin, dateEnd, departuresByStop } = departuresForDateRange; const hasDepartures = some(departuresByStop, stop => some(stop.departures, departureDay => departureDay.length > 0), diff --git a/src/components/lineTimetable/lineTimetableContainer.js b/src/components/lineTimetable/lineTimetableContainer.js index 59ed2b76..32fd1dbe 100644 --- a/src/components/lineTimetable/lineTimetableContainer.js +++ b/src/components/lineTimetable/lineTimetableContainer.js @@ -4,7 +4,7 @@ import { graphql } from 'react-apollo'; import gql from 'graphql-tag'; import mapProps from 'recompose/mapProps'; import compose from 'recompose/compose'; -import { filter, forEach, isEmpty, uniqBy, some, uniqWith } from 'lodash'; +import { filter, forEach, isEmpty, uniqBy, uniqWith } from 'lodash'; import apolloWrapper from 'util/apolloWrapper'; diff --git a/src/components/lineTimetable/lineTimetableHeader.css b/src/components/lineTimetable/lineTimetableHeader.css index e49ab2d2..c646d365 100644 --- a/src/components/lineTimetable/lineTimetableHeader.css +++ b/src/components/lineTimetable/lineTimetableHeader.css @@ -4,7 +4,6 @@ word-wrap: break-word; break-inside: avoid; break-after: avoid; - break-before: auto; } .lineId { From e171471a0ea75d4d32b77c2124a1014940b6eea7 Mon Sep 17 00:00:00 2001 From: e-halinen Date: Thu, 21 Nov 2024 14:27:17 +0200 Subject: [PATCH 10/10] Add footnote styling --- src/components/lineTimetable/lineTimetable.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/components/lineTimetable/lineTimetable.css b/src/components/lineTimetable/lineTimetable.css index 4edf4c2a..1883f91b 100644 --- a/src/components/lineTimetable/lineTimetable.css +++ b/src/components/lineTimetable/lineTimetable.css @@ -11,6 +11,12 @@ font-family: GothamRounded-Book; } +.footnote { + padding: 0.125em 0.625em; + font-family: GothamXNarrow-Book; + font-size: 0.813em; +} + .pageBreak { break-inside: auto; }