diff --git a/src/components/StationsView/StationTable.vue b/src/components/StationsView/StationTable.vue index def5b98..10f6603 100644 --- a/src/components/StationsView/StationTable.vue +++ b/src/components/StationsView/StationTable.vue @@ -9,6 +9,7 @@ :key="headerName" @click="changeSorter(headerName)" class="header-text" + :class="headerName" >
@@ -146,51 +147,49 @@
-
- - {{ station.generalInfo.routes.doubleElectrifiedNames.length }} - + + {{ station.generalInfo.routes.singleElectrifiedNames.length }} + - - {{ station.generalInfo.routes.doubleOtherNames.length }} - -
+ + {{ station.generalInfo.routes.singleOtherNames.length }} + +
+ -
+ +
+ + {{ station.generalInfo.routes.doubleElectrifiedNames.length }} + -
- - {{ station.generalInfo.routes.singleElectrifiedNames.length }} - - - - {{ station.generalInfo.routes.singleOtherNames.length }} - -
+ + {{ station.generalInfo.routes.doubleOtherNames.length }} +
@@ -360,7 +359,7 @@ export default defineComponent({ }, changeSorter(headerName: HeadIdsTypes) { - if (headerName == 'general' || headerName == 'routes') return; + if (headerName == 'general') return; this.stationFiltersStore.changeSorter(headerName); } @@ -405,7 +404,10 @@ $rowCol: #424242; table { border-collapse: collapse; + table-layout: fixed; width: 100%; + min-width: 1200px; + white-space: wrap; @include smallScreen() { min-width: auto; @@ -419,16 +421,41 @@ table { position: sticky; top: 0; - &.header-text { - min-width: 10em; + &.station { + width: 200px; + } + + &.min-lvl { + width: 100px; + } + + &.status { + width: 140px; + } + + &.dispatcher { + width: 230px; + } + + &.dispatcher-lvl { + width: 100px; + } + + &.routes-double, + &.routes-single { + width: 75px; + } + + &.general { + width: 160px; + } + + &.user { + width: 150px; } &.header-image { - min-width: 65px; - - &.user { - min-width: 80px; - } + width: 50px; } padding: 0.5em 0.25em; @@ -467,10 +494,11 @@ tr { } td { - padding: 0.25em 1em; + padding: 0.15em 0; text-align: center; - cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; &.inactive { opacity: 0.2; @@ -534,11 +562,6 @@ tr { } .station-info { - /* Images */ - display: flex; - gap: 5px; - justify-content: center; - .icon-info { vertical-align: middle; line-height: 32px; @@ -546,6 +569,7 @@ tr { width: 32px; height: 32px; font-size: 12px; + margin: 0 3px; outline: 2px solid #2b2b2b; border-radius: 5px; @@ -553,28 +577,6 @@ tr { } .station-tracks { - & > div { - display: grid; - grid-template-columns: 3em 3px 3em; - gap: 5px; - justify-content: center; - - & > div { - display: flex; - gap: 5px; - - &.double-tracks { - justify-content: flex-end; - } - - &.single-tracks { - justify-content: flex-start; - } - } - } - - text-align: center; - .no-catenary { background-color: #939393; } @@ -589,10 +591,12 @@ tr { } .track { - width: 1.25em; + display: inline-block; text-align: center; + width: 1.3em; padding: 0.35em 0; font-size: 1.1em; + margin: 0 0.2em; } } diff --git a/src/locales/pl.json b/src/locales/pl.json index ecf8f06..13b9e4e 100644 --- a/src/locales/pl.json +++ b/src/locales/pl.json @@ -231,7 +231,8 @@ "status": "Status", "dispatcher": "Dyżurny", "dispatcher-lvl": "Poziom\ndyżurnego", - "routes": "Szlaki\n2tor {'|'} 1tor", + "routes-single": "Szlaki\n1-torowe", + "routes-double": "Szlaki\n2-torowe", "general": "Informacje\nogólne", "user": "Maszyniści online", "spawn": "Otwarte spawny", diff --git a/src/scripts/data/stationHeaderNames.ts b/src/scripts/data/stationHeaderNames.ts index 7c018e4..39d7597 100644 --- a/src/scripts/data/stationHeaderNames.ts +++ b/src/scripts/data/stationHeaderNames.ts @@ -4,7 +4,8 @@ export const headIds = [ 'status', 'dispatcher', 'dispatcher-lvl', - 'routes', + 'routes-single', + 'routes-double', 'general' ] as const;