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 w działaniu, zmiany estetyczne

Browse Source
This commit is contained in:
Spythere
2020-09-12 22:05:49 +02:00
parent aaccf162d9
commit 1c329d9ea9
5 changed files with 106 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/TrainsView/TrainStats.vue
+78 -54
View File
@@ -11,41 +11,47 @@
<transition name="stats-anim">
<div class="stats-body" v-if="statsOpen">
<h2 class="stats-header">STATYSTYKI RUCHU</h2>
<div class="stats-speed">
<div class="title">PRĘDKOŚCI POCIĄGÓW (MIN | ŚR | MAX) [km/h]</div>
<div class="content">{{speedStats.min}} | {{speedStats.avg}} | {{speedStats.max}}</div>
<div class="title stats-title">PRĘDKOŚCI POCIĄGÓW (MIN | ŚR | MAX) [km/h]</div>
<div class="stats-content">{{speedStats.min}} | {{speedStats.avg}} | {{speedStats.max}}</div>
</div>
<div class="stats-length">
<div class="title">DŁUGOŚCI ROZKŁADÓW (MIN | ŚR | MAX) [km]</div>
<div class="title stats-title">DŁUGOŚCI ROZKŁADÓW (MIN | ŚR | MAX) [km]</div>
<div
class="content"
class="stats-content"
>{{timetableStats.min}} | {{timetableStats.avg}} | {{timetableStats.max}}</div>
</div>
<div class="stats-categories">
<div class="title">KATEGORIE RJ</div>
<div class="title stats-title">KATEGORIE RJ</div>
<div class="category-list">
<span class="category" v-for="[key, value] of categoryList" :key="key">
<span class="category-type">{{key}}</span>
<span class="category-count">{{value}}</span>
</span>
</div>
<div class="warning twr">
Wysokiego ryzyka
[{{specialTrainCount[0]}}]
</div>
<div class="warning skr">
Przekroczona skrajnia
[{{specialTrainCount[1]}}]
<div class="special-list">
<span class="special twr">
<span class="special-type">WYSOKIEGO RYZYKA</span>
<span class="special-count">{{specialTrainCount[0]}}</span>
</span>
<span class="special skr">
<span class="special-type">PRZEKROCZONA SKRAJNIA</span>
<span class="special-count">{{specialTrainCount[1]}}</span>
</span>
</div>
</div>
<div class="stats-locos">
<div class="title">NAJCZĘSTSZE JEDNOSTKI</div>
<div class="loco-list content">
<div class="loco" v-for="(loco,i) in locoList" :key="i">{{loco[0]}} | {{loco[1]}}</div>
<div class="title stats-title">NAJCZĘSTSZE JEDNOSTKI</div>
<div class="loco-list stats-content">
<div class="loco-item" v-for="(loco,i) in locoList" :key="i">{{loco[0]}} | {{loco[1]}}</div>
</div>
</div>
</div>
@@ -161,6 +167,7 @@ export default class TrainStats extends Vue {
<style lang="scss" scoped>
@import "../../styles/responsive";
@import "../../styles/variables";
.stats-anim {
&-enter-active,
@@ -182,38 +189,40 @@ export default class TrainStats extends Vue {
position: relative;
}
.button {
font-size: 1em;
padding: 0.5em;
.stats {
&-btn {
font-size: 1em;
padding: 0.5em;
}
&-header {
margin-bottom: 1rem;
}
&-body {
position: absolute;
display: inline-block;
max-width: 700px;
background: rgba(black, 0.85);
border-radius: 0 1em 1em 1em;
padding: 1rem;
}
&-content {
font-size: 1.1em;
color: #ddd;
}
}
.content {
font-size: 1.1em;
color: #ddd;
}
.stats-header {
margin-bottom: 1rem;
}
.stats-body {
position: absolute;
display: inline-block;
max-width: 700px;
background: rgba(black, 0.85);
border-radius: 0 1em 1em 1em;
padding: 1rem;
}
.category-list {
display: flex;
flex-wrap: wrap;
}
.category {
font-size: 0.9em;
.category,
.special {
&-list {
display: flex;
flex-wrap: wrap;
font-size: 0.85em;
}
margin-right: 0.4em;
margin-bottom: 0.4em;
@@ -234,6 +243,27 @@ export default class TrainStats extends Vue {
}
}
.special {
&-list {
font-size: 0.85em;
}
&-count {
background: gray;
color: white;
}
&.twr > &-type {
background-color: $twr;
color: black;
}
&.skr > &-type {
background-color: $skr;
color: white;
}
}
.warning {
display: inline-block;
margin-right: 0.4em;
@@ -248,30 +278,24 @@ export default class TrainStats extends Vue {
}
&.skr {
background-color: #ff4646;
background-color: #f00000;
}
}
.loco {
padding-bottom: 0.4em;
}
@include smallScreen {
.button {
font-size: 0.85rem;
}
.stats-body {
display: block;
font-size: 0.9em;
// position: fixed;
// top: 0;
// left: 0;
width: 100%;
// height: 100%;
border-radius: 0 0 1em 1em;
}
.btn-wrapper {
display: flex;
justify-content: center;
src/components/TrainsView/TrainTable.vue
+14 -7
View File
@@ -10,13 +10,15 @@
<span>
<strong>{{ train.timetableData.category }}</strong>
{{ train.trainNo }} |
<span
style=" color: gold;"
>{{ train.timetableData.routeDistance }} km</span>
</span>
<span style=" color: gold;">{{ train.timetableData.routeDistance }} km</span>
</div>
<div class="info-warnings">
<span class="warning twr" v-if="train.timetableData.TWR">TWR</span>
<span class="warning skr" v-if="train.timetableData.SKR">SKR</span>
<span>
<span class="warning twr" v-if="train.timetableData.TWR">TWR</span>
<span class="warning skr" v-if="train.timetableData.SKR">SKR</span>
</span>
</div>
<div class="info-route">
@@ -152,6 +154,7 @@ export default class TrainTable extends Vue {
<style lang="scss" scoped>
@import "../../styles/responsive.scss";
@import "../../styles/variables.scss";
.train-table {
font-size: calc(0.4rem + 0.5vw);
@@ -206,6 +209,9 @@ export default class TrainTable extends Vue {
&-category {
flex-grow: 2;
font-size: 1.05em;
display: flex;
justify-content: space-between;
}
&-route {
@@ -315,11 +321,12 @@ export default class TrainTable extends Vue {
font-size: 0.85em;
&.twr {
background-color: #ffc700;
background-color: $twr;
}
&.skr {
background-color: #ff4646;
background-color: $skr;
color: white;
}
}