Spythere/stacjownik
1
0
Fork 0
mirror of https://github.com/Spythere/stacjownik.git synced 2026-05-02 21:08:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore(scenery): improved thumbnails checkbox design and elements' padding

Browse Source
This commit is contained in:
Spythere
2026-03-14 01:50:48 +01:00
parent 41dda1e592
commit c901b14715
1 changed files with 189 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/SceneryView/SceneryTimetable/SceneryTimetableList.vue
+189 -159
View File
@@ -1,7 +1,11 @@
<template> <template>
<div class="scenery-timetable-list"> <div class="scenery-timetable-list">
<!-- Checkpoints derived from station data --> <!-- Checkpoints derived from station data -->
<div class="timetable-checkpoints" v-if="station?.generalInfo?.checkpoints">
<div
class="timetable-checkpoints"
v-if="station?.generalInfo && station.generalInfo.checkpoints.length > 0"
>
<template v-for="(ch, i) in station.generalInfo.checkpoints" :key="i"> <template v-for="(ch, i) in station.generalInfo.checkpoints" :key="i">
<template v-if="i > 0">&bull;</template> <template v-if="i > 0">&bull;</template>
<router-link <router-link
@@ -15,7 +19,10 @@
</div> </div>
<!-- Missing checkpoints if scenery is not in database --> <!-- Missing checkpoints if scenery is not in database -->
<div class="timetable-checkpoints" v-else-if="onlineScenery"> <div
class="timetable-checkpoints"
v-else-if="onlineScenery && onlineScenery.missingCheckpoints.length > 0"
>
<template v-for="(ch, i) in onlineScenery.missingCheckpoints" :key="i"> <template v-for="(ch, i) in onlineScenery.missingCheckpoints" :key="i">
<template v-if="i > 0">&bull;</template> <template v-if="i > 0">&bull;</template>
<router-link <router-link
@@ -28,192 +35,191 @@
</template> </template>
</div> </div>
<div> <div class="timetable-options">
<input <div class="thumbnails-checkbox">
type="checkbox" <label>
name="show-stock-thumbnails" <input type="checkbox" v-model="showStockThumbnails" />
id="show-stock-thumbnails" <span>POKAZUJ PODGLĄDY SKŁADÓW</span>
v-model="showStockThumbnails" </label>
/> </div>
<label for="show-stock-thumbnails">POKAZUJ PODGLĄDY SKŁADÓW</label>
</div> </div>
<div class="list-container"> <div class="list-container">
<transition-group name="list-anim" tag="ul"> <transition-group name="list-anim">
<li <div
v-if="apiStore.dataStatuses.connection == 0 && sceneryTimetables.length == 0" v-if="apiStore.dataStatuses.connection == 0 && sceneryTimetables.length == 0"
style="padding-bottom: 5em" style="padding-bottom: 5em"
key="list-loading" key="list-loading"
> >
<Loading /> <Loading />
</li> </div>
<li <div
class="timetable-item empty" class="timetable-item empty"
v-else-if="sceneryTimetables.length == 0 && !onlineScenery" v-else-if="sceneryTimetables.length == 0 && !onlineScenery"
key="list-offline" key="list-offline"
> >
{{ $t('scenery.offline') }} {{ $t('scenery.offline') }}
</li> </div>
<li <div
class="timetable-item empty" class="timetable-item empty"
v-else-if="sceneryTimetables.length == 0" v-else-if="sceneryTimetables.length == 0"
key="list-no-timetables" key="list-no-timetables"
> >
{{ $t('scenery.no-timetables') }} {{ $t('scenery.no-timetables') }}
</li> </div>
<li v-else class="timetable-item" v-for="(row, i) in sceneryTimetables" :key="row.train.id"> <router-link
<!-- {{ row.train.id + row.checkpointStop.arrivalTimestamp.toString() }} --> v-for="row in sceneryTimetables"
<router-link class="item-link" tabindex="0" :to="row.train.driverRouteLocation"> class="timetable-item"
<div class="item-top"> :to="row.train.driverRouteLocation"
<div class="top-general"> :key="row.train.id"
<span class="general-info"> >
<div class="info-train"> <div class="item-top">
<!-- Cargo warnings & details badges --> <div class="top-general">
<span <span class="general-info">
class="train-badge twr" <div class="info-train">
v-if="row.train.timetableData!.twr" <!-- Cargo warnings & details badges -->
data-tooltip-type="BaseTooltip" <span
:data-tooltip-content="$t('warnings.TWR')" class="train-badge twr"
> v-if="row.train.timetableData!.twr"
TWR data-tooltip-type="BaseTooltip"
</span> :data-tooltip-content="$t('warnings.TWR')"
>
TWR
</span>
<span <span
class="train-badge tn" class="train-badge tn"
v-if="row.train.timetableData!.hasDangerousCargo" v-if="row.train.timetableData!.hasDangerousCargo"
data-tooltip-type="BaseTooltip" data-tooltip-type="BaseTooltip"
:data-tooltip-content="$t('warnings.TN')" :data-tooltip-content="$t('warnings.TN')"
> >
TN TN
</span> </span>
<span <span
class="train-badge pn" class="train-badge pn"
v-if="row.train.timetableData!.hasExtraDeliveries" v-if="row.train.timetableData!.hasExtraDeliveries"
data-tooltip-type="BaseTooltip" data-tooltip-type="BaseTooltip"
:data-tooltip-content="$t('warnings.PN')" :data-tooltip-content="$t('warnings.PN')"
> >
PN PN
</span> </span>
<!-- Train info --> <!-- Train info -->
<span <span
data-tooltip-type="TrainInfoTooltip" data-tooltip-type="TrainInfoTooltip"
:data-tooltip-content="row.train.id" :data-tooltip-content="row.train.id"
class="tooltip-help" class="tooltip-help"
> >
<b class="text--primary"> <b class="text--primary">
{{ row.train.timetableData!.category }} {{ row.train.timetableData!.category }}
</b> </b>
<b>&nbsp;{{ row.train.trainNo }}</b> <b>&nbsp;{{ row.train.trainNo }}</b>
&bull; &bull;
{{ row.train.driverName }} {{ row.train.driverName }}
<i <i
class="fa-solid fa-user-slash" class="fa-solid fa-user-slash"
style="color: salmon" style="color: salmon"
v-if="!row.train.online && row.train.lastSeen <= Date.now() - 60000" v-if="!row.train.online && row.train.lastSeen <= Date.now() - 60000"
></i> ></i>
</span> </span>
<!-- Train stop comments --> <!-- Train stop comments -->
<span <span
v-if="row.checkpointStop.comments" v-if="row.checkpointStop.comments"
class="stop-comments-icon" class="stop-comments-icon"
data-tooltip-type="BaseTooltip" data-tooltip-type="BaseTooltip"
:data-tooltip-content="row.checkpointStop.comments" :data-tooltip-content="row.checkpointStop.comments"
> >
<img src="/images/icon-warning.svg" /> <img src="/images/icon-warning.svg" />
</span>
</div>
<div class="info-route">
<strong>{{ row.train.timetableData!.route.replace('|', ' - ') }}</strong>
</div>
<ScheduledTrainStatus :sceneryTimetableRow="row" />
</span>
</div>
<div class="top-schedule">
<span class="schedule-arrival">
<span class="arrival-time begins" v-if="row.checkpointStop.beginsHere">
{{ $t('timetables.begins') }}
</span>
<span class="arrival-time" v-else>
<div v-if="row.checkpointStop.arrivalDelay == 0">
<span>{{ timestampToTimeString(row.checkpointStop.arrivalTimestamp) }}</span>
</div>
<div v-else>
<div>
<s style="margin-right: 0.2em" class="text--grayed">{{
timestampToTimeString(row.checkpointStop.arrivalTimestamp)
}}</s>
</div>
<span>
{{ timestampToTimeString(row.checkpointStop.arrivalRealTimestamp) }}
({{ row.checkpointStop.arrivalDelay > 0 ? '+' : ''
}}{{ row.checkpointStop.arrivalDelay }})
</span> </span>
</div> </div>
</span>
</span>
<div class="info-route"> <span class="schedule-stop">
<strong>{{ row.train.timetableData!.route.replace('|', ' - ') }}</strong> <span class="stop-connection">
{{ row.currentElement.arrivalRouteExt }}
</span>
<span class="stop-time">
{{ row.checkpointStop.stopTime || '' }}
{{ row.checkpointStop.stopTime ? row.checkpointStop.stopType || 'pt' : '' }}
</span>
<span class="stop-connection">
{{ row.currentElement.departureRouteExt }}
</span>
</span>
<span class="schedule-departure">
<span class="departure-time terminates" v-if="row.checkpointStop.terminatesHere">
{{ $t('timetables.terminates') }}
</span>
<span class="departure-time" v-else>
<div v-if="row.checkpointStop.departureDelay == 0">
<span>{{ timestampToTimeString(row.checkpointStop.departureTimestamp) }}</span>
</div> </div>
<div v-else>
<ScheduledTrainStatus :sceneryTimetableRow="row" /> <div>
</span> <s style="margin-right: 0.2em" class="text--grayed">{{
</div>
<div class="top-schedule">
<span class="schedule-arrival">
<span class="arrival-time begins" v-if="row.checkpointStop.beginsHere">
{{ $t('timetables.begins') }}
</span>
<span class="arrival-time" v-else>
<div v-if="row.checkpointStop.arrivalDelay == 0">
<span>{{ timestampToTimeString(row.checkpointStop.arrivalTimestamp) }}</span>
</div>
<div v-else>
<div>
<s style="margin-right: 0.2em" class="text--grayed">{{
timestampToTimeString(row.checkpointStop.arrivalTimestamp)
}}</s>
</div>
<span>
{{ timestampToTimeString(row.checkpointStop.arrivalRealTimestamp) }}
({{ row.checkpointStop.arrivalDelay > 0 ? '+' : ''
}}{{ row.checkpointStop.arrivalDelay }})
</span>
</div>
</span>
</span>
<span class="schedule-stop">
<span class="stop-connection">
{{ row.currentElement.arrivalRouteExt }}
</span>
<span class="stop-time">
{{ row.checkpointStop.stopTime || '' }}
{{ row.checkpointStop.stopTime ? row.checkpointStop.stopType || 'pt' : '' }}
</span>
<span class="stop-connection">
{{ row.currentElement.departureRouteExt }}
</span>
</span>
<span class="schedule-departure">
<span class="departure-time terminates" v-if="row.checkpointStop.terminatesHere">
{{ $t('timetables.terminates') }}
</span>
<span class="departure-time" v-else>
<div v-if="row.checkpointStop.departureDelay == 0">
<span>{{
timestampToTimeString(row.checkpointStop.departureTimestamp) timestampToTimeString(row.checkpointStop.departureTimestamp)
}}</span> }}</s>
</div> </div>
<div v-else>
<div>
<s style="margin-right: 0.2em" class="text--grayed">{{
timestampToTimeString(row.checkpointStop.departureTimestamp)
}}</s>
</div>
<span> <span>
{{ timestampToTimeString(row.checkpointStop.departureRealTimestamp) }} {{ timestampToTimeString(row.checkpointStop.departureRealTimestamp) }}
({{ row.checkpointStop.departureDelay > 0 ? '+' : '' ({{ row.checkpointStop.departureDelay > 0 ? '+' : ''
}}{{ row.checkpointStop.departureDelay }}) }}{{ row.checkpointStop.departureDelay }})
</span> </span>
</div> </div>
</span>
</span> </span>
</div> </span>
</div> </div>
</div>
<div class="item-stock-list" v-if="showStockThumbnails"> <div class="item-stock-list" v-if="showStockThumbnails">
<StockList :trainStockList="row.train.stockList" /> <StockList :trainStockList="row.train.stockList" />
</div> </div>
</router-link> </router-link>
</li>
</transition-group> </transition-group>
</div> </div>
</div> </div>
@@ -306,7 +312,6 @@ const sceneryTimetables: ComputedRef<SceneryTimetableRow[]> = computed(() => {
display: grid; display: grid;
grid-template-rows: auto auto 1fr; grid-template-rows: auto auto 1fr;
overflow: hidden; overflow: hidden;
gap: 1em;
} }
.top-general { .top-general {
@@ -336,7 +341,7 @@ const sceneryTimetables: ComputedRef<SceneryTimetableRow[]> = computed(() => {
flex-wrap: wrap; flex-wrap: wrap;
font-size: 1.1em; font-size: 1.1em;
margin-top: 0.5em; margin: 0.5em 0;
} }
.checkpoint-item { .checkpoint-item {
@@ -353,21 +358,46 @@ const sceneryTimetables: ComputedRef<SceneryTimetableRow[]> = computed(() => {
} }
} }
.thumbnails-checkbox {
label {
cursor: pointer;
color: #aaa;
}
input {
width: 0;
outline: none;
}
input:checked + span {
color: var(--clr-success);
}
input:focus-visible + span {
outline: 1px solid white;
}
}
.list-container { .list-container {
position: relative; position: relative;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden;
margin-top: 0.5em;
padding: 2px;
width: 100%;
} }
.timetable-item { .timetable-item {
margin: 0.5em 0; display: block;
margin-bottom: 0.5em;
padding: 0.35em; padding: 0.35em;
max-width: 1100px; width: 100%;
overflow: hidden; overflow: hidden;
background: #353535; background: #353535;
z-index: 10;
&.empty { &.empty {
padding: 1rem; padding: 1rem;
font-size: 1.2em; font-size: 1.2em;
@@ -375,13 +405,13 @@ const sceneryTimetables: ComputedRef<SceneryTimetableRow[]> = computed(() => {
} }
} }
.timetable-item > .item-link > .item-top { .timetable-item > .item-top {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.2em 0.5em; gap: 1.2em 0.5em;
} }
.timetable-item > .item-link > .item-stock-list { .timetable-item > .item-stock-list {
margin-top: 1em; margin-top: 1em;
} }