poprawki tabelki scenerii

src/components/StationsView/StationTable.vue

@@ -9,6 +9,7 @@
               :key="headerName"
               @click="changeSorter(headerName)"
               class="header-text"
+              :class="headerName"
             >
               <span class="header_wrapper">
                 <div v-html="$t(`sceneries.headers.${headerName}`)"></div>
@@ -146,51 +147,49 @@
 
             <td class="station-tracks">
               <div v-if="station.generalInfo">
-                <div class="double-tracks">
-                  <span
-                    v-if="station.generalInfo.routes.doubleElectrifiedNames.length != 0"
-                    class="track catenary"
-                    :title="`${$t('sceneries.info.double-track-routes-catenary')}${
-                      station.generalInfo.routes.doubleElectrifiedNames.length
-                    }`"
-                  >
-                    {{ station.generalInfo.routes.doubleElectrifiedNames.length }}
-                  </span>
+                <span
+                  v-if="station.generalInfo.routes.singleElectrifiedNames.length != 0"
+                  class="track catenary"
+                  :title="`${$t('sceneries.info.single-track-routes-catenary')}${
+                    station.generalInfo.routes.singleElectrifiedNames.length
+                  }`"
+                >
+                  {{ station.generalInfo.routes.singleElectrifiedNames.length }}
+                </span>
 
-                  <span
-                    v-if="station.generalInfo.routes.doubleOtherNames.length != 0"
-                    class="track no-catenary"
-                    :title="`${$t('sceneries.info.double-track-routes-other')}${
-                      station.generalInfo.routes.doubleOtherNames.length
-                    }`"
-                  >
-                    {{ station.generalInfo.routes.doubleOtherNames.length }}
-                  </span>
-                </div>
+                <span
+                  v-if="station.generalInfo.routes.singleOtherNames.length != 0"
+                  class="track no-catenary"
+                  :title="`${$t('sceneries.info.single-track-routes-other')}${
+                    station.generalInfo.routes.singleOtherNames.length
+                  }`"
+                >
+                  {{ station.generalInfo.routes.singleOtherNames.length }}
+                </span>
+              </div>
+            </td>
 
-                <div class="separator"></div>
+            <td class="station-tracks">
+              <div v-if="station.generalInfo">
+                <span
+                  v-if="station.generalInfo.routes.doubleElectrifiedNames.length != 0"
+                  class="track catenary"
+                  :title="`${$t('sceneries.info.double-track-routes-catenary')}${
+                    station.generalInfo.routes.doubleElectrifiedNames.length
+                  }`"
+                >
+                  {{ station.generalInfo.routes.doubleElectrifiedNames.length }}
+                </span>
 
-                <div class="single-tracks">
-                  <span
-                    v-if="station.generalInfo.routes.singleElectrifiedNames.length != 0"
-                    class="track catenary"
-                    :title="`${$t('sceneries.info.single-track-routes-catenary')}${
-                      station.generalInfo.routes.singleElectrifiedNames.length
-                    }`"
-                  >
-                    {{ station.generalInfo.routes.singleElectrifiedNames.length }}
-                  </span>
-
-                  <span
-                    v-if="station.generalInfo.routes.singleOtherNames.length != 0"
-                    class="track no-catenary"
-                    :title="`${$t('sceneries.info.single-track-routes-other')}${
-                      station.generalInfo.routes.singleOtherNames.length
-                    }`"
-                  >
-                    {{ station.generalInfo.routes.singleOtherNames.length }}
-                  </span>
-                </div>
+                <span
+                  v-if="station.generalInfo.routes.doubleOtherNames.length != 0"
+                  class="track no-catenary"
+                  :title="`${$t('sceneries.info.double-track-routes-other')}${
+                    station.generalInfo.routes.doubleOtherNames.length
+                  }`"
+                >
+                  {{ station.generalInfo.routes.doubleOtherNames.length }}
+                </span>
               </div>
             </td>
 
@@ -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;
   }
 }
 

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",

src/scripts/data/stationHeaderNames.ts

@@ -4,7 +4,8 @@ export const headIds = [
   'status',
   'dispatcher',
   'dispatcher-lvl',
-  'routes',
+  'routes-single',
+  'routes-double',
   'general'
 ] as const;