AB#32085: Change print layout to A5, tweak styling

HSLdevcom · Sep 17, 2024 · 7144e58 · 7144e58
1 parent d834563
commit 7144e58
Show file tree

Hide file tree

Showing 8 changed files with 54 additions and 30 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,22 @@
 .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;
 }
 
 .departureColumnContainer {
   flex-grow: 1;
   align-items: normal;
+  min-width: 100px;
+  max-width: 350px;
 }
 
 .tableContainer {
@@ -23,12 +25,14 @@
 }
 
 .wider {
-  min-width: 400px !important;
+  min-width: 200px !important;
 }
 
 .hour {
   font-family: GothamXNarrow-Medium;
-  min-width: 3rem;
+  font-size: 15px;
+  width: 1.5rem;
+  margin-right: 0.5em;
   align-self: baseline;
 }
 
@@ -40,13 +44,12 @@
 
 .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;
 }
 
 @media print {

diff --git a/src/components/lineTimetable/lineTableColumns.js b/src/components/lineTimetable/lineTableColumns.js
@@ -20,7 +20,7 @@ const LineTimetableRow = props => {
           {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')}pe`
                 : departure.minutes.toString().padStart(2, '0')}
             </div>
           ))}

diff --git a/src/components/lineTimetable/lineTableHeader.css b/src/components/lineTimetable/lineTableHeader.css
@@ -1,20 +1,18 @@
 .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;
 }
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,12 @@
   page-break-after: always;
 }
 
+.fridayNote {
+  margin-left: 1.5rem;
+  font-family: GothamRounded-Book;
+  font-size: 12px;
+}
+
 @media print {
   .noPrint,
   .noPrint * {

diff --git a/src/components/lineTimetable/lineTimetable.js b/src/components/lineTimetable/lineTimetable.js
@@ -21,7 +21,7 @@ import { scheduleSegments } from '../../util/domain';
 import { addMissingFridayNote, combineConsecutiveDays } from '../timetable/timetableContainer';
 import { shortenTrainParsedLineId } from '../../util/routes';
 
-const MAX_STOPS = 6; // Maximum amount of timed stops rendered on the timetable
+const MAX_STOPS = 4; // Maximum amount of timed stops rendered on the timetable
 
 const getScheduleWeekdaysText = dayType => {
   switch (dayType) {
@@ -182,6 +182,10 @@ const RouteDepartures = props => {
     return { ...mappedDeparturesForStop };
   });
 
+  const FridayNote = () => {
+    return <div className={styles.fridayNote}>pe = perjantaisin</div>;
+  };
+
   const combinedDepartureTables = Object.keys(mergedWeekdaysDepartures[0].combinedDays).map(key => {
     return (
       <div className={styles.timetableContainer}>
@@ -201,6 +205,7 @@ const RouteDepartures = props => {
           departuresByStop={mergedWeekdaysDepartures}
           days={key}
         />
+        {key === scheduleSegments.weekdays && <FridayNote />}
       </div>
     );
   });

diff --git a/src/components/lineTimetable/lineTimetableHeader.css b/src/components/lineTimetable/lineTimetableHeader.css
@@ -2,10 +2,12 @@
   display: flex;
   margin-bottom: 1rem;
   word-wrap: break-word;
+  page-break-before: always;
+  page-break-inside: avoid;
 }
 
 .lineId {
-  font-size: 4rem;
+  font-size: 2rem;
   margin: 2rem 2rem 0 2rem;
   font-family: GothamRounded-Medium;
 }
@@ -16,12 +18,12 @@
 }
 
 .lineName {
-  font-size: 30px;
+  font-size: 20px;
   font-family: GothamRounded-Medium;
 }
 
 .lineNameSecondary {
-  font-size: 25px;
+  font-size: 15px;
   font-family: GothamRounded-Book;
 }