diff --git a/src/components/SceneryView/SceneryTimetable.vue b/src/components/SceneryView/SceneryTimetable.vue index c8c9c45..96f7cb9 100644 --- a/src/components/SceneryView/SceneryTimetable.vue +++ b/src/components/SceneryView/SceneryTimetable.vue @@ -16,17 +16,19 @@ -
- +
+
{{ @@ -207,8 +209,8 @@ export default defineComponent({ this.selectedCheckpoint = this.stationInfo.checkpoints[0].checkpointName; }, - selectCheckpoint(item: { id: number | string; value: string }) { - this.selectedCheckpoint = item.value; + selectCheckpoint(cp: { checkpointName: string }) { + this.selectedCheckpoint = cp.checkpointName; }, }, @@ -408,8 +410,21 @@ h3 { display: flex; justify-content: center; - & > div { - border: 1px solid white; + flex-wrap: wrap; + + font-size: 1.2em; + + > .checkpoint_item { + &.current { + font-weight: bold; + color: $accentCol; + } + + &:not(:last-child)::after { + margin: 0 0.5em; + content: "•"; + color: white; + } } } diff --git a/src/store/index.ts b/src/store/index.ts index 905f790..1e463bf 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -334,7 +334,6 @@ export const store = createStore({ statusTimeString: "", stationTrains: [], scheduledTrains: [], - checkpoints: null }); return acc; diff --git a/src/styles/global.scss b/src/styles/global.scss index 6266360..e439316 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -198,4 +198,21 @@ ul { &--grayed { color: #ccc; } +} + +.btn { + &--text { + background: none; + color: white; + font-size: 1em; + + cursor: pointer; + + transition: color 0.3s; + + + &:hover, &:focus { + color: $accentCol; + } + } } \ No newline at end of file