mirror of
https://github.com/Spythere/stacjownik.git
synced 2026-05-03 05:18:11 +00:00
Poprawki wyglądu zakładki pociągów i scenerii
This commit is contained in:
+1
-1
@@ -59,7 +59,7 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Vue, Component, Prop } from "vue-property-decorator";
|
||||
import { Vue, Component } from "vue-property-decorator";
|
||||
import { Action, Getter } from "vuex-class";
|
||||
|
||||
import UpdateModal from "@/components/Global/UpdateModal.vue";
|
||||
|
||||
@@ -177,10 +177,9 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue, Prop } from "vue-property-decorator";
|
||||
import { Component, Prop } from "vue-property-decorator";
|
||||
|
||||
import Station from "@/scripts/interfaces/Station";
|
||||
import Train from "@/scripts/interfaces/Train";
|
||||
|
||||
import styleMixin from "@/mixins/styleMixin";
|
||||
|
||||
@@ -212,7 +211,7 @@ export default class SceneryInfo extends styleMixin {
|
||||
navigateToTrain(trainNo: number) {
|
||||
this.$router.push({
|
||||
name: "TrainsView",
|
||||
params: { passedSearchedTrain: trainNo.toString() },
|
||||
params: { queryTrain: trainNo.toString() },
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,426 +0,0 @@
|
||||
<template>
|
||||
<section class="card station-card">
|
||||
<div class="card-exit">
|
||||
<img
|
||||
class="schedule-icon"
|
||||
:src="require('@/assets/icon-clock.svg')"
|
||||
alt="schedule-icon"
|
||||
@click="() => (cardMode = cardMode == 0 ? 1 : 0)"
|
||||
/>
|
||||
<img :src="require('@/assets/icon-exit.svg')" alt="exit-icon" @click="exit" />
|
||||
</div>
|
||||
|
||||
<div class="card-content" :class="{ offline: !stationInfo.online }">
|
||||
<div class="main">
|
||||
<div class="main-content">
|
||||
<span class="main-level flex" v-if="stationInfo.reqLevel > -1">
|
||||
{{
|
||||
2 > parseInt(stationInfo.reqLevel) ? "L" : stationInfo.reqLevel
|
||||
}}
|
||||
</span>
|
||||
<span class="main-general">
|
||||
<div class="main-name">
|
||||
<a
|
||||
v-if="stationInfo.stationURL"
|
||||
:href="stationInfo.stationURL"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>{{ stationInfo.stationName }}</a>
|
||||
|
||||
<span v-else>{{ stationInfo.stationName }}</span>
|
||||
</div>
|
||||
<div class="main-hash">{{ stationInfo.stationHash }}</div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="icons">
|
||||
<img
|
||||
v-if="stationInfo.controlType"
|
||||
:src="require(`@/assets/icon-${stationInfo.controlType}.svg`)"
|
||||
:alt="stationInfo.controlType"
|
||||
:title="'Sterowanie ' + stationInfo.controlType"
|
||||
/>
|
||||
|
||||
<img
|
||||
v-if="stationInfo.signalType"
|
||||
:src="require(`@/assets/icon-${stationInfo.signalType}.svg`)"
|
||||
:alt="stationInfo.signalType"
|
||||
:title="'Sygnalizacja ' + stationInfo.signalType"
|
||||
/>
|
||||
|
||||
<img
|
||||
v-if="stationInfo.SBL && stationInfo.SBL !== ''"
|
||||
:src="require(`@/assets/icon-SBL.svg`)"
|
||||
alt="SBL"
|
||||
title="Sceneria posiada SBL na przynajmniej jednym ze szlaków"
|
||||
/>
|
||||
|
||||
<img
|
||||
v-if="stationInfo.default"
|
||||
:src="require(`@/assets/icon-td2.svg`)"
|
||||
alt="default-pack"
|
||||
title="Sceneria domyślnie dostępna w grze"
|
||||
/>
|
||||
|
||||
<img
|
||||
v-if="stationInfo.nonPublic || !stationInfo.reqLevel"
|
||||
:src="require(`@/assets/icon-lock.svg`)"
|
||||
alt="non-public"
|
||||
title="Sceneria niepubliczna"
|
||||
/>
|
||||
|
||||
<img
|
||||
v-if="stationInfo.unavailable"
|
||||
:src="require(`@/assets/icon-unavailable.svg`)"
|
||||
alt="icon-unavailable"
|
||||
title="Sceneria niedostępna"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="dispatcher">
|
||||
<div
|
||||
class="dispatcher-level flex"
|
||||
:style="
|
||||
calculateExpStyle(
|
||||
stationInfo.dispatcherExp,
|
||||
stationInfo.dispatcherIsSupporter
|
||||
)
|
||||
"
|
||||
>{{ stationInfo.online ? computedDispatcherExp : "" }}</div>
|
||||
<div class="dispatcher-info">
|
||||
<div class="dispatcher-name">
|
||||
<a
|
||||
:href="
|
||||
'https://td2.info.pl/profile/?u=' + stationInfo.dispatcherId
|
||||
"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>{{ stationInfo.dispatcherName || "---" }}</a>
|
||||
</div>
|
||||
|
||||
<div class="dispatcher-rate">
|
||||
<img :src="require(`@/assets/icon-like.svg`)" alt="like-icon" />
|
||||
<span>{{ stationInfo.dispatcherRate }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hours">
|
||||
<div class="hours-title title">STATUS</div>
|
||||
<span class="status" :class="statusClasses(stationInfo.occupiedTo)">
|
||||
{{
|
||||
stationInfo.occupiedTo
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="spawns flex flex-column">
|
||||
<h3 class="spawns-title title">OTWARTE SPAWNY</h3>
|
||||
<div class="spawns-content">
|
||||
<span
|
||||
class="spawn"
|
||||
v-for="(spawn, i) in stationInfo.spawnString"
|
||||
:key="spawn + stationInfo.dispatcherName + i"
|
||||
>{{ spawn }}</span>
|
||||
|
||||
<span class="spawn" v-if="!stationInfo.spawnString">BRAK</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="users flex flex-column">
|
||||
<h3 class="users-title title">GRACZE NA STACJI</h3>
|
||||
<div class="users-content">
|
||||
<div
|
||||
class="user-badge"
|
||||
:class="train.stopStatus"
|
||||
v-for="train in computedStationTrains"
|
||||
:key="train.trainNo + train.driverName"
|
||||
>
|
||||
<router-link
|
||||
:to="{
|
||||
name: 'TrainsView',
|
||||
params: { passedSearchedTrain: train.trainNo.toString() },
|
||||
}"
|
||||
>
|
||||
<span>{{ train.trainNo }}</span>
|
||||
|
|
||||
<span>{{ train.driverName }}</span>
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
<span
|
||||
class="user borderless"
|
||||
v-if="
|
||||
!stationInfo.stationTrains ||
|
||||
stationInfo.stationTrains.length == 0
|
||||
"
|
||||
>BRAK</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<StationTimetable
|
||||
:class="{ show: cardMode == 1 }"
|
||||
:scheduledTrains="this.stationInfo.scheduledTrains"
|
||||
:stationName="stationInfo.stationName"
|
||||
/>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Watch } from "vue-property-decorator";
|
||||
import { Getter } from "vuex-class";
|
||||
|
||||
import styleMixin from "@/mixins/styleMixin";
|
||||
|
||||
import Station from "@/scripts/interfaces/Station";
|
||||
import Train from "@/scripts/interfaces/Train";
|
||||
|
||||
import StationTimetable from "@/components/StationsView/StationTimetable.vue";
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
StationTimetable
|
||||
}
|
||||
})
|
||||
export default class StationCard extends styleMixin {
|
||||
@Prop() stationInfo!: Station;
|
||||
@Prop() exit!: void;
|
||||
|
||||
cardMode: number = 0;
|
||||
|
||||
get computedDispatcherExp(): string {
|
||||
return this.stationInfo.dispatcherExp < 2
|
||||
? "L"
|
||||
: `${this.stationInfo.dispatcherExp}`;
|
||||
}
|
||||
|
||||
get computedStationTrains() {
|
||||
return this.stationInfo.stationTrains.map(stationTrain => {
|
||||
const scheduledData = this.stationInfo.scheduledTrains.find(scheduledTrain => scheduledTrain.trainNo === stationTrain.trainNo);
|
||||
|
||||
return {
|
||||
...stationTrain,
|
||||
stopStatus: scheduledData?.stopStatus || "no-timetable"
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../styles/variables.scss";
|
||||
@import "../../styles/responsive.scss";
|
||||
@import "../../styles/user_badge.scss";
|
||||
|
||||
.title {
|
||||
color: $accentCol;
|
||||
font-weight: 600;
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 2em;
|
||||
text-align: center;
|
||||
|
||||
font-size: calc(0.5rem + 0.4vw);
|
||||
max-width: 800px;
|
||||
|
||||
@include bigScreen {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
@include smallScreen {
|
||||
font-size: 0.8em;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
|
||||
&-exit {
|
||||
z-index: 3;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
font-size: 1.6em;
|
||||
margin: 0.1em 0.1em;
|
||||
}
|
||||
|
||||
.schedule-icon {
|
||||
font-size: 1.4em;
|
||||
}
|
||||
}
|
||||
|
||||
&-content {
|
||||
position: relative;
|
||||
margin-top: 1rem;
|
||||
|
||||
display: grid;
|
||||
grid-template-areas: "main main" "icons icons" "dispatcher hours" "users spawns";
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
min-width: 200px;
|
||||
max-height: 600px;
|
||||
|
||||
transform: translateY(0%);
|
||||
|
||||
gap: 1.5em;
|
||||
|
||||
&.offline {
|
||||
.users,
|
||||
.spawns,
|
||||
.dispatcher {
|
||||
filter: grayscale(1);
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
@include smallScreen() {
|
||||
grid-template-areas: "main main" "icons icons" "dispatcher dispatcher" "hours hours" "users users" "spawns spawns";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main {
|
||||
grid-area: main;
|
||||
text-align: center;
|
||||
|
||||
&-content {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
@include smallScreen() {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
&-level {
|
||||
background: $accentCol;
|
||||
color: black;
|
||||
|
||||
font-size: 3em;
|
||||
font-weight: 600;
|
||||
|
||||
border-radius: 50%;
|
||||
width: 1.7em;
|
||||
height: 1.7em;
|
||||
margin: 0.3em 0.5em;
|
||||
}
|
||||
|
||||
&-hash {
|
||||
color: #9d9d9d;
|
||||
}
|
||||
|
||||
&-name {
|
||||
color: $accentCol;
|
||||
font-weight: 600;
|
||||
font-size: 2.3em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
.icons {
|
||||
grid-area: icons;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
max-width: 3em;
|
||||
margin: 0 0.4em;
|
||||
}
|
||||
}
|
||||
|
||||
.dispatcher {
|
||||
grid-area: dispatcher;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
&-level {
|
||||
font-size: 2.5em;
|
||||
font-weight: bold;
|
||||
margin-right: 0.3em;
|
||||
|
||||
max-width: 2em;
|
||||
|
||||
background: forestgreen;
|
||||
}
|
||||
|
||||
&-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
&-name {
|
||||
font-size: 1.35em;
|
||||
font-weight: bold;
|
||||
padding-bottom: 0.5em;
|
||||
}
|
||||
|
||||
&-rate {
|
||||
display: flex;
|
||||
font-size: 1.3em;
|
||||
|
||||
span {
|
||||
margin: 0 0.3em;
|
||||
color: $accentCol;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 1.2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hours {
|
||||
grid-area: hours;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
flex-direction: column;
|
||||
|
||||
.status {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
}
|
||||
|
||||
.users {
|
||||
grid-area: users;
|
||||
|
||||
&-content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.spawns {
|
||||
grid-area: spawns;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
&-content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
|
||||
& > .spawn {
|
||||
padding: 0.3em 0.4em;
|
||||
margin: 0.3em;
|
||||
background: #585858;
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -8,7 +8,11 @@
|
||||
class="schedule-item"
|
||||
v-for="(stop, i) in followingStops"
|
||||
:key="i"
|
||||
:class="{ confirmed: stop.confirmed, stopped: stop.stopped }"
|
||||
:class="{
|
||||
confirmed: stop.confirmed,
|
||||
stopped: stop.stopped,
|
||||
delayed: stop.departureDelay > 0,
|
||||
}"
|
||||
>
|
||||
<div class="progress-bar"></div>
|
||||
|
||||
@@ -24,7 +28,7 @@
|
||||
<span class="stop-info">
|
||||
<div class="info-indicator"></div>
|
||||
|
||||
<span class="info-distance">
|
||||
<span class="info-distance" v-if="stop.stopDistance">
|
||||
{{ Math.floor(stop.stopDistance) }}
|
||||
</span>
|
||||
|
||||
@@ -41,7 +45,9 @@
|
||||
p.
|
||||
{{
|
||||
stylizeTime(
|
||||
stop.arrivalRealTimeString,
|
||||
stop.confirmed
|
||||
? stop.arrivalRealTimeString
|
||||
: stop.arrivalTimeString,
|
||||
stop.arrivalDelay,
|
||||
stop.confirmed
|
||||
)
|
||||
@@ -52,8 +58,9 @@
|
||||
class="date-stop"
|
||||
v-if="stop.stopTime"
|
||||
:class="stop.stopType.replace(', ', '-')"
|
||||
>{{ stop.stopTime }} {{ stop.stopType }}</span
|
||||
>
|
||||
{{ stop.stopTime }} {{ stop.stopType }}
|
||||
</span>
|
||||
|
||||
<span
|
||||
class="date-departure"
|
||||
@@ -66,7 +73,9 @@
|
||||
o.
|
||||
{{
|
||||
stylizeTime(
|
||||
stop.departureRealTimeString,
|
||||
stop.confirmed
|
||||
? stop.departureRealTimeString
|
||||
: stop.departureTimeString,
|
||||
stop.departureDelay,
|
||||
stop.confirmed
|
||||
)
|
||||
@@ -112,8 +121,9 @@ export default class TrainSchedule extends Vue {
|
||||
|
||||
.train-schedule {
|
||||
max-height: 600px;
|
||||
// overflow: auto;
|
||||
margin-top: 2em;
|
||||
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.schedule-bar,
|
||||
@@ -140,7 +150,7 @@ export default class TrainSchedule extends Vue {
|
||||
|
||||
.schedule-wrapper {
|
||||
position: relative;
|
||||
margin-left: 1.5em;
|
||||
margin-left: 2em;
|
||||
}
|
||||
|
||||
ul.schedule-list {
|
||||
@@ -178,14 +188,16 @@ li.schedule-item > .stop-info {
|
||||
display: flex;
|
||||
|
||||
position: relative;
|
||||
text-align: center;
|
||||
|
||||
.info-distance {
|
||||
position: absolute;
|
||||
|
||||
top: 50%;
|
||||
left: -1.8rem;
|
||||
transform: translate(-100%, -50%);
|
||||
|
||||
margin-left: -1.7rem;
|
||||
|
||||
font-size: 0.8em;
|
||||
color: #d6d6d6;
|
||||
}
|
||||
@@ -210,6 +222,9 @@ li.schedule-item > .stop-info {
|
||||
.info-name {
|
||||
background: rgb(0, 81, 187);
|
||||
padding: 0.3rem 0.5rem;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.info-date {
|
||||
@@ -227,11 +242,7 @@ li.schedule-item > .stop-info {
|
||||
background: #ce8d00;
|
||||
}
|
||||
|
||||
&.pt,
|
||||
&.pm,
|
||||
&.pt-pm {
|
||||
background: #252525;
|
||||
}
|
||||
background: #252525;
|
||||
}
|
||||
|
||||
.date-arrival,
|
||||
|
||||
@@ -76,7 +76,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-bottom">
|
||||
<!-- <div class="info-bottom">
|
||||
<span
|
||||
class="info-label user-badge"
|
||||
:class="train.stopStatus || 'disconnected'"
|
||||
@@ -96,7 +96,7 @@
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div> -->
|
||||
</span>
|
||||
|
||||
<span class="driver">
|
||||
@@ -114,7 +114,13 @@
|
||||
</span>
|
||||
|
||||
<span class="driver-loco">
|
||||
<img :src="train.locoURL" @error="onImageError" />
|
||||
<img
|
||||
v-if="!missingLocoImages.includes(train.locoURL)"
|
||||
:src="train.locoURL"
|
||||
@error="onImageError"
|
||||
/>
|
||||
|
||||
<img v-else :src="defaultLocoImage" alt="unknown-train" />
|
||||
</span>
|
||||
</span>
|
||||
|
||||
@@ -177,9 +183,7 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Vue, Component, Prop, Watch } from "vue-property-decorator";
|
||||
|
||||
const unknownTrainImage = require("@/assets/unknown.png");
|
||||
import { Vue, Component, Prop } from "vue-property-decorator";
|
||||
|
||||
import Train from "@/scripts/interfaces/Train";
|
||||
|
||||
@@ -194,6 +198,10 @@ export default class TrainTable extends Vue {
|
||||
|
||||
showedSchedule = 0;
|
||||
|
||||
missingLocoImages: string[] = [];
|
||||
|
||||
defaultLocoImage = require("@/assets/unknown.png");
|
||||
|
||||
ascSVG = require("@/assets/icon-arrow-asc.svg");
|
||||
descSVG = require("@/assets/icon-arrow-desc.svg");
|
||||
|
||||
@@ -211,7 +219,8 @@ export default class TrainTable extends Vue {
|
||||
}
|
||||
|
||||
onImageError(e: Event) {
|
||||
(e.target as HTMLImageElement).src = unknownTrainImage;
|
||||
const imageEl = e.target as HTMLImageElement;
|
||||
this.missingLocoImages.push(imageEl.src);
|
||||
}
|
||||
|
||||
generateStopList(stops: any): string | undefined {
|
||||
@@ -266,7 +275,7 @@ export default class TrainTable extends Vue {
|
||||
}
|
||||
|
||||
&-row {
|
||||
padding: 1rem;
|
||||
padding: 1em;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
background-color: $primaryCol;
|
||||
@@ -281,7 +290,6 @@ export default class TrainTable extends Vue {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: repeat(3, minmax(100px, 1fr));
|
||||
|
||||
font-size: 1.25em;
|
||||
gap: 0.4em 0;
|
||||
}
|
||||
|
||||
@@ -298,8 +306,6 @@ export default class TrainTable extends Vue {
|
||||
justify-content: space-between;
|
||||
|
||||
&-category {
|
||||
font-size: 1.05em;
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
@@ -314,8 +320,6 @@ export default class TrainTable extends Vue {
|
||||
background: #1085b3;
|
||||
border-radius: 1em;
|
||||
|
||||
font-size: 0.85em;
|
||||
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
|
||||
@@ -450,24 +454,22 @@ export default class TrainTable extends Vue {
|
||||
}
|
||||
|
||||
.warning {
|
||||
border-radius: 15px;
|
||||
padding: 0.1em 1.2em;
|
||||
padding: 0.1em 0.8em;
|
||||
margin-right: 0.5em;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
color: white;
|
||||
color: black;
|
||||
|
||||
font-weight: bold;
|
||||
font-size: 0.7em;
|
||||
font-size: 0.85em;
|
||||
|
||||
&.twr {
|
||||
border: 2px solid $twr;
|
||||
background: $twr;
|
||||
}
|
||||
|
||||
&.skr {
|
||||
border: 2px solid $skr;
|
||||
background: $twr;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -28,7 +28,6 @@ import { Vue, Component } from "vue-property-decorator";
|
||||
import { Getter } from "vuex-class";
|
||||
|
||||
import Station from "@/scripts/interfaces/Station";
|
||||
import Train from "@/scripts/interfaces/Train";
|
||||
|
||||
import SceneryInfo from "@/components/SceneryView/SceneryInfo.vue";
|
||||
import SceneryTimetable from "@/components/SceneryView/SceneryTimetable.vue";
|
||||
|
||||
@@ -59,14 +59,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<transition name="card-anim">
|
||||
<StationCard
|
||||
v-if="focusedStationInfo"
|
||||
:stationInfo="focusedStationInfo"
|
||||
:exit="closeCard"
|
||||
/>
|
||||
</transition>
|
||||
|
||||
<transition name="card-anim">
|
||||
<FilterCard
|
||||
v-if="filterCardOpen"
|
||||
@@ -90,14 +82,12 @@ import StationFilterManager from "@/scripts/stationFilterManager";
|
||||
import inputData from "@/data/options.json";
|
||||
|
||||
import StationTable from "@/components/StationsView/StationTable.vue";
|
||||
import StationCard from "@/components/StationsView/StationCard.vue";
|
||||
import FilterCard from "@/components/StationsView/FilterCard.vue";
|
||||
|
||||
import DonationModal from "@/components/Global/DonationModal.vue";
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
StationCard,
|
||||
StationTable,
|
||||
FilterCard,
|
||||
DonationModal,
|
||||
|
||||
@@ -93,7 +93,6 @@ export default class TrainsView extends Vue {
|
||||
case "mass":
|
||||
if (a.mass > b.mass) return this.sorterActive.dir;
|
||||
else return -this.sorterActive.dir;
|
||||
break;
|
||||
|
||||
case "distance":
|
||||
if (!a.timetableData || !b.timetableData) return 0;
|
||||
@@ -101,22 +100,18 @@ export default class TrainsView extends Vue {
|
||||
if (a.timetableData.routeDistance > b.timetableData.routeDistance)
|
||||
return this.sorterActive.dir;
|
||||
else return -this.sorterActive.dir;
|
||||
break;
|
||||
|
||||
case "speed":
|
||||
if (a.speed > b.speed) return this.sorterActive.dir;
|
||||
else return -this.sorterActive.dir;
|
||||
break;
|
||||
|
||||
case "timetable":
|
||||
if (a.trainNo > b.trainNo) return this.sorterActive.dir;
|
||||
else return -this.sorterActive.dir;
|
||||
break;
|
||||
|
||||
case "length":
|
||||
if (a.length > b.length) return this.sorterActive.dir;
|
||||
else return -this.sorterActive.dir;
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
@@ -141,19 +136,13 @@ export default class TrainsView extends Vue {
|
||||
max-width: 1300px;
|
||||
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
|
||||
@include bigScreen() {
|
||||
.body-wrapper {
|
||||
@include bigScreen() {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include smallScreen {
|
||||
.body-wrapper {
|
||||
// font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.options-wrapper {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user