Spythere/stacjownik
1
0
Fork 0
mirror of https://github.com/Spythere/stacjownik.git synced 2026-05-03 05:18:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

Poprawki z wyglądem

Browse Source
This commit is contained in:
Spythere
2021-02-21 15:52:12 +01:00
parent 82c7cdf354
commit 7126c287c0
2 changed files with 60 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/SceneryView/SceneryTimetable.vue
+7 -23
View File
@@ -16,12 +16,7 @@
</div>
<ul class="option-list" :class="{ open: listOpen }">
<li
class="option-item"
v-for="(cp, i) in stationInfo.checkpoints"
:key="i"
@click="() => chooseOption(cp.checkpointName)"
>
<li class="option-item" v-for="(cp, i) in stationInfo.checkpoints" :key="i" @click="() => chooseOption(cp.checkpointName)">
<input type="option-radio" name="sort" />
<label :id="cp.checkpointName">{{ cp.checkpointName }}</label>
</li>
@@ -31,35 +26,27 @@
<span class="timetable-item loading" v-if="dataStatus == 0">Ładowanie...</span>
<span
class="timetable-item empty"
v-else-if="computedScheduledTrains.length == 0"
>Brak aktywnych rozkładów!</span>
<span class="timetable-item empty" v-else-if="computedScheduledTrains.length == 0">Brak aktywnych rozkładów!</span>
<transition-group name="list-anim">
<div class="timetable-item" v-for="(scheduledTrain, i) in computedScheduledTrains" :key="i+1">
<span class="timetable-general">
<span class="general-info">
<router-link
:to="{
<router-link :to="{
name: 'TrainsView',
params: {
passedSearchedTrain: scheduledTrain.trainNo.toString(),
},
}"
>
}">
<span>
<strong>{{ scheduledTrain.category }}</strong>
{{ scheduledTrain.trainNo }}
</span>
</router-link>|
<span>
<a
:href="
<a :href="
'https://td2.info.pl/profile/?u=' + scheduledTrain.driverId
"
target="_blank"
>{{ scheduledTrain.driverName }}</a>
" target="_blank">{{ scheduledTrain.driverName }}</a>
</span>
<div class="info-route">
@@ -93,10 +80,7 @@
<span class="stop-arrow arrow"></span>
</span>
<span class="schedule-departure">
<span
class="departure-time terminates"
v-if="scheduledTrain.stopInfo.terminatesHere"
>KOŃCZY BIEG</span>
<span class="departure-time terminates" v-if="scheduledTrain.stopInfo.terminatesHere">KOŃCZY BIEG</span>
<span class="departure-time" v-else>
{{ scheduledTrain.stopInfo.departureTimeString }} ({{
scheduledTrain.stopInfo.departureDelay
src/views/HistoryView.vue
+53 -26
View File
@@ -24,32 +24,32 @@
<div class="list">
<div class="list_wrapper">
<div class="list_loading" v-if="dataLoading">POBIERANIE DANYCH...</div>
<ul class="list_content" v-else-if="computedHistoryList.length != 0">
<li v-if="currentDispatcherFrom != -1" class="current">
<div class="dispatcher-name">{{ currentDispatcher }}</div>
<div class="dispatcher-date">
<span style="color: #bbb">{{ new Date(currentDispatcherFrom).toLocaleDateString('pl-PL') }}</span>
{{ new Date(currentDispatcherFrom).toLocaleTimeString('pl-PL', { hour: '2-digit', minute: '2-digit' })}}
</div>
</li>
<li v-for="(history, i) in computedHistoryList" :key="i">
<div class="dispatcher-name">{{history.dispatcherName }}</div>
<div class="dispatcher-date">
<div>
<span style="color: #888">{{history.dispatcherFromDate }}</span>
{{ history.dispatcherFromTime }}
<!-- <div class="list_loading" v-if="dataLoading">POBIERANIE DANYCH...</div> -->
<transition name="list-anim" :key="inputStationName" mode="out-in">
<ul class="list_content" v-if="!dataLoading && computedHistoryList.length != 0">
<li v-if="currentDispatcherFrom != -1" class="current">
<div class="dispatcher-name">{{ currentDispatcher }}</div>
<div class="dispatcher-date">
<span style="color: #bbb">{{ new Date(currentDispatcherFrom).toLocaleDateString('pl-PL') }}</span>
{{ new Date(currentDispatcherFrom).toLocaleTimeString('pl-PL', { hour: '2-digit', minute: '2-digit' })}}
</div>
<div>
<span style="color: #888">{{ history.dispatcherToDate }}</span>
{{ history.dispatcherToTime }}
</li>
<li v-for="(history, i) in computedHistoryList" :key="i">
<div class="dispatcher-name">{{history.dispatcherName }}</div>
<div class="dispatcher-date">
<div>
<span style="color: #888">{{history.dispatcherFromDate }}</span>
{{ history.dispatcherFromTime }}
</div>
<div>
<span style="color: #888">{{ history.dispatcherToDate }}</span>
{{ history.dispatcherToTime }}
</div>
</div>
</div>
</li>
</ul>
<div v-else-if="inputStationName != ''" class="list_no-info">BRAK ZEBRANYCH DANYCH O RUCHU!</div>
</li>
</ul>
<div v-if="!dataLoading && inputStationName != ''" class="list_no-info">BRAK ZEBRANYCH DANYCH O RUCHU!</div>
</transition>
</div>
</div>
</div>
@@ -154,7 +154,7 @@ export default class HistoryView extends Vue {
.history {
&_view {
font-size: 1.5em;
font-size: 1.2em;
display: flex;
}
@@ -166,6 +166,23 @@ export default class HistoryView extends Vue {
}
}
.list-anim {
&-enter-active,
&-leave-active {
transition: all 150ms ease-out;
}
&-enter,
&-leave-to {
opacity: 0.1;
transform: scale(0.95);
}
&-move {
transition: transform 100ms;
}
}
.disclaimer {
color: #aaa;
}
@@ -243,12 +260,19 @@ export default class HistoryView extends Vue {
}
}
&_content {
max-height: 550px;
overflow: auto;
padding: 0.2em 0.5em;
}
&_content > li {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
background: #222;
padding: 0.5em 0.8em;
padding: 0.3em 0.8em;
margin: 0.3em 0;
gap: 10em;
@@ -269,6 +293,9 @@ export default class HistoryView extends Vue {
display: flex;
justify-content: center;
align-items: center;
font-size: 1.1em;
font-weight: 500;
}
}
}