AB#32085: Tweak print parameters, clean up

src/components/lineTimetable/lineTimetable.css

@@ -52,6 +52,12 @@
   height: fit-content;
 }
 
+.printBtnContainer {
+  position: absolute;
+  left: 680px;
+  top: 20px;
+}
+
 @media print {
   .noPrint,
   .noPrint * {

src/components/lineTimetable/lineTimetable.js

@@ -4,6 +4,7 @@ import styles from './lineTimetable.css';
 import LineTimetableHeader from './lineTimetableHeader';
 import LineTableColumns from './lineTableColumns';
 import AllStopsList from './allStopsList';
+import { PrintButton } from '../util';
 import {
   filter,
   uniqBy,
@@ -59,7 +60,6 @@ const hasTimedStopRoutes = routes => {
 
 const RouteDepartures = props => {
   const {
-    showPrintBtn,
     lang,
     departuresByStop,
     routeIdParsed,
@@ -193,7 +193,6 @@ const RouteDepartures = props => {
           routeIdParsed={routeIdParsed}
           nameFi={nameFi}
           nameSe={nameSe}
-          showPrintBtn={showPrintBtn}
           lang={lang}
         />
         <span className={styles.timetableDays}>{getScheduleWeekdaysText(key)}</span>
@@ -217,7 +216,6 @@ RouteDepartures.defaultProps = {
   routeIdParsed: '',
   nameFi: '',
   nameSe: '',
-  showPrintBtn: '',
   lang: '',
   departuresByStop: {},
   dateBegin: '',
@@ -229,7 +227,6 @@ RouteDepartures.propTypes = {
   routeIdParsed: PropTypes.string,
   nameFi: PropTypes.string,
   nameSe: PropTypes.string,
-  showPrintBtn: PropTypes.string,
   lang: PropTypes.string,
   departuresByStop: PropTypes.object,
   dateBegin: PropTypes.string,
@@ -357,11 +354,13 @@ class LineTimetable extends Component {
                 return (
                   routeForDateRange.departuresByStop.length > 0 && (
                     <div>
+                      <div className={styles.printBtnContainer}>
+                        {this.props.showPrintButton && <PrintButton lang={this.props.lang} />}
+                      </div>
                       <RouteDepartures
                         routeIdParsed={routeIdParsed}
                         nameFi={nameFi}
                         nameSe={nameSe}
-                        showPrintBtn={this.props.showPrintBtn}
                         lang={this.props.lang}
                         departuresByStop={departuresByStop}
                         dateBegin={dateBegin}
@@ -482,11 +481,13 @@ class LineTimetable extends Component {
               <div>
                 {hasDepartures && (
                   <div>
+                    <div className={styles.printBtnContainer}>
+                      {this.props.showPrintButton && <PrintButton lang={this.props.lang} />}
+                    </div>
                     <RouteDepartures
                       routeIdParsed={routeIdParsed}
                       nameFi={nameFi}
                       nameSe={nameSe}
-                      showPrintBtn={this.props.showPrintBtn}
                       lang={this.props.lang}
                       departuresByStop={departuresByStop}
                       dateBegin={dateBegin}
@@ -520,15 +521,15 @@ class LineTimetable extends Component {
 
 LineTimetable.defaultProps = {
   routes: {},
-  showPrintBtn: false,
+  showPrintButton: false,
   lang: 'fi',
   printPageNumbers: true,
 };
 
 LineTimetable.propTypes = {
   line: PropTypes.object.isRequired,
   routes: PropTypes.object,
-  showPrintBtn: PropTypes.bool,
+  showPrintButton: PropTypes.bool,
   lang: PropTypes.string,
   printPageNumbers: PropTypes.bool,
 };

src/components/lineTimetable/lineTimetableContainer.js

@@ -222,7 +222,7 @@ const filterNotes = (notes, dateBegin) => {
 
 const lineQueryMapper = mapProps(props => {
   const line = props.data.lines.nodes[0];
-  const { showPrintBtn, lang } = props;
+  const { showPrintButton, lang } = props;
 
   const mergedRoutes = mergeExtraRoutes(line.routes.nodes);
 
@@ -251,7 +251,7 @@ const lineQueryMapper = mapProps(props => {
   return {
     line: { ...line, notes: filteredNotes },
     routes: filterRoutes(routesWithGroupedDepartures),
-    showPrintBtn,
+    showPrintButton,
     lang,
   };
 });
@@ -261,7 +261,7 @@ const hoc = compose(graphql(lineQuery), apolloWrapper(lineQueryMapper));
 const LineTimetableContainer = hoc(LineTimetable);
 
 LineTimetableContainer.defaultProps = {
-  showPrintBtn: false,
+  showPrintButton: false,
   lang: 'fi',
   printPageNumbers: true,
 };
@@ -270,7 +270,7 @@ LineTimetableContainer.propTypes = {
   lineId: PropTypes.string.isRequired,
   dateBegin: PropTypes.string.isRequired,
   dateEnd: PropTypes.string.isRequired,
-  showPrintBtn: PropTypes.bool,
+  showPrintButton: PropTypes.bool,
   lang: PropTypes.string,
   printPageNumbers: PropTypes.bool,
 };

src/components/lineTimetable/lineTimetableHeader.css

@@ -25,8 +25,3 @@
   font-size: 15px;
   font-family: GothamRounded-Book;
 }
-
-.printBtnContainer {
-  display: inline;
-  margin-top: 1rem;
-}

src/components/lineTimetable/lineTimetableHeader.js

@@ -5,7 +5,7 @@ import styles from './lineTimetableHeader.css';
 import { PrintButton } from '../util';
 
 const LineTimetableHeader = props => {
-  const { showPrintBtn, lang, routeIdParsed, nameFi, nameSe } = props;
+  const { routeIdParsed, nameFi, nameSe } = props;
   return (
     <div className={styles.header}>
       <div className={styles.lineId}>
@@ -19,24 +19,19 @@ const LineTimetableHeader = props => {
           <span>{nameSe}</span>
         </div>
       </div>
-      <div className={styles.printBtnContainer}>{showPrintBtn && <PrintButton lang={lang} />}</div>
     </div>
   );
 };
 
 LineTimetableHeader.defaultProps = {
   nameFi: '',
   nameSe: '',
-  showPrintBtn: false,
-  lang: 'fi',
 };
 
 LineTimetableHeader.propTypes = {
   routeIdParsed: PropTypes.string.isRequired,
   nameFi: PropTypes.string,
   nameSe: PropTypes.string,
-  showPrintBtn: PropTypes.bool,
-  lang: PropTypes.string,
 };
 
 export default LineTimetableHeader;