mirror of
https://github.com/Spythere/srjp-td2.git
synced 2026-05-03 05:28:12 +00:00
fix: timetable print mode
This commit is contained in:
+18
-22
@@ -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 @@
|
|||||||
: ' '
|
: ' '
|
||||||
}}
|
}}
|
||||||
</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>
|
||||||
|
|||||||
@@ -13,7 +13,6 @@ body {
|
|||||||
#app {
|
#app {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
overflow: hidden;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media print {
|
@media print {
|
||||||
|
|||||||
Reference in New Issue
Block a user