Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

AB#32085: Add page numbering #424

Merged
merged 10 commits into from
Nov 22, 2024
Merged

AB#32085: Add page numbering #424

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
e69b1e1
AB#32085: Add page numbers
e-halinen Oct 24, 2024
c9136b9
Add page numbering to other rendering state
e-halinen Oct 29, 2024
5f1f172
Add styling tweaks and note filtering
e-halinen Nov 5, 2024
5c5368b
WIP: tweak styling for better page breaks
e-halinen Nov 7, 2024
4f2c2b9
Add tweaked test script
e-halinen Nov 7, 2024
22e9e7c
Fix duplicate hour cutoff bug
e-halinen Nov 13, 2024
cdf6b7b
WIP: Latest tweaks for linetimetable printing
e-halinen Nov 19, 2024
2b73940
Fix page break issues when printing
e-halinen Nov 21, 2024
6671fed
Remove unused code for LineTimetable
e-halinen Nov 21, 2024
e171471
Add footnote styling
e-halinen Nov 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/a3Timetable/a3TableHeader.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
margin: 0.938em 0;
font-family: GothamRounded-Book;
color: var(--timetable-text-color);
page-break-after: avoid;
break-after: avoid;
margin: 0;
}

Expand Down
4 changes: 4 additions & 0 deletions src/components/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,10 @@ class App extends Component {
rootStyle = { display: 'inline-block' };
}

if (ComponentToRender === components.LineTimetable) {
rootStyle = { display: 'block' };
}

return (
<div
style={rootStyle}
Expand Down
5 changes: 2 additions & 3 deletions src/components/lineTimetable/allStopsList.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
.stopListsContainer {
margin-top: 1rem;
padding-top: 1.2rem;
max-width: 95%;
page-break-inside: avoid;
page-break-after: always;
break-inside: avoid;
}

.stopList {
Expand Down
15 changes: 8 additions & 7 deletions src/components/lineTimetable/lineTableColumns.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,21 @@
margin: 0.5rem 0;
}

.breakContainer {
display: block;
break-inside: avoid;
}

.departureRow {
font-size: 1rem;
margin-left: 1.6rem;
padding-top: 5px;
padding-bottom: 5px;
height: 35px;
break-inside: avoid;
}

.departureColumnContainer {
flex-grow: 1;
align-items: normal;
min-width: 100px;
max-width: 350px;
Expand All @@ -34,12 +39,14 @@
font-size: 15px;
width: 1.5rem;
margin-right: 0.5em;
break-inside: avoid;
}

.minutesContainer {
max-width: 400px;
display: flex;
flex-wrap: wrap;
break-inside: avoid;
}

.minutes {
Expand All @@ -59,9 +66,3 @@
.departureRowContainer > *:nth-child(even) {
background-color: #eaeaea;
}

@media print {
.departureRow {
page-break-inside: avoid;
}
}
30 changes: 16 additions & 14 deletions src/components/lineTimetable/lineTableColumns.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,20 +13,22 @@ const LineTimetableRow = props => {
return a.minutes - b.minutes;
});
return (
<WrappingRow>
<Row className={styles.departureRow}>
<div className={styles.hour}>{hour}</div>
<div className={styles.minutesContainer}>
{sortedMinuteDepartures.map((departure, index) => (
<div className={styles.minutes} key={index}>
{departure.note !== null
? `${departure.minutes.toString().padStart(2, '0')}${departure.note}`
: departure.minutes.toString().padStart(2, '0')}
</div>
))}
</div>
</Row>
</WrappingRow>
<div className={styles.breakContainer}>
<WrappingRow>
<Row className={styles.departureRow}>
<div className={styles.hour}>{hour}</div>
<div className={styles.minutesContainer}>
{sortedMinuteDepartures.map((departure, index) => (
<div className={styles.minutes} key={index}>
{departure.note !== null
? `${departure.minutes.toString().padStart(2, '0')}${departure.note}`
: departure.minutes.toString().padStart(2, '0')}
</div>
))}
</div>
</Row>
</WrappingRow>
</div>
);
};

Expand Down
9 changes: 8 additions & 1 deletion src/components/lineTimetable/lineTableHeader.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,25 @@
.headerContainer {
display: block;
break-inside: avoid;
break-before: avoid-page;
}

.flexHeader {
display: flex;
}

.stop {
flex-grow: 1;
height: 50px;
padding-right: 16px;
margin-bottom: 1.5rem;
margin-bottom: 1rem;
}

.stopNamePrimary {
font-size: 1rem;
margin: 0 0 0 1.2rem;
font-family: GothamRounded-Medium;
break-inside: avoid;
}

.stopNameSecondary {
Expand Down
10 changes: 6 additions & 4 deletions src/components/lineTimetable/lineTableHeader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,13 @@ const LineTableHeader = props => {
const { stop, isLastStop } = props;
return (
<div className={styles.headerContainer}>
<div className={styles.stop}>
<p className={styles.stopNamePrimary}>{stop.nameFi}</p>
<p className={styles.stopNameSecondary}>{stop.nameSe}</p>
<div className={styles.flexHeader}>
<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>
{!isLastStop && <div className={styles.directionBracket}>&gt;</div>}
</div>
);
};
Expand Down
171 changes: 22 additions & 149 deletions src/components/lineTimetable/lineTimetable.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,147 +1,3 @@
.root {
position: relative;
width: 100%;
padding: var(--border-radius);
padding-top: calc(var(--border-radius) - 15px);
border-radius: var(--border-radius);
color: var(--hsl-blue);
background: var(--light-background);
--timetable-accent-color: white;
font-size: 16px;
margin-bottom: 10px;
font-family: GothamRounded-Medium;
}

.root.a3 {
border-radius: 30px;
padding: 15px 0px 30px 0px;
}

.root.standalone {
font-size: 22px;
}

.root.summer {
background: white;
--timetable-accent-color: var(--light-background);
}

.root.greyscale {
background: white;
color: black;
--timetable-accent-color: #eaeaea;
}

.root.printable {
width: auto;
border-radius: 0;
}

.header {
padding: 0 0 0 0.4em;
}

.headerTitle {
font-size: 1.75em;
}

.componentName {
padding: 0 0 0 0.205em;
font-size: 1.875em;
}

.title {
font-family: GothamRounded-Medium;
white-space: nowrap;
font-size: 0.9em;
}

.subtitle {
font-family: GothamRounded-Book;
font-size: 0.9em;
}

.footnote {
padding: 0.125em 0.625em;
font-family: GothamXNarrow-Book;
font-size: 0.813em;
}

.validity {
font-family: GothamXNarrow-Book;
font-size: 0.75em;
line-height: 1.1;
letter-spacing: -0.025em;
text-align: right;
margin-left: auto;
position: absolute;
margin-top: -5px;
top: calc(var(--border-radius));
right: var(--border-radius);
}

.validity .shortId {
font-family: GothamRounded-Medium;
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;
}

.stopZone {
padding-left: 0.5em;
margin-top: 0.875em;
display: flex;
flex-direction: row;
align-items: center;
}

.zoneTitle {
font-size: 0.75em;
line-height: 1.1;
font-family: GothamRounded-Medium;
white-space: nowrap;
margin-right: 0.4em;
}

.zoneSubtitle {
font-size: 0.75em;
composes: zoneTitle;
font-family: GothamRounded-Book;
}

.zone {
position: relative;
box-sizing: border-box;
flex: none;
width: 1.5em;
height: 1.5em;
color: white;
background: var(--hsl-blue);
border-radius: 50%;
}

.zoneLetter {
font-size: 1.25em;
position: absolute;
top: 50%;
left: 50%;
text-align: center;
line-height: 1;
font-family: GothamRounded-Medium;
text-transform: uppercase;
}

.timetableDays {
margin: 0 1rem 1rem 1.2rem;
font-size: 0.8em;
Expand All @@ -155,8 +11,14 @@
font-family: GothamRounded-Book;
}

.footnote {
padding: 0.125em 0.625em;
font-family: GothamXNarrow-Book;
font-size: 0.813em;
}

.pageBreak {
page-break-inside: avoid;
break-inside: auto;
}

.timetableDivider {
Expand All @@ -166,7 +28,7 @@
}

.timetableContainer {
page-break-after: always;
display: block;
}

.fridayNote {
Expand All @@ -177,7 +39,17 @@

.notesContainer {
margin: 0.5rem 0 1rem 0.5rem;
page-break-after: always;
}

.pageNumber {
font-family: GothamRounded-Medium;
font-size: 16px;
color: black;
position: absolute;
left: 680px;
right: 30px;
width: fit-content;
height: fit-content;
}

@media print {
Expand All @@ -186,7 +58,8 @@
display: none !important;
}

body {
overflow-y: visible;
.timetableContainer,
.timetableContainer * {
break-inside: avoid;
}
}
Loading