fix: timetable print mode

This commit is contained in:
2025-01-25 19:20:00 +01:00
parent 00608bc667
commit aea657d04d
2 changed files with 18 additions and 23 deletions
+18 -22
View File
@@ -1,7 +1,7 @@
<template> <template>
<div class="overflow-hidden max-h-screen max-w-[800px] mx-auto"> <div class="max-h-screen max-w-[750px] mx-auto">
<div class="grid p-3 h-screen grid-rows-[auto_1fr]"> <div class="grid print:block p-3 h-screen grid-rows-[auto_1fr]">
<select name="trains" id="trains-select" class="mb-2 bg-zinc-800 p-1 rounded-md" v-model="selectedTrainId"> <select name="trains" id="trains-select" class="mb-2 bg-zinc-800 p-1 rounded-md print:hidden" v-model="selectedTrainId">
<option :value="train.id" v-for="train in timetableTrains.sort((t1, t2) => t1.driverName.localeCompare(t2.driverName, 'pl-PL'))"> <option :value="train.id" v-for="train in timetableTrains.sort((t1, t2) => t1.driverName.localeCompare(t2.driverName, 'pl-PL'))">
{{ train.driverName }} | {{ train.timetable?.category }} {{ train.trainNo }} {{ train.driverName }} | {{ train.timetable?.category }} {{ train.trainNo }}
</option> </option>
@@ -11,11 +11,11 @@
<table class="table-fixed"> <table class="table-fixed">
<thead> <thead>
<tr> <tr>
<th width="50" class="border border-white print:border-black">Nr <br />linii</th> <th width="40" class="border border-white print:border-black">Nr <br />linii</th>
<th width="100" class="border border-white print:border-black">Km</th> <th width="100" class="border border-white print:border-black">Km</th>
<th width="40" class="border border-white print:border-black">V<sub>P</sub></th> <th width="35" class="border border-white print:border-black">V<sub>P</sub></th>
<th width="40" class="border border-white print:border-black">V<sub>L</sub></th> <th width="35" class="border border-white print:border-black">V<sub>L</sub></th>
<th width="250" class="border border-white print:border-black">Stacja</th> <th width="200" class="border border-white print:border-black">Stacja</th>
<th width="100" class="border border-white print:border-black">Godzina</th> <th width="100" class="border border-white print:border-black">Godzina</th>
<th width="50" class="border border-white print:border-black text-xs p-0"> <th width="50" class="border border-white print:border-black text-xs p-0">
<table class="header-table"> <table class="header-table">
@@ -32,7 +32,7 @@
</tbody> </tbody>
</table> </table>
</th> </th>
<th width="60" class="border border-white print:border-black text-xs p-0"> <th width="50" class="border border-white print:border-black text-xs p-0">
<table class="header-table"> <table class="header-table">
<tbody> <tbody>
<tr> <tr>
@@ -76,7 +76,7 @@
'border-t print:border-t-black': i != 0 && computedTimetable[i - 1].departureSpeed != row.arrivalSpeed, 'border-t print:border-t-black': i != 0 && computedTimetable[i - 1].departureSpeed != row.arrivalSpeed,
}" }"
> >
<td :colspan="row.arrivalTracks == 2 ? '1' : '2'" class="font-bold" width="40"> <td :colspan="row.arrivalTracks == 2 ? '1' : '2'" class="font-bold" width="35">
{{ {{
i == 0 || i == 0 ||
computedTimetable[i - 1].departureSpeed != row.arrivalSpeed || computedTimetable[i - 1].departureSpeed != row.arrivalSpeed ||
@@ -85,7 +85,7 @@
: '&nbsp; ' : '&nbsp; '
}} }}
</td> </td>
<td v-if="row.arrivalTracks == 2" class="border-l print:border-l-black" width="40"> <td v-if="row.arrivalTracks == 2" class="border-l print:border-l-black" width="35">
{{ {{
i == 0 || i == 0 ||
computedTimetable[i - 1].departureSpeed != row.arrivalSpeed || computedTimetable[i - 1].departureSpeed != row.arrivalSpeed ||
@@ -116,7 +116,7 @@
<td class="border border-white print:border-black relative"> <td class="border border-white print:border-black relative">
<div class="absolute top-0 left-0 w-full h-full"> <div class="absolute top-0 left-0 w-full h-full">
<div class="flex flex-col h-full justify-between p-1"> <div class="flex flex-col h-full justify-between p-1 text-sm">
<div :class="{ 'font-bold': row.isMain }"> <div :class="{ 'font-bold': row.isMain }">
{{ row.pointName }} {{ row.pointName }}
<span v-if="row.stopType"> ; {{ row.stopType }}</span> <span v-if="row.stopType"> ; {{ row.stopType }}</span>
@@ -384,21 +384,13 @@ table {
border-collapse: collapse; border-collapse: collapse;
} }
.srjp-table {
table-layout: fixed;
}
.no-bottom-border { .no-bottom-border {
border-bottom-color: transparent; border-bottom-color: transparent;
} }
@media print { @media print {
.main_app {
display: block;
}
table { table {
page-break-inside: auto; page-break-after: auto;
} }
tr { tr {
@@ -406,8 +398,12 @@ table {
page-break-after: auto; page-break-after: auto;
} }
select { thead {
display: none; display: table-header-group;
} }
/* select {
display: none;
} */
} }
</style> </style>
-1
View File
@@ -13,7 +13,6 @@ body {
#app { #app {
width: 100%; width: 100%;
height: 100vh; height: 100vh;
overflow: hidden;
} }
@media print { @media print {