AB#32085: Change LineTimetable print layout to A5 (#420)

* AB#32085: Change print layout to A5, tweak styling * Variant logic for tram routes * Add empty array checks to timetable rendering
HSLdevcom · Oct 15, 2024 · a367a14 · a367a14
1 parent d834563
commit a367a14
Show file tree

Hide file tree

Showing 12 changed files with 219 additions and 81 deletions.
diff --git a/scripts/generator.js b/scripts/generator.js
@@ -94,6 +94,13 @@ async function renderComponent(options) {
       margin: 0,
       timeout: PDF_TIMEOUT,
     };
+  } else if (props.printAsA5) {
+    printOptions = {
+      printBackground: true,
+      format: 'A5',
+      margin: 0,
+      timeout: PDF_TIMEOUT,
+    };
   } else {
     printOptions = {
       printBackground: true,

diff --git a/src/components/lineTimetable/allStopsList.css b/src/components/lineTimetable/allStopsList.css
@@ -1,19 +1,21 @@
 .stopListsContainer {
-  margin-top: 2rem;
-  max-width: 1171px;
+  margin-top: 1rem;
+  max-width: 95%;
   page-break-inside: avoid;
+  page-break-after: always;
 }
 
 .stopList {
-  margin-bottom: 2rem;
+  margin-bottom: 1rem;
   padding-left: 1.2rem;
 }
 
 .lineInfoText {
   font-family: GothamRounded-Book;
-  font-size: 2rem;
+  font-size: 1rem;
 }
 
 .stopListText {
   font-family: GothamRounded-Medium;
+  font-size: 0.5rem;
 }
diff --git a/src/components/lineTimetable/lineTableColumns.css b/src/components/lineTimetable/lineTableColumns.css
@@ -1,20 +1,23 @@
 .departureRowContainer {
-  max-width: 1171px;
+  max-width: 420px;
   min-width: 120px;
   font-family: GothamRounded-Book;
   margin: 0.5rem 0;
 }
 
 .departureRow {
-  font-size: 1.2rem;
-  margin-left: 2rem;
+  font-size: 1rem;
+  margin-left: 1.6rem;
   padding-top: 5px;
   padding-bottom: 5px;
+  height: 35px;
 }
 
 .departureColumnContainer {
   flex-grow: 1;
   align-items: normal;
+  min-width: 100px;
+  max-width: 350px;
 }
 
 .tableContainer {
@@ -23,13 +26,14 @@
 }
 
 .wider {
-  min-width: 400px !important;
+  min-width: 270px;
 }
 
 .hour {
   font-family: GothamXNarrow-Medium;
-  min-width: 3rem;
-  align-self: baseline;
+  font-size: 15px;
+  width: 1.5rem;
+  margin-right: 0.5em;
 }
 
 .minutesContainer {
@@ -40,13 +44,20 @@
 
 .minutes {
   display: flex;
-  min-width: 2em;
-  padding: 0.25em 0 0 0.6em;
+  min-width: 0.9em;
   font-family: GothamXNarrow-Book;
-  font-size: 0.75em;
-  letter-spacing: -0.025em;
+  font-size: 12px;
+  letter-spacing: -0.02em;
   line-height: 1;
-  margin-right: 0.25em;
+  margin-right: 0.2em;
+}
+
+.divider {
+  border-right: 2px solid #3333338a;
+}
+
+.departureRowContainer > *:nth-child(even) {
+  background-color: #eaeaea;
 }
 
 @media print {

diff --git a/src/components/lineTimetable/lineTableColumns.js b/src/components/lineTimetable/lineTableColumns.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { Column, Row, WrappingRow } from '../util';
 import LineTableHeader from './lineTableHeader';
 import styles from './lineTableColumns.css';
-import classNames from 'classnames';
+import classnames from 'classnames';
 import { isArray, filter, isEmpty, groupBy } from 'lodash';
 import { filterDuplicateDepartureHours, getDuplicateCutOff } from '../timetable/tableRows';
 
@@ -19,8 +19,8 @@ const LineTimetableRow = props => {
         <div className={styles.minutesContainer}>
           {sortedMinuteDepartures.map((departure, index) => (
             <div className={styles.minutes} key={index}>
-              {departure.note === 'p'
-                ? `${departure.minutes.toString().padStart(2, '0')} pe`
+              {departure.note !== null
+                ? `${departure.minutes.toString().padStart(2, '0')}${departure.note}`
                 : departure.minutes.toString().padStart(2, '0')}
             </div>
           ))}
@@ -87,8 +87,15 @@ const DeparturesColumn = props => {
     });
 
     return (
-      <div>
-        <LineTableHeader stop={stop} />
+      <div
+        className={classnames({
+          [styles.wider]: props.showBothDirections,
+          [styles.divider]: stop.index === 0 && props.showBothDirections,
+        })}>
+        <LineTableHeader
+          stop={stop}
+          isLastStop={props.showBothDirections ? true : props.isLastStop}
+        />
         <div className={styles.departureRowContainer}>{departureRows}</div>
       </div>
     );
@@ -104,6 +111,8 @@ const DeparturesColumn = props => {
 DeparturesColumn.propTypes = {
   departures: PropTypes.array.isRequired,
   stop: PropTypes.object.isRequired,
+  showBothDirections: PropTypes.bool.isRequired,
+  isLastStop: PropTypes.bool.isRequired,
 };
 
 const LineTableColumns = props => {
@@ -117,27 +126,25 @@ const LineTableColumns = props => {
       });
       return (
         <div>
-          <Column
-            className={classNames(styles.departureColumnContainer, {
-              [styles.wider]: showDivider,
-            })}>
+          <Column className={styles.departureColumnContainer}>
             <DeparturesColumn
               departures={departures.combinedDays[validSelectedDay]}
               stop={{ ...departures.stop, index }}
+              showBothDirections={showDivider}
+              isLastStop={index === departuresByStop.length - 1}
             />
           </Column>
         </div>
       );
     }
     return (
       <div>
-        <Column
-          className={classNames(styles.departureColumnContainer, {
-            [styles.wider]: showDivider,
-          })}>
+        <Column className={styles.departureColumnContainer}>
           <DeparturesColumn
             departures={departures.combinedDays[selectedDepartureDays]}
             stop={{ ...departures.stop, index }}
+            showBothDirections={showDivider}
+            isLastStop={index === departuresByStop.length - 1}
           />
         </Column>
       </div>

diff --git a/src/components/lineTimetable/lineTableHeader.css b/src/components/lineTimetable/lineTableHeader.css
@@ -1,20 +1,27 @@
+.headerContainer {
+  display: flex;
+}
+
 .stop {
   flex-grow: 1;
-  height: 60px;
+  height: 50px;
   padding-right: 16px;
-  margin-bottom: 2rem;
+  margin-bottom: 1.5rem;
 }
 
 .stopNamePrimary {
-  font-size: 1.2em;
-  margin: 0 0 0 2rem;
+  font-size: 1rem;
+  margin: 0 0 0 1.2rem;
   font-family: GothamRounded-Medium;
-  word-break: normal;
 }
 
 .stopNameSecondary {
-  font-size: 1.2em;
-  margin: 0 0 0 2rem;
+  font-size: 1rem;
+  margin: 0 0 0 1.2rem;
   font-family: GothamXNarrow-Book;
-  word-break: normal;
+}
+
+.directionBracket {
+  font-family: GothamRounded-Medium;
+  font-size: 1rem;
 }
diff --git a/src/components/lineTimetable/lineTableHeader.js b/src/components/lineTimetable/lineTableHeader.js
@@ -4,17 +4,21 @@ import PropTypes from 'prop-types';
 import styles from './lineTableHeader.css';
 
 const LineTableHeader = props => {
-  const { stop } = props;
+  const { stop, isLastStop } = props;
   return (
-    <div className={styles.stop}>
-      <p className={styles.stopNamePrimary}>{stop.nameFi}</p>
-      <p className={styles.stopNameSecondary}>{stop.nameSe}</p>
+    <div className={styles.headerContainer}>
+      <div className={styles.stop}>
+        <p className={styles.stopNamePrimary}>{stop.nameFi}</p>
+        <p className={styles.stopNameSecondary}>{stop.nameSe}</p>
+      </div>
+      {!isLastStop && <div className={styles.directionBracket}>&gt;</div>}
     </div>
   );
 };
 
 LineTableHeader.propTypes = {
   stop: PropTypes.object.isRequired,
+  isLastStop: PropTypes.bool.isRequired,
 };
 
 export default LineTableHeader;
diff --git a/src/components/lineTimetable/lineTimetable.css b/src/components/lineTimetable/lineTimetable.css
@@ -143,14 +143,15 @@
 }
 
 .timetableDays {
-  margin: 0 1rem 1rem 2rem;
-  font-size: 1.5em;
+  margin: 0 1rem 1rem 1.2rem;
+  font-size: 0.8em;
   font-family: GothamRounded-Book;
+  word-wrap: break-word;
 }
 
 .timetableDates {
   margin: 0 1rem 1rem 2rem;
-  font-size: 1.5em;
+  font-size: 0.8em;
   font-family: GothamRounded-Book;
 }
 
@@ -168,6 +169,17 @@
   page-break-after: always;
 }
 
+.fridayNote {
+  margin-left: 1.5rem;
+  font-family: GothamRounded-Book;
+  font-size: 12px;
+}
+
+.notesContainer {
+  margin: 0.5rem 0 1rem 0.5rem;
+  page-break-after: always;
+}
+
 @media print {
   .noPrint,
   .noPrint * {