Add page numbering to other rendering state

HSLdevcom · Oct 29, 2024 · c9136b9 · c9136b9
1 parent e69b1e1
commit c9136b9
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 23 deletions.
diff --git 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
@@ -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 (
-                <span className={styles.address} style={{ top: `${height}px` }}>
+                <span className={styles.pageNumber} style={{ top: `${height}px` }}>
                   {pageNumber}
                 </span>
               );
@@ -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 (
+              <span className={styles.pageNumber} style={{ top: `${height}px` }}>
+                {pageNumber}
+              </span>
+            );
+          })}
         {routeGroupsMappedDepartures.map(routeWithDepartures => {
           return routeWithDepartures.departuresByDateRanges.map(departuresFordateRange => {
             const { nameFi, nameSe, routeIdParsed } = routeWithDepartures;
@@ -434,17 +443,19 @@ class LineTimetable extends Component {
             return (
               <div>
                 {hasDepartures && (
-                  <RouteDepartures
-                    routeIdParsed={routeIdParsed}
-                    nameFi={nameFi}
-                    nameSe={nameSe}
-                    showPrintBtn={this.props.showPrintBtn}
-                    lang={this.props.lang}
-                    departuresByStop={departuresByStop}
-                    dateBegin={dateBegin}
-                    dateEnd={dateEnd}
-                    showTimedStops={showTimedStops}
-                  />
+                  <div className={styles.pageBreak}>
+                    <RouteDepartures
+                      routeIdParsed={routeIdParsed}
+                      nameFi={nameFi}
+                      nameSe={nameSe}
+                      showPrintBtn={this.props.showPrintBtn}
+                      lang={this.props.lang}
+                      departuresByStop={departuresByStop}
+                      dateBegin={dateBegin}
+                      dateEnd={dateEnd}
+                      showTimedStops={showTimedStops}
+                    />
+                  </div>
                 )}
                 {hasDepartures && (
                   <AllStopsList