AB#32085: Tweak styling, refactor render logic

src/components/lineTimetable/allStopsList.css

@@ -1,6 +1,7 @@
 .stopListsContainer {
   margin-top: 2rem;
   max-width: 1171px;
+  page-break-inside: avoid;
 }
 
 .stopList {
@@ -16,9 +17,3 @@
 .stopListText {
   font-family: GothamRounded-Medium;
 }
-
-@media print {
-  .stopListsContainer {
-    page-break-inside: avoid;
-  }
-}

src/components/lineTimetable/lineTableColumns.css

@@ -2,10 +2,7 @@
   max-width: 1171px;
   min-width: 120px;
   font-family: GothamRounded-Book;
-}
-
-.departureRowContainer > *:nth-child(odd) {
-  background-color: #e8e8e8;
+  margin: 0.5rem 0;
 }
 
 .departureRow {
@@ -29,8 +26,27 @@
   min-width: 400px !important;
 }
 
-.firstStopDivider {
-  border-right: 3px solid darkgray;
+.hour {
+  font-family: GothamXNarrow-Medium;
+  min-width: 3rem;
+  align-self: baseline;
+}
+
+.minutesContainer {
+  max-width: 400px;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.minutes {
+  display: flex;
+  min-width: 2em;
+  padding: 0.25em 0 0 0.6em;
+  font-family: GothamXNarrow-Book;
+  font-size: 0.75em;
+  letter-spacing: -0.025em;
+  line-height: 1;
+  margin-right: 0.25em;
 }
 
 @media print {

src/components/lineTimetable/lineTableColumns.js

@@ -4,41 +4,92 @@ import { Column, Row, WrappingRow } from '../util';
 import LineTableHeader from './lineTableHeader';
 import styles from './lineTableColumns.css';
 import classNames from 'classnames';
-import { isArray, filter, isEmpty } from 'lodash';
+import { isArray, filter, isEmpty, groupBy } from 'lodash';
+import { filterDuplicateDepartureHours, getDuplicateCutOff } from '../timetable/tableRows';
 
 const LineTimetableRow = props => {
-  const { hours, minutes } = props;
-  const paddedMins = minutes.toString().padStart(2, '0');
+  const { hour, departures } = props;
+  const sortedMinuteDepartures = departures.sort((a, b) => {
+    return a.minutes - b.minutes;
+  });
   return (
     <WrappingRow>
       <Row className={styles.departureRow}>
-        {hours}.{paddedMins}
+        <div className={styles.hour}>{hour}</div>
+        <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.minutes.toString().padStart(2, '0')}
+            </div>
+          ))}
+        </div>
       </Row>
     </WrappingRow>
   );
 };
 
 LineTimetableRow.propTypes = {
-  hours: PropTypes.number.isRequired,
-  minutes: PropTypes.number.isRequired,
+  hour: PropTypes.number.isRequired,
+  departures: PropTypes.array.isRequired,
 };
 
 const DeparturesColumn = props => {
   const { departures, stop } = props;
 
   if (departures) {
-    const departureRows = departures.map(departure => {
-      return <LineTimetableRow hours={departure.hours} minutes={departure.minutes} />;
+    const departuresByHour = groupBy(
+      departures,
+      departure => (departure.isNextDay ? 24 : 0) + departure.hours,
+    );
+
+    const rows = Object.entries(departuresByHour).map(([hours, hourlyDepartures]) => ({
+      hour: hours,
+      departures: hourlyDepartures,
+    }));
+
+    const formatHour = hour => `${hour % 24 < 10 ? '0' : ''}${hour % 24}`;
+
+    const rowsByHour = [];
+    for (let i = 0; i < rows.length; i++) {
+      const cutOff = getDuplicateCutOff(i, rows);
+      let hours =
+        rows[i].hour === rows[cutOff].hour
+          ? `${formatHour(rows[i].hour)}`
+          : `${formatHour(rows[i].hour)}-${formatHour(rows[cutOff].hour)}`;
+
+      if (rows.length === 2) {
+        hours = `${formatHour(rows[i].hour)}`;
+        const firstHour = { hour: hours, departures: rows[i].departures };
+        const secondHour = {
+          hour: `${formatHour(rows[rows.length - 1].hour)}`,
+          departures: rows[rows.length - 1].departures,
+        };
+
+        rowsByHour.push(firstHour, secondHour);
+        i = cutOff;
+      } else {
+        rowsByHour.push({
+          hour: hours,
+          departures: rows[i].departures,
+        });
+        i = cutOff;
+      }
+    }
+
+    const filteredDepartures = filterDuplicateDepartureHours(rowsByHour);
+
+    const departureRows = filteredDepartures.map(hourlyDepartures => {
+      return (
+        <LineTimetableRow hour={hourlyDepartures.hour} departures={hourlyDepartures.departures} />
+      );
     });
+
     return (
       <div>
         <LineTableHeader stop={stop} />
-        <div
-          className={classNames(styles.departureRowContainer, {
-            [styles.firstStopDivider]: stop.index === 0,
-          })}>
-          {departureRows}
-        </div>
+        <div className={styles.departureRowContainer}>{departureRows}</div>
       </div>
     );
   }

src/components/lineTimetable/lineTableHeader.css

@@ -1,12 +1,20 @@
 .stop {
   flex-grow: 1;
-  height: 100px;
+  height: 60px;
   padding-right: 16px;
+  margin-bottom: 2rem;
 }
 
-.stopName {
+.stopNamePrimary {
   font-size: 1.2em;
   margin: 0 0 0 2rem;
   font-family: GothamRounded-Medium;
   word-break: normal;
 }
+
+.stopNameSecondary {
+  font-size: 1.2em;
+  margin: 0 0 0 2rem;
+  font-family: GothamXNarrow-Book;
+  word-break: normal;
+}

src/components/lineTimetable/lineTableHeader.js

@@ -7,8 +7,8 @@ const LineTableHeader = props => {
   const { stop } = props;
   return (
     <div className={styles.stop}>
-      <p className={styles.stopName}>{stop.nameFi}</p>
-      <p className={styles.stopName}>{stop.nameSe}</p>
+      <p className={styles.stopNamePrimary}>{stop.nameFi}</p>
+      <p className={styles.stopNameSecondary}>{stop.nameSe}</p>
     </div>
   );
 };

src/components/lineTimetable/lineTimetable.css

@@ -149,13 +149,13 @@
 }
 
 .timetableDates {
-  margin: 0 1rem 1rem 4rem;
+  margin: 0 1rem 1rem 2rem;
   font-size: 1.5em;
   font-family: GothamRounded-Book;
 }
 
 .pageBreak {
-  display: none;
+  page-break-inside: avoid;
 }
 
 .timetableDivider {
@@ -164,20 +164,17 @@
   border-bottom: 2px dotted gray;
 }
 
+.timetableContainer {
+  page-break-after: always;
+}
+
 @media print {
   .noPrint,
   .noPrint * {
     display: none !important;
   }
-  .pageBreak {
-    display: block;
-    page-break-after: always;
-  }
 
   body {
     overflow-y: visible;
   }
-  div {
-    break-inside: avoid;
-  }
 }