diff --git a/src/components/SceneryView/SceneryTimetable.vue b/src/components/SceneryView/SceneryTimetable.vue index d6f838a..280f665 100644 --- a/src/components/SceneryView/SceneryTimetable.vue +++ b/src/components/SceneryView/SceneryTimetable.vue @@ -16,7 +16,7 @@ -
+ + + {{ $t("app.loading") @@ -141,8 +143,9 @@ import { Component, Vue, Prop } from "vue-property-decorator"; import Station from "@/scripts/interfaces/Station"; import ScheduledTrain from "@/scripts/interfaces/ScheduledTrain"; +import SelectBox from "../Global/SelectBox.vue"; -@Component +@Component({ components: { SelectBox } }) export default class SceneryTimetable extends Vue { @Prop() readonly stationInfo!: Station; @Prop() readonly timetableOnly!: boolean; diff --git a/src/components/TrainsView/TrainTable.vue b/src/components/TrainsView/TrainTable.vue index babcc3b..1822856 100644 --- a/src/components/TrainsView/TrainTable.vue +++ b/src/components/TrainsView/TrainTable.vue @@ -20,17 +20,13 @@ >
-
-
-
- - {{ train.trainNo }} | - - {{ $t("trains.no-timetable") }} - - -
-
+
+ + {{ train.trainNo }} | + + {{ $t("trains.no-timetable") }} + +
@@ -114,63 +110,58 @@ >
-
-
- - TWR + + + TWR + + + SKR + + + {{ train.timetableData.category }} + {{ train.trainNo }} | + + {{ train.timetableData.routeDistance }} km + + - - SKR - + + + SRJP - - {{ train.timetableData.category }} - {{ train.trainNo }} | - - - {{ train.timetableData.routeDistance }} km - - -
- -
asc-arrow - - SRJP - - - {{ $t("trains.detailed-timetable") }} {{ train.trainNo }} - -
-
- -
- - - {{ train.timetableData.route.replace("|", " - ") }} - -
-
- - {{ $t("trains.via-title") }} - - + + {{ $t("trains.detailed-timetable") }} {{ train.trainNo }} -
+ +
+ +
+ + + {{ train.timetableData.route.replace("|", " - ") }} + + +
+ +
+ + {{ $t("trains.via-title") }} + + +
@@ -263,9 +254,9 @@ import { Vue, Component, Prop } from "vue-property-decorator"; import Train from "@/scripts/interfaces/Train"; +import TrainStop from "@/scripts/interfaces/TrainStop"; import TrainSchedule from "@/components/TrainsView/TrainSchedule.vue"; -import TrainStop from "@/scripts/interfaces/TrainStop"; import { DataStatus } from "@/scripts/enums/DataStatus"; @Component({ @@ -309,8 +300,6 @@ export default class TrainTable extends Vue { this.$nextTick(() => { const currentEl: HTMLElement = this.$refs[elementId][0]; - console.log(currentEl); - currentEl.scrollIntoView({ behavior: "smooth", block: "nearest", @@ -370,7 +359,7 @@ export default class TrainTable extends Vue { &-list { @include smallScreen() { width: 100%; - overflow: hidden; + // overflow-x: hidden; } } @@ -386,7 +375,7 @@ export default class TrainTable extends Vue { .wrapper { display: grid; - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + grid-template-columns: repeat(auto-fit, minmax(20em, 1fr)); grid-template-rows: 1fr; @include smallScreen() { @@ -395,17 +384,18 @@ export default class TrainTable extends Vue { } .info { - display: flex; - flex-direction: column; - justify-content: space-between; - - &-top { + &-main { display: flex; justify-content: space-between; align-items: center; - div { + .info-srjp .activator { display: flex; + align-items: center; + + background-color: var(--clr-accent); + border-radius: 0.5em; + padding: 0.1em 0.35em; } } @@ -422,10 +412,6 @@ export default class TrainTable extends Vue { margin-bottom: 10px; font-size: 0.7em; - - @include smallScreen() { - font-size: 0.75em; - } } &-bottom { @@ -454,10 +440,11 @@ export default class TrainTable extends Vue { &-info { margin-bottom: 1em; + text-align: center; + word-wrap: break-word; } &-name { - margin: 0 0.3em; font-weight: bold; } diff --git a/src/styles/global.scss b/src/styles/global.scss index c55017f..942080b 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -30,43 +30,29 @@ body { } -.tooltip { +.g-tooltip { position: relative; - background-color: var(--clr-accent); - padding: .1em .5em; - border-radius: 1em; + z-index: 10; - - display: flex; - justify-content: center; - align-items: center; - - & > &-text { - display: inline-block; - width: 150px; - - - font-size: 0.9em; - - background-color: var(--clr-accent); - - padding: .15em .5em; - border-radius: 1em; - - display: inline-block; - max-width: 150px; - - text-align: center; - color: #fff; - + .content { position: absolute; - z-index: 1; + left: 50%; + top: 0; + + transform: translate(-50%, -120%); + + z-index: 10; visibility: hidden; opacity: 0; - left: 50%; - transform: translate(-50%, calc(-100% - 1rem)); + min-width: 150px; + + background-color: var(--clr-accent); + text-align: center; + + padding: 0.15em; + border-radius: .5em; transition: opacity 0.3s; @@ -80,12 +66,21 @@ body { border-style: solid; border-color: var(--clr-accent) transparent transparent transparent; } + + @include smallScreen() { + right: 0; + left: 0; + + &::after { + left: 75%; + } + } } - &:hover > &-text { - @include smallScreen() { - display: none; - } + &:hover > .content { + // @include smallScreen() { + // display: none; + // } visibility: visible; opacity: 1; diff --git a/src/views/SceneryView.vue b/src/views/SceneryView.vue index 91a9503..150ae5b 100644 --- a/src/views/SceneryView.vue +++ b/src/views/SceneryView.vue @@ -92,7 +92,7 @@ $sceneryBgCol: #333; display: inline-block; - font-size: 2em; + font-size: 1.5em; button { margin: 1em auto;