mirror of
https://github.com/Spythere/stacjownik.git
synced 2026-05-03 13:28:11 +00:00
Zmiana i poprawki w wyglądzie RJ pociągów w trasie
This commit is contained in:
@@ -1,41 +1,43 @@
|
||||
<template>
|
||||
<div class="train-schedule" @click="click">
|
||||
<div class="schedule-wrapper">
|
||||
<div class="schedule-bar"></div>
|
||||
|
||||
<ul class="schedule-list">
|
||||
<ul class="stop_list">
|
||||
<li
|
||||
class="schedule-item"
|
||||
v-for="(stop, i) in followingStops"
|
||||
:key="i"
|
||||
:class="{
|
||||
confirmed: stop.confirmed,
|
||||
stopped: stop.stopped,
|
||||
beginning: stop.beginsHere,
|
||||
delayed: stop.departureDelay > 0,
|
||||
}"
|
||||
>
|
||||
<div class="progress-bar"></div>
|
||||
|
||||
<!-- <div class="progress-bar"></div> -->
|
||||
<!--
|
||||
<div
|
||||
class="stop-line arrival"
|
||||
class="stop-line"
|
||||
v-if="
|
||||
i > 0 && followingStops[i - 1].departureLine != stop.arrivalLine
|
||||
"
|
||||
>
|
||||
{{ stop.arrivalLine }}
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<span class="stop-info">
|
||||
<div class="info-indicator"></div>
|
||||
<span class="stop_info">
|
||||
<div class="indicator"></div>
|
||||
|
||||
<span class="info-distance" v-if="stop.stopDistance">
|
||||
<div class="progress-bar"></div>
|
||||
|
||||
<div class="stop-bar"></div>
|
||||
|
||||
<span class="distance" v-if="stop.stopDistance">
|
||||
{{ Math.floor(stop.stopDistance) }}
|
||||
</span>
|
||||
|
||||
<span class="info-name" v-html="stop.stopName"></span>
|
||||
<span class="info-date">
|
||||
<span class="stop-name" v-html="stop.stopName"></span>
|
||||
<span class="stop-date">
|
||||
<span
|
||||
class="date-arrival"
|
||||
class="date arrival"
|
||||
v-if="!stop.beginsHere"
|
||||
:class="{
|
||||
delayed: stop.arrivalDelay > 0 && stop.confirmed,
|
||||
@@ -55,7 +57,7 @@
|
||||
</span>
|
||||
|
||||
<span
|
||||
class="date-stop"
|
||||
class="date stop"
|
||||
v-if="stop.stopTime"
|
||||
:class="stop.stopType.replace(', ', '-')"
|
||||
>
|
||||
@@ -63,7 +65,7 @@
|
||||
</span>
|
||||
|
||||
<span
|
||||
class="date-departure"
|
||||
class="date departure"
|
||||
v-if="!stop.terminatesHere && stop.stopTime != 0"
|
||||
:class="{
|
||||
delayed: stop.departureDelay > 0 && stop.confirmed,
|
||||
@@ -84,7 +86,22 @@
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<div class="stop-line departure">{{ stop.departureLine }}</div>
|
||||
<div class="stop_line">
|
||||
<div class="progress-bar"></div>
|
||||
|
||||
<span v-if="i < followingStops.length - 1">
|
||||
<span
|
||||
v-if="stop.departureLine == followingStops[i + 1].arrivalLine"
|
||||
>
|
||||
{{ stop.departureLine }}
|
||||
</span>
|
||||
|
||||
<span v-else>
|
||||
{{ stop.departureLine }} /
|
||||
{{ followingStops[i + 1].arrivalLine }}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -117,8 +134,6 @@ export default class TrainSchedule extends Vue {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../styles/responsive.scss";
|
||||
|
||||
.train-schedule {
|
||||
max-height: 600px;
|
||||
margin-top: 2em;
|
||||
@@ -126,129 +141,155 @@ export default class TrainSchedule extends Vue {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.schedule-bar,
|
||||
.schedule-wrapper {
|
||||
margin-left: 2.5rem;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
|
||||
top: 0;
|
||||
left: 0;
|
||||
left: -1rem;
|
||||
|
||||
background: white;
|
||||
}
|
||||
transform: translateX(-1px);
|
||||
|
||||
.progress-bar {
|
||||
height: 100%;
|
||||
|
||||
top: 0;
|
||||
left: calc(-0.5rem - 2px);
|
||||
width: 2px;
|
||||
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.schedule-wrapper {
|
||||
position: relative;
|
||||
margin-left: 2em;
|
||||
}
|
||||
|
||||
ul.schedule-list {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
ul.schedule-list > li.schedule-item {
|
||||
ul.stop_list > li {
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
padding: 0 0.5rem;
|
||||
padding: 0 0.5em;
|
||||
|
||||
&.confirmed {
|
||||
.progress-bar,
|
||||
.stop-info > .info-indicator {
|
||||
background: lime;
|
||||
& > .stop_line > .progress-bar {
|
||||
background-color: lime;
|
||||
}
|
||||
|
||||
& > .stop_info > .progress-bar {
|
||||
background-color: lime;
|
||||
}
|
||||
|
||||
& > .stop_info > .indicator {
|
||||
border-color: lime;
|
||||
}
|
||||
}
|
||||
|
||||
&.stopped {
|
||||
.progress-bar {
|
||||
background: lime;
|
||||
height: 50%;
|
||||
}
|
||||
& > .stop_info {
|
||||
& > .indicator {
|
||||
border-color: orangered;
|
||||
}
|
||||
|
||||
.stop-info > .info-indicator {
|
||||
background: orangered;
|
||||
& > .stop-bar {
|
||||
background: orangered;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li.schedule-item > .stop-info {
|
||||
display: flex;
|
||||
.stop_line {
|
||||
font-size: 0.8em;
|
||||
color: #ccc;
|
||||
|
||||
position: relative;
|
||||
text-align: center;
|
||||
padding: 0.35em 0;
|
||||
|
||||
.info-distance {
|
||||
position: relative;
|
||||
|
||||
.line-segment {
|
||||
color: white;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.stop_info {
|
||||
display: flex;
|
||||
|
||||
position: relative;
|
||||
text-align: center;
|
||||
|
||||
padding: 0.15em 0;
|
||||
}
|
||||
|
||||
.stop-bar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -1rem;
|
||||
|
||||
transform: translateX(-1px);
|
||||
|
||||
z-index: 2;
|
||||
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.distance {
|
||||
position: absolute;
|
||||
|
||||
top: 50%;
|
||||
transform: translate(-100%, -50%);
|
||||
|
||||
margin-left: -30px;
|
||||
margin-left: -1.75rem;
|
||||
|
||||
font-size: 0.8em;
|
||||
font-size: 0.85em;
|
||||
color: #d6d6d6;
|
||||
}
|
||||
|
||||
.info-indicator {
|
||||
.indicator {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
z-index: 3;
|
||||
|
||||
top: 50%;
|
||||
left: -1.5rem;
|
||||
left: -1rem;
|
||||
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
text-align: right;
|
||||
|
||||
transform: translateY(-50%);
|
||||
|
||||
width: 15px;
|
||||
height: 2px;
|
||||
height: 15px;
|
||||
|
||||
background: white;
|
||||
background: var(--clr-secondary);
|
||||
border: 2px solid white;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.info-name {
|
||||
background: rgb(0, 81, 187);
|
||||
padding: 0.3rem 0.5rem;
|
||||
.stop-name {
|
||||
background: var(--clr-accent);
|
||||
padding: 0.3em 0.5em;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.info-date {
|
||||
.stop-date {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
background: #5c5c5c;
|
||||
padding: 0.3rem 0.5rem;
|
||||
.date {
|
||||
background: #494949;
|
||||
padding: 0.3em 0.5em;
|
||||
}
|
||||
|
||||
.date-stop {
|
||||
.stop {
|
||||
&.ph,
|
||||
&.ph-pm {
|
||||
background: #ce8d00;
|
||||
background: #db8e29;
|
||||
}
|
||||
|
||||
background: #252525;
|
||||
}
|
||||
|
||||
.date-arrival,
|
||||
.date-departure {
|
||||
.arrival,
|
||||
.departure {
|
||||
&.delayed {
|
||||
background: rgb(250, 0, 0);
|
||||
background: #f80334;
|
||||
}
|
||||
|
||||
&.preponed {
|
||||
@@ -257,13 +298,4 @@ li.schedule-item > .stop-info {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li.schedule-item > .stop-line {
|
||||
font-size: 0.8em;
|
||||
color: #bbb;
|
||||
padding: 0.3em 0;
|
||||
margin: 0.2em 0;
|
||||
|
||||
transform: translateX(-0.8rem);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -191,7 +191,6 @@ export default class TrainStats extends Vue {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../styles/responsive";
|
||||
@import "../../styles/variables";
|
||||
|
||||
.stats-anim {
|
||||
&-enter-active,
|
||||
@@ -233,7 +232,7 @@ export default class TrainStats extends Vue {
|
||||
max-width: 700px;
|
||||
width: 100%;
|
||||
|
||||
background: rgba(black, 0.85);
|
||||
background: #222;
|
||||
border-radius: 0 1em 1em 1em;
|
||||
|
||||
padding: 1rem;
|
||||
@@ -263,7 +262,7 @@ export default class TrainStats extends Vue {
|
||||
}
|
||||
|
||||
&-type {
|
||||
background: rgb(88, 88, 88);
|
||||
background: #585858;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@@ -284,12 +283,14 @@ export default class TrainStats extends Vue {
|
||||
}
|
||||
|
||||
&.twr > &-type {
|
||||
background-color: $twr;
|
||||
background-color: var(--clr-twr);
|
||||
|
||||
color: black;
|
||||
}
|
||||
|
||||
&.skr > &-type {
|
||||
background-color: $skr;
|
||||
background-color: var(--clr-skr);
|
||||
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
@@ -302,14 +303,6 @@ export default class TrainStats extends Vue {
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
font-size: 0.85em;
|
||||
|
||||
&.twr {
|
||||
background-color: #ffc700;
|
||||
}
|
||||
|
||||
&.skr {
|
||||
background-color: #f00000;
|
||||
}
|
||||
}
|
||||
|
||||
@include smallScreen {
|
||||
|
||||
@@ -75,28 +75,6 @@
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="info-bottom">
|
||||
<span
|
||||
class="info-label user-badge"
|
||||
:class="train.stopStatus || 'disconnected'"
|
||||
>
|
||||
<span
|
||||
class="tooltip"
|
||||
:style="!train.online ? 'color: gray' : ''"
|
||||
>
|
||||
<span v-if="train.stopStatus">{{ train.stopLabel }}</span>
|
||||
<span v-else-if="train.currentStationName">
|
||||
Pociąg na złej stacji!
|
||||
</span>
|
||||
<span v-else>Sceneria offline!</span>
|
||||
|
||||
<span class="tooltip-text" v-if="!train.online">
|
||||
Pociąg offline
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</div> -->
|
||||
</span>
|
||||
|
||||
<span class="driver">
|
||||
@@ -253,7 +231,6 @@ export default class TrainTable extends Vue {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../styles/responsive.scss";
|
||||
@import "../../styles/variables.scss";
|
||||
@import "../../styles/user_badge.scss";
|
||||
|
||||
.no-trains {
|
||||
@@ -263,7 +240,7 @@ export default class TrainTable extends Vue {
|
||||
padding: 1rem;
|
||||
margin: 1rem 0;
|
||||
|
||||
background: #333;
|
||||
background: var(--clr-bg);
|
||||
}
|
||||
|
||||
.train {
|
||||
@@ -278,7 +255,7 @@ export default class TrainTable extends Vue {
|
||||
padding: 1em;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
background-color: $primaryCol;
|
||||
background-color: var(--clr-secondary);
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
@@ -291,6 +268,8 @@ export default class TrainTable extends Vue {
|
||||
grid-template-rows: repeat(3, minmax(100px, 1fr));
|
||||
|
||||
gap: 0.4em 0;
|
||||
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
@include bigScreen() {
|
||||
@@ -310,6 +289,8 @@ export default class TrainTable extends Vue {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
font-size: 1.1em;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
}
|
||||
@@ -317,11 +298,12 @@ export default class TrainTable extends Vue {
|
||||
.category-right {
|
||||
padding: 0.15em 0.5em;
|
||||
|
||||
background: #1085b3;
|
||||
background-color: var(--clr-accent);
|
||||
border-radius: 1em;
|
||||
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
img {
|
||||
vertical-align: middle;
|
||||
@@ -330,10 +312,10 @@ export default class TrainTable extends Vue {
|
||||
|
||||
.tooltip-text {
|
||||
font-size: 0.9em;
|
||||
background-color: #1085b3;
|
||||
background-color: var(--clr-accent);
|
||||
|
||||
&::after {
|
||||
border-color: #1085b3 transparent transparent transparent;
|
||||
border-color: var(--clr-accent) transparent transparent transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -343,27 +325,15 @@ export default class TrainTable extends Vue {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
font-size: 1.15em;
|
||||
margin: 5px 0;
|
||||
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
&-stops {
|
||||
margin-bottom: 10px;
|
||||
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
&-online {
|
||||
background-color: #ce0000;
|
||||
|
||||
padding: 0.2em 0.7em;
|
||||
font-size: 0.85em;
|
||||
|
||||
border-radius: 1em;
|
||||
|
||||
&.online {
|
||||
background-color: #009700;
|
||||
}
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
&-bottom {
|
||||
@@ -374,7 +344,6 @@ export default class TrainTable extends Vue {
|
||||
margin-left: 10px;
|
||||
border-radius: 0.7em;
|
||||
padding: 0.2em 0.5em;
|
||||
font-size: 0.85em;
|
||||
|
||||
border: 1px solid white;
|
||||
}
|
||||
@@ -390,13 +359,11 @@ export default class TrainTable extends Vue {
|
||||
&-name {
|
||||
margin: 0 0.3em;
|
||||
font-weight: bold;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
&-type {
|
||||
color: #bbb;
|
||||
margin-left: 0.5em;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
&-loco {
|
||||
@@ -440,7 +407,7 @@ export default class TrainTable extends Vue {
|
||||
text-align: center;
|
||||
|
||||
p {
|
||||
color: #00cff3;
|
||||
color: var(--clr-accent);
|
||||
}
|
||||
|
||||
& > span {
|
||||
@@ -462,14 +429,13 @@ export default class TrainTable extends Vue {
|
||||
color: black;
|
||||
|
||||
font-weight: bold;
|
||||
font-size: 0.85em;
|
||||
|
||||
&.twr {
|
||||
background: $twr;
|
||||
background: var(--clr-twr);
|
||||
}
|
||||
|
||||
&.skr {
|
||||
background: $twr;
|
||||
background: var(--clr-skr);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user