From 5d32145f132ccf08e82372c89a557d93b0ccccb7 Mon Sep 17 00:00:00 2001 From: Spythere Date: Thu, 18 Dec 2025 00:39:17 +0100 Subject: [PATCH] refactor(app): styles cleanup; minor code improvements --- public/images/icon-heart.svg | 13 -- src/components/StationsView/StationTable.vue | 137 +++++++++---------- src/store/mainStore.ts | 6 +- src/styles/_global.scss | 22 ++- src/styles/_icons.scss | 6 - src/styles/_search-box.scss | 6 +- src/typings/common.ts | 2 - 7 files changed, 93 insertions(+), 99 deletions(-) delete mode 100644 public/images/icon-heart.svg diff --git a/public/images/icon-heart.svg b/public/images/icon-heart.svg deleted file mode 100644 index 12687e7..0000000 --- a/public/images/icon-heart.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - diff --git a/src/components/StationsView/StationTable.vue b/src/components/StationsView/StationTable.vue index 34177b5..3109b8f 100644 --- a/src/components/StationsView/StationTable.vue +++ b/src/components/StationsView/StationTable.vue @@ -14,7 +14,7 @@ class="header-text" :class="headerName" > - +
sort icon - +
- {{ @@ -314,7 +314,7 @@ > {{ station.onlineInfo?.scheduledTrainCount.confirmed ?? '-' }} - + @@ -364,7 +364,7 @@ export default defineComponent({ const filters = inject('StationsView_filters') as Record; const activeSorter = inject('StationsView_activeSorter') as ActiveSorter; - + const filteredStationList = computed(() => mainStore.allStationInfo .filter((station) => filterStations(station, filters)) @@ -384,15 +384,13 @@ export default defineComponent({ methods: { getSceneryRoute(station: Station) { - // TODO: Hide tooltips when navigating away - - return { + this.$router.push({ name: 'SceneryView', query: { station: station.name, region: this.$route.query.region || undefined } - }; + }); }, openDonationCard(e: Event) { @@ -459,78 +457,78 @@ table { width: 100%; min-width: 1250px; white-space: wrap; +} - thead { - position: sticky; - top: 0; +thead { + position: sticky; + top: 0; + z-index: 50; +} + +thead tr { + background-color: var(--clr-bg3); +} + +thead th { + background-color: var(--clr-bg3); + white-space: pre-wrap; + padding: 0.5em 0.25em; + + cursor: pointer; + user-select: none; + -moz-user-select: none; + -webkit-user-select: none; + + &.station { + width: 12em; } - thead tr { - background-color: var(--clr-bg3); + &.min-lvl { + width: 4em; } - thead th { - &.station { - width: 12em; - } + &.status { + width: 10em; + } - &.min-lvl { - width: 4em; - } + &.dispatcher { + width: 12em; + } - &.status { - width: 10em; - } + &.dispatcher-lvl { + width: 6em; + } - &.dispatcher { - width: 12em; - } + &.routes-double, + &.routes-single { + width: 7em; + } - &.dispatcher-lvl { - width: 6em; - } + &.general { + width: 11em; + } - &.routes-double, - &.routes-single { - width: 7em; - } + &.header-image { + width: 3.5em; - &.general { - width: 11em; - } - - &.header-image { - width: 3.5em; - - &.user { - width: 5em; - } - } - - padding: 0.5em 0.25em; - background-color: var(--clr-bg3); - white-space: pre-wrap; - - cursor: pointer; - user-select: none; - -moz-user-select: none; - -webkit-user-select: none; - - span { - display: flex; - align-items: center; - justify-content: center; - - img { - width: 1.5em; - vertical-align: middle; - } + &.user { + width: 5em; } } } -tr, -.a-row { +thead th .header_wrapper { + display: flex; + align-items: center; + justify-content: center; + + img { + width: 1.5em; + vertical-align: middle; + } +} + +tbody tr { background-color: $rowCol; vertical-align: middle; @@ -550,6 +548,7 @@ tr, cursor: pointer; overflow: hidden; text-overflow: ellipsis; + height: 2.5em; &.inactive { opacity: 0.2; diff --git a/src/store/mainStore.ts b/src/store/mainStore.ts index 1746887..5d62f5a 100644 --- a/src/store/mainStore.ts +++ b/src/store/mainStore.ts @@ -38,7 +38,8 @@ export const useMainStore = defineStore('mainStore', { modalLastClickedTarget: null, currentLocale: 'pl', - isMigrateInfoCardOpen: false + isMigrateInfoCardOpen: false, + pinnedStationNames: [] }) as MainStoreState, actions: { @@ -431,7 +432,6 @@ export const useMainStore = defineStore('mainStore', { return { name: scenery.name, - generalInfo: { ...scenery, authors: scenery.authors?.split(',').map((a) => a.trim()), @@ -446,7 +446,7 @@ export const useMainStore = defineStore('mainStore', { }, allStationInfo(): Station[] { - const onlineUnsavedStations = this.activeSceneryList + const onlineUnsavedStations: Station[] = this.activeSceneryList .filter( (scenery) => this.stationList.findIndex((st) => st.name == scenery.name) == -1 && diff --git a/src/styles/_global.scss b/src/styles/_global.scss index deca414..b24ed4d 100644 --- a/src/styles/_global.scss +++ b/src/styles/_global.scss @@ -89,7 +89,8 @@ select { font-size: 1em; } -input, select { +input, +select { background: none; color: white; font-size: 1em; @@ -358,3 +359,22 @@ a.a-button { background-color: #aaa; margin: 0.5em 0; } + +.g-checkbox { + position: relative; + display: inline-block; + + user-select: none; + -webkit-user-select: none; + -moz-user-select: none; + + display: flex; + justify-content: center; + align-items: center; + + input { + position: absolute; + width: 1px; + height: 1px; + } +} diff --git a/src/styles/_icons.scss b/src/styles/_icons.scss index 1083d9b..58b48d7 100644 --- a/src/styles/_icons.scss +++ b/src/styles/_icons.scss @@ -39,9 +39,3 @@ color: #aefff8; } } - -.icon-heart { - -webkit-mask: url(images/icon-heart.svg) no-repeat center; - mask: url(images/icon-heart.svg) no-repeat center; - mask-size: 1em; -} diff --git a/src/styles/_search-box.scss b/src/styles/_search-box.scss index 12991f0..59f5df9 100644 --- a/src/styles/_search-box.scss +++ b/src/styles/_search-box.scss @@ -61,8 +61,4 @@ top: 50%; transform: translateY(-50%); padding-right: 0.5em; -} - -select.search-input { - -} +} \ No newline at end of file diff --git a/src/typings/common.ts b/src/typings/common.ts index 1c8deeb..331f88b 100644 --- a/src/typings/common.ts +++ b/src/typings/common.ts @@ -95,9 +95,7 @@ export interface TrainTimetableData { export interface Station { name: string; - generalInfo?: StationGeneralInfo; - onlineInfo?: ActiveScenery; }