diff --git a/src/components/Global/ActionButton.vue b/src/components/Global/ActionButton.vue index f744817..e8f582b 100644 --- a/src/components/Global/ActionButton.vue +++ b/src/components/Global/ActionButton.vue @@ -60,6 +60,7 @@ export default defineComponent({}); .button_content { display: flex; + justify-content: center; align-items: center; } \ No newline at end of file diff --git a/src/components/JournalView/JournalOptions.vue b/src/components/JournalView/JournalOptions.vue index 71bf91f..3693277 100644 --- a/src/components/JournalView/JournalOptions.vue +++ b/src/components/JournalView/JournalOptions.vue @@ -106,62 +106,34 @@ export default defineComponent({ diff --git a/src/components/SceneryView/SceneryTimetable.vue b/src/components/SceneryView/SceneryTimetable.vue index 3306fc1..d88688d 100644 --- a/src/components/SceneryView/SceneryTimetable.vue +++ b/src/components/SceneryView/SceneryTimetable.vue @@ -323,12 +323,6 @@ h3.timetable-header { cursor: pointer; z-index: 10; - @include smallScreen() { - display: flex; - flex-direction: column; - align-items: center; - } - &.loading, &.empty { padding: 1rem; @@ -349,22 +343,12 @@ h3.timetable-header { justify-content: space-between; text-align: left; - - @include smallScreen() { - width: 100%; - } } &-schedule { display: grid; grid-template-columns: repeat(auto-fit, minmax(30px, 1fr)); font-size: 1.15em; - - @include smallScreen() { - width: 100%; - margin: 0.5em 0; - font-size: 1.2em; - } } } @@ -496,4 +480,25 @@ h3.timetable-header { .departure-time.terminates { font-size: 0.85em; } + +@include smallScreen() { + .timetable { + &-item { + display: flex; + flex-direction: column; + align-items: center; + + font-size: 1.2em; + } + + &-general { + width: 100%; + } + + &-schedule { + width: 100%; + margin: 0.5em 0; + } + } +} diff --git a/src/components/StationsView/StationFilterCard.vue b/src/components/StationsView/StationFilterCard.vue index 1db89c2..f0afead 100644 --- a/src/components/StationsView/StationFilterCard.vue +++ b/src/components/StationsView/StationFilterCard.vue @@ -168,6 +168,9 @@ export default defineComponent({ handleChangeRegion() { this.$store.commit(MUTATIONS.SET_REGION, this.currentRegion); + console.log(this.currentRegion); + + this.closeCard(); }, diff --git a/src/components/StationsView/StationTable.vue b/src/components/StationsView/StationTable.vue index 63f042b..78569c3 100644 --- a/src/components/StationsView/StationTable.vue +++ b/src/components/StationsView/StationTable.vue @@ -12,7 +12,7 @@ class="sort-icon" v-if="sorterActive.index == i" :src="sorterActive.dir == 1 ? ascIcon : descIcon" - alt + alt="sort icon" /> @@ -25,7 +25,7 @@ class="sort-icon" v-if="sorterActive.index == i + 7" :src="sorterActive.dir == 1 ? ascIcon : descIcon" - alt + alt="sort icon" /> diff --git a/src/components/TrainsView/TrainOptions.vue b/src/components/TrainsView/TrainOptions.vue index 890ad04..8e1ec52 100644 --- a/src/components/TrainsView/TrainOptions.vue +++ b/src/components/TrainsView/TrainOptions.vue @@ -2,23 +2,27 @@
- - - @@ -145,28 +149,19 @@ export default defineComponent({ .options { &_wrapper { display: flex; - flex-wrap: wrap; - - @include smallScreen() { - padding: 0 1em; - - justify-content: center; - } } &_content { display: flex; - align-items: center; flex-wrap: wrap; - & > * { - margin-right: 0.25em; - margin-top: 0.25em; - } + .content_search, + .content_select { + display: flex; + align-items: center; + flex-wrap: wrap; - @include smallScreen() { - margin: 0 auto; - justify-content: center; + padding: 0.25em 0.25em 0 0; } } } @@ -178,11 +173,7 @@ export default defineComponent({ background: #333; border-radius: 0.5em; min-width: 200px; - - - @include smallScreen() { - flex-grow: 2; - } + margin-right: 0.25em; } &-input { @@ -203,7 +194,6 @@ export default defineComponent({ width: 1em; } } - .filters { display: flex; flex-wrap: wrap; @@ -232,4 +222,46 @@ export default defineComponent({ color: salmon; } } + +@include smallScreen() { + .journal-options { + width: 100%; + } + .options { + &_wrapper { + justify-content: center; + } + + &_content { + padding: 0 1em; + + flex-direction: column; + + .content_select { + margin: 0 auto; + padding: 0; + } + + .content_search { + justify-content: center; + } + } + } + + .search { + &-box, + &-button { + margin: 0.5em 0 0 0; + } + + &-box { + width: 100%; + } + + &-button { + width: 80%; + max-width: 300px; + } + } +} diff --git a/src/views/StationsView.vue b/src/views/StationsView.vue index eb9e77d..65dcf91 100644 --- a/src/views/StationsView.vue +++ b/src/views/StationsView.vue @@ -37,7 +37,6 @@ import FilterCard from '@/components/StationsView/StationFilterCard.vue'; import SelectBox from '@/components/Global/SelectBox.vue'; import { StoreData } from '@/scripts/interfaces/StoreData'; -import { DataStatus } from '@/scripts/enums/DataStatus'; import { computed, ComputedRef, defineComponent, reactive } from 'vue'; import { useStore } from '@/store'; import { GETTERS } from '@/constants/storeConstants';