From a04d23a52fc5f0fc1f585f2a9f984f8cdf398789 Mon Sep 17 00:00:00 2001 From: Spythere Date: Thu, 13 Jan 2022 20:08:06 +0100 Subject: [PATCH] =?UTF-8?q?Przywr=C3=B3cono=20uwagi=20eksplatacyjne?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/icon-warning.svg | 6 +- src/components/TrainsView/TrainSchedule.vue | 143 +++++++++++--------- src/components/TrainsView/TrainTable.vue | 7 +- src/store/index.ts | 2 +- src/styles/global.scss | 9 +- 5 files changed, 89 insertions(+), 78 deletions(-) diff --git a/src/assets/icon-warning.svg b/src/assets/icon-warning.svg index 67ff397..d83e557 100644 --- a/src/assets/icon-warning.svg +++ b/src/assets/icon-warning.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/src/components/TrainsView/TrainSchedule.vue b/src/components/TrainsView/TrainSchedule.vue index e28491c..ec2554d 100644 --- a/src/components/TrainsView/TrainSchedule.vue +++ b/src/components/TrainsView/TrainSchedule.vue @@ -16,8 +16,12 @@ - - + + + + + + @@ -65,7 +69,6 @@ -
@@ -87,7 +90,7 @@ @@ -181,9 +184,13 @@ $stopNameClr: #22a8d1; .train-schedule { max-height: 600px; - margin-top: 2em; + + padding-top: 1em; + margin-top: 1em; overflow-y: auto; + + z-index: 5; } .schedule-wrapper { @@ -203,6 +210,66 @@ $stopNameClr: #22a8d1; background-color: $barClr; } +.stop-name { + background: $stopNameClr; + padding: 0.3em 0.5em; + + display: flex; + align-items: center; + + .g-tooltip > .content { + font-size: 0.9em; + } + + img { + width: 1em; + margin-left: 0.5em; + } +} + +.stop-date { + display: flex; + align-items: center; + + .date { + background: $dateClr; + padding: 0.3em 0.5em; + } + + .stop { + &.ph, + &.ph-pm, + &.pm { + background: $stopExchangeClr; + } + + background: $stopDefaultClr; + } + + .arrival, + .departure { + &.delayed { + s { + color: #999; + } + + span { + color: $delayedClr; + } + } + + &.preponed { + s { + color: #999; + } + + span { + color: $preponedClr; + } + } + } +} + ul.stop_list > li.stop { position: relative; @@ -347,61 +414,5 @@ ul.stop_list > li.stop { border: 3px solid $barClr; border-radius: 100%; } - - .stop-name { - background: $stopNameClr; - padding: 0.3em 0.5em; - - display: flex; - align-items: center; - - img { - width: 1em; - margin-left: 0.5em; - } - } - - .stop-date { - display: flex; - align-items: center; - - .date { - background: $dateClr; - padding: 0.3em 0.5em; - } - - .stop { - &.ph, - &.ph-pm, - &.pm { - background: $stopExchangeClr; - } - - background: $stopDefaultClr; - } - - .arrival, - .departure { - &.delayed { - s { - color: #999; - } - - span { - color: $delayedClr; - } - } - - &.preponed { - s { - color: #999; - } - - span { - color: $preponedClr; - } - } - } - } } diff --git a/src/components/TrainsView/TrainTable.vue b/src/components/TrainsView/TrainTable.vue index 402c943..fd8b13e 100644 --- a/src/components/TrainsView/TrainTable.vue +++ b/src/components/TrainsView/TrainTable.vue @@ -101,7 +101,7 @@ {{ train.locoType }}
- +
@@ -300,7 +300,7 @@ export default defineComponent({ behavior: 'smooth', block: 'center', }); - }, 150); + }, 200); }, onImageError(e: Event) { @@ -433,6 +433,7 @@ img.train-image { .info { display: flex; flex-direction: column; + justify-content: space-between; & .timetable { &_hero { @@ -493,7 +494,7 @@ img.train-image { &_comments { img { - width: 2em; + width: 1.75em; } } } diff --git a/src/store/index.ts b/src/store/index.ts index 7392cf7..4dd7ac3 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -475,7 +475,7 @@ export const store = createStore({ }); state.trainList = state.trainList.reduce((acc, train) => { - const timetableData = timetableList.find(data => data && data.trainNo === train.trainNo); + const timetableData = timetableList.find(data => data && data.trainNo === train.trainNo && data.driverId === train.driverId); const trainStopData = state.stationList .find(station => station.name === train.currentStationName) diff --git a/src/styles/global.scss b/src/styles/global.scss index fcaf417..6cff5f6 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -50,7 +50,7 @@ body { .g-tooltip { position: relative; - z-index: 10; + z-index: 100; .content { position: absolute; @@ -59,13 +59,12 @@ body { transform: translate(-50%, -120%); - z-index: 10; visibility: hidden; opacity: 0; - min-width: 150px; + min-width: 250px; - background-color: var(--clr-accent); + background-color: gray; text-align: center; padding: 0.15em; @@ -81,7 +80,7 @@ body { margin-left: -5px; border-width: 5px; border-style: solid; - border-color: var(--clr-accent) transparent transparent transparent; + border-color: gray transparent transparent transparent; } @include smallScreen() {