diff --git a/src/App.vue b/src/App.vue index 10d9eec..64e05b4 100644 --- a/src/App.vue +++ b/src/App.vue @@ -82,7 +82,7 @@ - - - + + + + + + diff --git a/src/components/JournalView/JournalTimetables.vue b/src/components/JournalView/JournalTimetables.vue index 7db6db8..ec37ebb 100644 --- a/src/components/JournalView/JournalTimetables.vue +++ b/src/components/JournalView/JournalTimetables.vue @@ -1,439 +1,439 @@ - - - - - + + + + + diff --git a/src/mixins/modalTrainMixin.ts b/src/mixins/modalTrainMixin.ts index 92505d2..c6a44ed 100644 --- a/src/mixins/modalTrainMixin.ts +++ b/src/mixins/modalTrainMixin.ts @@ -17,10 +17,15 @@ export default defineComponent({ methods: { selectModalTrain(trainId: string) { this.store.chosenModalTrainId = trainId; + document.body.classList.add('no-scroll'); }, closeModal() { this.store.chosenModalTrainId = undefined; + + setTimeout(() => { + document.body.classList.remove('no-scroll'); + }, 150); }, }, }); diff --git a/src/mixins/returnBtnMixin.ts b/src/mixins/returnBtnMixin.ts index d9bf591..e47f459 100644 --- a/src/mixins/returnBtnMixin.ts +++ b/src/mixins/returnBtnMixin.ts @@ -1,34 +1,34 @@ -import { defineComponent, h } from 'vue'; -import imageMixin from './imageMixin'; - -export default defineComponent({ - mixins: [imageMixin], - - data() { - return { - icons: { - arrow: this.getIcon('arrow-asc'), - }, - - showReturnButton: false, - }; - }, - - methods: { - scrollToTop() { - window.scrollTo({ top: 0 }); - }, - - handleScroll() { - this.showReturnButton = window.scrollY > window.innerHeight * 0.35; - }, - }, - - activated() { - window.addEventListener('scroll', this.handleScroll); - }, - - deactivated() { - window.removeEventListener('scroll', this.handleScroll); - }, -}); +import { defineComponent, h } from 'vue'; +import imageMixin from './imageMixin'; + +export default defineComponent({ + mixins: [imageMixin], + + data() { + return { + icons: { + arrow: this.getIcon('arrow-asc'), + }, + + showReturnButton: false, + }; + }, + + methods: { + scrollToTop() { + window.scrollTo({ top: 0 }); + }, + + handleScroll() { + this.showReturnButton = window.scrollY > window.innerHeight * 0.35; + }, + }, + + activated() { + window.addEventListener('wheel', this.handleScroll); + }, + + deactivated() { + window.removeEventListener('wheel', this.handleScroll); + }, +}); diff --git a/src/store/store.ts b/src/store/store.ts index 2831dea..65c2c27 100644 --- a/src/store/store.ts +++ b/src/store/store.ts @@ -51,6 +51,7 @@ export const useStore = defineStore('store', { trains: DataStatus.Loading, }, + blockScroll: false, listenerLaunched: false, } as StoreState), @@ -395,4 +396,3 @@ export const useStore = defineStore('store', { }, }, }); - diff --git a/src/store/storeTypes.ts b/src/store/storeTypes.ts index 40007fa..1c9c321 100644 --- a/src/store/storeTypes.ts +++ b/src/store/storeTypes.ts @@ -1,71 +1,72 @@ - -import { Socket } from 'socket.io-client'; -import { DataStatus } from '../scripts/enums/DataStatus'; -import { DispatcherStatsAPIData } from '../scripts/interfaces/api/DispatcherStatsAPIData'; -import { DriverStatsAPIData } from '../scripts/interfaces/api/DriverStatsAPIData'; -import StationAPIData from '../scripts/interfaces/api/StationAPIData'; -import TrainAPIData from '../scripts/interfaces/api/TrainAPIData'; -import Station from '../scripts/interfaces/Station'; -import Train from '../scripts/interfaces/Train'; - -export type Availability = 'default' | 'unavailable' | 'nonPublic' | 'abandoned' | 'nonDefault'; - -export interface StoreState { - stationList: Station[]; - trainList: Train[]; - apiData: APIData; - - lastDispatcherStatuses: { hash: string; statusTimestamp: number; statusID: string }[]; - - sceneryData: any[][]; - - region: { id: string; value: string }; - trainCount: number; - stationCount: number; - - webSocket?: Socket; - - dispatcherStatsName: string; - dispatcherStatsData?: DispatcherStatsAPIData; - - driverStatsName: string; - driverStatsData?: DriverStatsAPIData; - - chosenModalTrainId?: string; - - dataStatuses: { - connection: DataStatus; - sceneries: DataStatus; - timetables: DataStatus; - dispatchers: DataStatus; - trains: DataStatus; - }; - - listenerLaunched: boolean; -} - -export interface APIData { - stations?: StationAPIData[]; - dispatchers?: string[][]; - trains?: TrainAPIData[]; -} - -export interface StationJSONData { - name: string; - url: string; - lines: string; - project: string; - - reqLevel: number; - - signalType: string; - controlType: string; - - SUP: boolean; - - routes: string; - checkpoints: string | null; - authors?: string; - - availability: Availability; -} + +import { Socket } from 'socket.io-client'; +import { DataStatus } from '../scripts/enums/DataStatus'; +import { DispatcherStatsAPIData } from '../scripts/interfaces/api/DispatcherStatsAPIData'; +import { DriverStatsAPIData } from '../scripts/interfaces/api/DriverStatsAPIData'; +import StationAPIData from '../scripts/interfaces/api/StationAPIData'; +import TrainAPIData from '../scripts/interfaces/api/TrainAPIData'; +import Station from '../scripts/interfaces/Station'; +import Train from '../scripts/interfaces/Train'; + +export type Availability = 'default' | 'unavailable' | 'nonPublic' | 'abandoned' | 'nonDefault'; + +export interface StoreState { + stationList: Station[]; + trainList: Train[]; + apiData: APIData; + + lastDispatcherStatuses: { hash: string; statusTimestamp: number; statusID: string }[]; + + sceneryData: any[][]; + + region: { id: string; value: string }; + trainCount: number; + stationCount: number; + + webSocket?: Socket; + + dispatcherStatsName: string; + dispatcherStatsData?: DispatcherStatsAPIData; + + driverStatsName: string; + driverStatsData?: DriverStatsAPIData; + + chosenModalTrainId?: string; + + dataStatuses: { + connection: DataStatus; + sceneries: DataStatus; + timetables: DataStatus; + dispatchers: DataStatus; + trains: DataStatus; + }; + + listenerLaunched: boolean; + blockScroll: boolean; +} + +export interface APIData { + stations?: StationAPIData[]; + dispatchers?: string[][]; + trains?: TrainAPIData[]; +} + +export interface StationJSONData { + name: string; + url: string; + lines: string; + project: string; + + reqLevel: number; + + signalType: string; + controlType: string; + + SUP: boolean; + + routes: string; + checkpoints: string | null; + authors?: string; + + availability: Availability; +} diff --git a/src/styles/global.scss b/src/styles/global.scss index 5186acd..c46e3c9 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -25,6 +25,15 @@ body { padding: 0; font-family: 'Quicksand', sans-serif; overflow-y: scroll; + + &.no-scroll { + overflow-y: hidden; + padding-right: 17px; + + @include smallScreen() { + padding: 0; + } + } } *:focus-visible { @@ -37,16 +46,15 @@ body { } ::-webkit-scrollbar { - width: 0.5rem; - height: 0.5rem; + width: 17px; + height: 17px; &-track { - background: #222; + background-color: #222; } &-thumb { - border-radius: 1rem; - background: #777; + background-color: #777; } }