diff --git a/src/App.vue b/src/App.vue index 8d26eab..3340320 100644 --- a/src/App.vue +++ b/src/App.vue @@ -98,7 +98,7 @@ export default class App extends Vue { @Action("synchronizeData") synchronizeData; @Getter("getAllData") data; - private VERSION = "1.4.4"; + private VERSION = "1.4.5"; hasReleaseNotes = false; updateModalVisible = false; @@ -187,10 +187,7 @@ export default class App extends Vue { // VUE ROUTE CHANGE ANIMATION .view-anim { - &-enter { - opacity: 0.02; - } - + &-enter, &-leave-to { opacity: 0.02; } diff --git a/src/assets/icon-stats.svg b/src/assets/icon-stats.svg new file mode 100644 index 0000000..1f37487 --- /dev/null +++ b/src/assets/icon-stats.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Global/ActionButton.vue b/src/components/Global/ActionButton.vue index 0077dbc..22fae5e 100644 --- a/src/components/Global/ActionButton.vue +++ b/src/components/Global/ActionButton.vue @@ -37,11 +37,11 @@ export default class ActionButton extends Vue {} border: 1px solid white; } - img.button_icon { + img { width: 1.25em; vertical-align: middle; - margin-right: 0.2em; + margin-right: 0.35em; } p { diff --git a/src/components/StationsView/FilterCard.vue b/src/components/StationsView/FilterCard.vue index d5e19e4..6feedfa 100644 --- a/src/components/StationsView/FilterCard.vue +++ b/src/components/StationsView/FilterCard.vue @@ -226,7 +226,7 @@ $saveCol: #28a826; cursor: pointer; - padding: 0.45em 0.4em; + padding: 0.3em 0.4em; display: inline-block; position: relative; diff --git a/src/components/TrainsView/TrainStats.vue b/src/components/TrainsView/TrainStats.vue index 5f718eb..2c1af6d 100644 --- a/src/components/TrainsView/TrainStats.vue +++ b/src/components/TrainsView/TrainStats.vue @@ -2,7 +2,10 @@
-

{{ $t("trains.stats") }}

+

+ + {{ $t("trains.stats") }} +

@@ -80,6 +83,8 @@ export default class TrainStats extends Vue { @Prop() readonly trains!: Train[]; @Prop() readonly trainStatsOpen!: boolean; + statsIcon = require("@/assets/icon-stats.svg"); + get speedStats(): { avg: string; min: string; max: string } { if (this.trains.length == 0) return { avg: "0", min: "0", max: "0" }; @@ -213,7 +218,13 @@ export default class TrainStats extends Vue { } &-header { + display: flex; margin-bottom: 0.85em; + + img { + vertical-align: middle; + margin-right: 0.35em; + } } &-body { diff --git a/src/components/TrainsView/TrainTable.vue b/src/components/TrainsView/TrainTable.vue index c3da3b1..7585cf8 100644 --- a/src/components/TrainsView/TrainTable.vue +++ b/src/components/TrainsView/TrainTable.vue @@ -10,6 +10,7 @@ v-for="(train, i) in computedTrains" :key="i" :id="train.timetableData.timetableId" + :ref="train.timetableData.timetableId" > @@ -193,8 +194,18 @@ export default class TrainTable extends Vue { signalIcon: string = require("@/assets/icon-signal.svg"); routeIcon: string = require("@/assets/icon-route.svg"); + focusOnTrain(timetableId: number) { + const currentEl: HTMLElement = this.$refs[timetableId][0]; + + currentEl.scrollIntoView({ + behavior: "smooth", + block: "nearest", + }); + } + changeScheduleShowState(timetableId: number) { this.showedSchedule = this.showedSchedule === timetableId ? 0 : timetableId; + this.$nextTick(() => this.focusOnTrain(timetableId)); } onImageError(e: Event) { @@ -365,7 +376,7 @@ export default class TrainTable extends Vue { flex-direction: column; justify-content: space-around; - font-size: 0.85em; + font-size: 0.9em; // grid-column: 1 / 3; // grid-column: span 2; diff --git a/src/styles/variables.scss b/src/styles/variables.scss index f2baddf..20a56e8 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -13,5 +13,5 @@ $accent2Col: #ff3d5d; $skr: #ff5100; $twr: #ffbb00; -$animDuration: 100ms; -$animType: ease-out; \ No newline at end of file +$animDuration: 150ms; +$animType: ease-in-out; \ No newline at end of file diff --git a/src/views/StationsView.vue b/src/views/StationsView.vue index 632d113..bcd5a76 100644 --- a/src/views/StationsView.vue +++ b/src/views/StationsView.vue @@ -205,12 +205,12 @@ export default class StationsView extends Vue { .card-anim { &-enter-active, &-leave-active { - transition: all 0.25s ease-in-out; + transition: all $animDuration $animType; } &-enter, &-leave-to { - transform: translate(-45%, -50%); + transform: translate(-50%, -50%) scale(0.85); opacity: 0; } } diff --git a/src/views/TrainsView.vue b/src/views/TrainsView.vue index 90336e3..e01c720 100644 --- a/src/views/TrainsView.vue +++ b/src/views/TrainsView.vue @@ -12,6 +12,7 @@
+ {{ $t("trains.stats") }} @@ -60,6 +61,8 @@ export default class TrainsView extends Vue { // Passed in route as query parameters @Prop() readonly queryTrain!: string; + statsIcon = require("@/assets/icon-stats.svg"); + sorterActive: { id: string; dir: number } = { id: "distance", dir: -1 }; trainStatsOpen: boolean = false;