hotfix scrollowania

src/components/StationsView/StationTable.vue

@@ -1,277 +1,283 @@
 <template>
   <section class="station_table">
-    <table>
+    <div class="table_wrapper">
-      <thead>
+      <table>
-        <tr>
+        <thead>
-          <th
+          <tr>
-            v-for="headerName in headIds"
+            <th
-            :key="headerName"
+              v-for="headerName in headIds"
-            @click="changeSorter(headerName)"
+              :key="headerName"
-            class="header-text"
+              @click="changeSorter(headerName)"
+              class="header-text"
+            >
+              <span class="header_wrapper">
+                <div v-html="$t(`sceneries.${headerName}`)"></div>
+
+                <img
+                  class="sort-icon"
+                  v-if="sorterActive.headerName == headerName"
+                  :src="`/images/icon-arrow-${sorterActive.dir == 1 ? 'asc' : 'desc'}.svg`"
+                  alt="sort icon"
+                />
+              </span>
+            </th>
+
+            <th
+              v-for="headerName in headIconsIds"
+              :key="headerName"
+              @click="changeSorter(headerName)"
+              class="header-image"
+            >
+              <span class="header_wrapper">
+                <img
+                  :src="`/images/icon-${headerName}.svg`"
+                  :alt="headerName"
+                  :title="$t(`sceneries.${headerName}`)"
+                />
+
+                <img
+                  class="sort-icon"
+                  v-if="sorterActive.headerName == headerName"
+                  :src="`/images/icon-arrow-${sorterActive.dir == 1 ? 'asc' : 'desc'}.svg`"
+                  alt="sort icon"
+                />
+              </span>
+            </th>
+          </tr>
+        </thead>
+
+        <tbody>
+          <tr
+            class="station"
+            :class="{ 'last-selected': lastSelectedStationName == station.name }"
+            v-for="(station, i) in stations"
+            :key="i + station.name"
+            @click.left="setScenery(station.name)"
+            @click.right="openForumSite($event, station.generalInfo?.url)"
+            @keydown.enter="setScenery(station.name)"
+            @keydown.space="openForumSite($event, station.generalInfo?.url)"
+            tabindex="0"
           >
-            <span class="header_wrapper">
+            <td class="station_name" :class="station.generalInfo?.availability">
-              <div v-html="$t(`sceneries.${headerName}`)"></div>
+              <b v-if="station.generalInfo?.project" style="color: salmon">{{
+                station.generalInfo.project
+              }}</b>
+              {{ station.name }}
+            </td>
 
-              <img
+            <td class="station_level">
-                class="sort-icon"
+              <span v-if="station.generalInfo">
-                v-if="sorterActive.headerName == headerName"
+                <span
-                :src="`/images/icon-arrow-${sorterActive.dir == 1 ? 'asc' : 'desc'}.svg`"
+                  v-if="
-                alt="sort icon"
+                    station.generalInfo.reqLevel > -1 &&
+                    station.generalInfo.availability != 'nonPublic' &&
+                    station.generalInfo.availability != 'unavailable'
+                  "
+                  :style="calculateExpStyle(station.generalInfo.reqLevel)"
+                >
+                  {{ station.generalInfo.reqLevel >= 2 ? station.generalInfo.reqLevel : 'L' }}
+                </span>
+
+                <span v-else-if="station.generalInfo.availability == 'abandoned'">
+                  <img
+                    src="/images/icon-abandoned.svg"
+                    alt="non-public"
+                    :title="$t('desc.abandoned')"
+                  />
+                </span>
+
+                <span v-else-if="station.generalInfo.availability == 'nonPublic'">
+                  <img
+                    src="/images/icon-lock.svg"
+                    alt="non-public"
+                    :title="$t('desc.non-public')"
+                  />
+                </span>
+
+                <span v-else>
+                  <img
+                    src="/images/icon-unavailable.svg"
+                    alt="unavailable"
+                    :title="$t('desc.unavailable')"
+                  />
+                </span>
+              </span>
+
+              <span v-else> ? </span>
+            </td>
+
+            <td class="station_status">
+              <StationStatusBadge
+                :isOnline="station.onlineInfo ? true : false"
+                :dispatcherStatus="station.onlineInfo?.dispatcherStatus"
               />
-            </span>
+            </td>
-          </th>
 
-          <th
+            <td class="station_dispatcher-name">
-            v-for="headerName in headIconsIds"
+              <span v-if="station.onlineInfo?.dispatcherName">
-            :key="headerName"
+                <b
-            @click="changeSorter(headerName)"
+                  v-if="store.donatorsData.includes(station.onlineInfo.dispatcherName)"
-            class="header-image"
+                  title="Dyżurny wspierający projekt Stacjownika!"
-          >
+                  @click.stop="openDonationModal"
-            <span class="header_wrapper">
+                >
-              <img
+                  <img src="/images/icon-diamond.svg" alt="" />
-                :src="`/images/icon-${headerName}.svg`"
+                  {{ station.onlineInfo.dispatcherName }}
-                :alt="headerName"
+                </b>
-                :title="$t(`sceneries.${headerName}`)"
-              />
 
-              <img
+                <div v-else>
-                class="sort-icon"
+                  {{ station.onlineInfo.dispatcherName }}
-                v-if="sorterActive.headerName == headerName"
+                </div>
-                :src="`/images/icon-arrow-${sorterActive.dir == 1 ? 'asc' : 'desc'}.svg`"
+              </span>
-                alt="sort icon"
+            </td>
-              />
-            </span>
-          </th>
-        </tr>
-      </thead>
 
-      <tbody>
+            <td class="station_dispatcher-exp">
-        <tr
+              <span
-          class="station"
+                v-if="station.onlineInfo"
-          :class="{ 'last-selected': lastSelectedStationName == station.name }"
+                :style="
-          v-for="(station, i) in stations"
+                  calculateExpStyle(
-          :key="i + station.name"
+                    station.onlineInfo.dispatcherExp,
-          @click.left="setScenery(station.name)"
+                    station.onlineInfo.dispatcherIsSupporter
-          @click.right="openForumSite($event, station.generalInfo?.url)"
+                  )
-          @keydown.enter="setScenery(station.name)"
+                "
-          @keydown.space="openForumSite($event, station.generalInfo?.url)"
+              >
-          tabindex="0"
+                {{ station.onlineInfo.dispatcherExp < 2 ? 'L' : station.onlineInfo.dispatcherExp }}
-        >
+              </span>
-          <td class="station_name" :class="station.generalInfo?.availability">
+            </td>
-            <b v-if="station.generalInfo?.project" style="color: salmon">{{
-              station.generalInfo.project
-            }}</b>
-            {{ station.name }}
-          </td>
 
-          <td class="station_level">
+            <td class="station_tracks twoway">
-            <span v-if="station.generalInfo">
               <span
                 v-if="
-                  station.generalInfo.reqLevel > -1 &&
+                  station.generalInfo &&
-                  station.generalInfo.availability != 'nonPublic' &&
+                  station.generalInfo.routes.twoWayCatenaryRouteNames.length > 0
-                  station.generalInfo.availability != 'unavailable'
                 "
-                :style="calculateExpStyle(station.generalInfo.reqLevel)"
+                class="track catenary"
+                :title="`Liczba zelektryfikowanych szlaków dwutorowych: ${station.generalInfo.routes.twoWayCatenaryRouteNames.length}`"
               >
-                {{ station.generalInfo.reqLevel >= 2 ? station.generalInfo.reqLevel : 'L' }}
+                {{ station.generalInfo.routes.twoWayCatenaryRouteNames.length }}
               </span>
 
-              <span v-else-if="station.generalInfo.availability == 'abandoned'">
+              <span
+                v-if="
+                  station.generalInfo &&
+                  station.generalInfo.routes.twoWayNoCatenaryRouteNames.length > 0
+                "
+                class="track no-catenary"
+                :title="`Liczba niezelektryfikowanych szlaków dwutorowych: ${station.generalInfo.routes.twoWayNoCatenaryRouteNames.length}`"
+              >
+                {{ station.generalInfo.routes.twoWayNoCatenaryRouteNames.length }}
+              </span>
+
+              <span class="separator"></span>
+
+              <span
+                v-if="
+                  station.generalInfo &&
+                  station.generalInfo.routes.oneWayCatenaryRouteNames.length > 0
+                "
+                class="track catenary"
+                :title="`Liczba zelektryfikowanych szlaków jednotorowych: ${station.generalInfo.routes.oneWayCatenaryRouteNames.length}`"
+              >
+                {{ station.generalInfo.routes.oneWayCatenaryRouteNames.length }}
+              </span>
+
+              <span
+                v-if="
+                  station.generalInfo &&
+                  station.generalInfo.routes.oneWayNoCatenaryRouteNames.length > 0
+                "
+                class="track no-catenary"
+                :title="`Liczba niezelektryfikowanych szlaków jednotorowych: ${station.generalInfo.routes.oneWayNoCatenaryRouteNames.length}`"
+              >
+                {{ station.generalInfo.routes.oneWayNoCatenaryRouteNames.length }}
+              </span>
+            </td>
+
+            <td class="station_info" v-if="station.generalInfo">
+              <span
+                class="scenery-icon icon-info"
+                :class="station.generalInfo.controlType.replace('+', '-')"
+                :title="$t('desc.control-type') + $t(`controls.${station.generalInfo.controlType}`)"
+                v-html="getControlTypeAbbrev(station.generalInfo.controlType)"
+              >
+              </span>
+
+              <span>
                 <img
-                  src="/images/icon-abandoned.svg"
+                  class="icon-info"
-                  alt="non-public"
+                  v-if="station.generalInfo.SUP"
-                  :title="$t('desc.abandoned')"
+                  src="/images/icon-SUP.svg"
+                  alt="SUP (RASP-UZK)"
+                  :title="$t('desc.SUP')"
                 />
               </span>
 
-              <span v-else-if="station.generalInfo.availability == 'nonPublic'">
+              <span>
-                <img src="/images/icon-lock.svg" alt="non-public" :title="$t('desc.non-public')" />
-              </span>
-
-              <span v-else>
                 <img
-                  src="/images/icon-unavailable.svg"
+                  class="icon-info"
-                  alt="unavailable"
+                  v-if="station.generalInfo.signalType"
-                  :title="$t('desc.unavailable')"
+                  :src="`/images/icon-${station.generalInfo.signalType}.svg`"
+                  :alt="station.generalInfo.signalType"
+                  :title="$t('desc.signals-type') + $t(`signals.${station.generalInfo.signalType}`)"
                 />
               </span>
-            </span>
 
-            <span v-else> ? </span>
+              <span>
-          </td>
+                <img
+                  class="icon-info"
+                  v-if="station.generalInfo && station.generalInfo.routes.sblRouteNames.length > 0"
+                  src="/images/icon-SBL.svg"
+                  alt="SBL"
+                  :title="$t('desc.SBL') + `${station.generalInfo.routes.sblRouteNames.join(',')}`"
+                />
+              </span>
+            </td>
 
-          <td class="station_status">
+            <td class="station_info" v-else>
-            <StationStatusBadge
-              :isOnline="station.onlineInfo ? true : false"
-              :dispatcherStatus="station.onlineInfo?.dispatcherStatus"
-            />
-          </td>
-
-          <td class="station_dispatcher-name">
-            <span v-if="station.onlineInfo?.dispatcherName">
-              <b
-                v-if="store.donatorsData.includes(station.onlineInfo.dispatcherName)"
-                title="Dyżurny wspierający projekt Stacjownika!"
-                @click.stop="openDonationModal"
-              >
-                <img src="/images/icon-diamond.svg" alt="" />
-                {{ station.onlineInfo.dispatcherName }}
-              </b>
-
-              <div v-else>
-                {{ station.onlineInfo.dispatcherName }}
-              </div>
-            </span>
-          </td>
-
-          <td class="station_dispatcher-exp">
-            <span
-              v-if="station.onlineInfo"
-              :style="
-                calculateExpStyle(
-                  station.onlineInfo.dispatcherExp,
-                  station.onlineInfo.dispatcherIsSupporter
-                )
-              "
-            >
-              {{ station.onlineInfo.dispatcherExp < 2 ? 'L' : station.onlineInfo.dispatcherExp }}
-            </span>
-          </td>
-
-          <td class="station_tracks twoway">
-            <span
-              v-if="
-                station.generalInfo &&
-                station.generalInfo.routes.twoWayCatenaryRouteNames.length > 0
-              "
-              class="track catenary"
-              :title="`Liczba zelektryfikowanych szlaków dwutorowych: ${station.generalInfo.routes.twoWayCatenaryRouteNames.length}`"
-            >
-              {{ station.generalInfo.routes.twoWayCatenaryRouteNames.length }}
-            </span>
-
-            <span
-              v-if="
-                station.generalInfo &&
-                station.generalInfo.routes.twoWayNoCatenaryRouteNames.length > 0
-              "
-              class="track no-catenary"
-              :title="`Liczba niezelektryfikowanych szlaków dwutorowych: ${station.generalInfo.routes.twoWayNoCatenaryRouteNames.length}`"
-            >
-              {{ station.generalInfo.routes.twoWayNoCatenaryRouteNames.length }}
-            </span>
-
-            <span class="separator"></span>
-
-            <span
-              v-if="
-                station.generalInfo &&
-                station.generalInfo.routes.oneWayCatenaryRouteNames.length > 0
-              "
-              class="track catenary"
-              :title="`Liczba zelektryfikowanych szlaków jednotorowych: ${station.generalInfo.routes.oneWayCatenaryRouteNames.length}`"
-            >
-              {{ station.generalInfo.routes.oneWayCatenaryRouteNames.length }}
-            </span>
-
-            <span
-              v-if="
-                station.generalInfo &&
-                station.generalInfo.routes.oneWayNoCatenaryRouteNames.length > 0
-              "
-              class="track no-catenary"
-              :title="`Liczba niezelektryfikowanych szlaków jednotorowych: ${station.generalInfo.routes.oneWayNoCatenaryRouteNames.length}`"
-            >
-              {{ station.generalInfo.routes.oneWayNoCatenaryRouteNames.length }}
-            </span>
-          </td>
-
-          <td class="station_info" v-if="station.generalInfo">
-            <span
-              class="scenery-icon icon-info"
-              :class="station.generalInfo.controlType.replace('+', '-')"
-              :title="$t('desc.control-type') + $t(`controls.${station.generalInfo.controlType}`)"
-              v-html="getControlTypeAbbrev(station.generalInfo.controlType)"
-            >
-            </span>
-
-            <span>
               <img
                 class="icon-info"
-                v-if="station.generalInfo.SUP"
+                src="/images/icon-unknown.svg"
-                src="/images/icon-SUP.svg"
+                alt="icon-unknown"
-                alt="SUP (RASP-UZK)"
+                :title="$t('desc.unknown')"
-                :title="$t('desc.SUP')"
               />
-            </span>
+            </td>
 
-            <span>
+            <td class="station_users" :class="{ inactive: !station.onlineInfo }">
-              <img
+              <span>{{ station.onlineInfo?.currentUsers || 0 }}</span>
-                class="icon-info"
+              /
-                v-if="station.generalInfo.signalType"
+              <span>{{ station.onlineInfo?.maxUsers || 0 }}</span>
-                :src="`/images/icon-${station.generalInfo.signalType}.svg`"
+            </td>
-                :alt="station.generalInfo.signalType"
-                :title="$t('desc.signals-type') + $t(`signals.${station.generalInfo.signalType}`)"
-              />
-            </span>
 
-            <span>
+            <td class="station_spawns" :class="{ inactive: !station.onlineInfo }">
-              <img
+              <span>{{ station.onlineInfo?.spawns.length || 0 }}</span>
-                class="icon-info"
+            </td>
-                v-if="station.generalInfo && station.generalInfo.routes.sblRouteNames.length > 0"
-                src="/images/icon-SBL.svg"
-                alt="SBL"
-                :title="$t('desc.SBL') + `${station.generalInfo.routes.sblRouteNames.join(',')}`"
-              />
-            </span>
-          </td>
 
-          <td class="station_info" v-else>
+            <td
-            <img
+              class="station_schedules all"
-              class="icon-info"
+              style="width: 30px"
-              src="/images/icon-unknown.svg"
+              :class="{ inactive: !station.onlineInfo }"
-              alt="icon-unknown"
+            >
-              :title="$t('desc.unknown')"
+              {{ station.onlineInfo?.scheduledTrainCount.all }}
-            />
+            </td>
-          </td>
 
-          <td class="station_users" :class="{ inactive: !station.onlineInfo }">
+            <td
-            <span>{{ station.onlineInfo?.currentUsers || 0 }}</span>
+              class="station_schedules unconfirmed"
-            /
+              style="width: 30px"
-            <span>{{ station.onlineInfo?.maxUsers || 0 }}</span>
+              :class="{ inactive: !station.onlineInfo }"
-          </td>
+            >
+              {{ station.onlineInfo?.scheduledTrainCount.unconfirmed }}
+            </td>
 
-          <td class="station_spawns" :class="{ inactive: !station.onlineInfo }">
+            <td
-            <span>{{ station.onlineInfo?.spawns.length || 0 }}</span>
+              class="station_schedules confirmed"
-          </td>
+              style="width: 30px"
-
+              :class="{ inactive: !station.onlineInfo }"
-          <td
+            >
-            class="station_schedules all"
+              {{ station.onlineInfo?.scheduledTrainCount.confirmed }}
-            style="width: 30px"
+            </td>
-            :class="{ inactive: !station.onlineInfo }"
+          </tr>
-          >
+        </tbody>
-            {{ station.onlineInfo?.scheduledTrainCount.all }}
+      </table>
-          </td>
+    </div>
-
-          <td
-            class="station_schedules unconfirmed"
-            style="width: 30px"
-            :class="{ inactive: !station.onlineInfo }"
-          >
-            {{ station.onlineInfo?.scheduledTrainCount.unconfirmed }}
-          </td>
-
-          <td
-            class="station_schedules confirmed"
-            style="width: 30px"
-            :class="{ inactive: !station.onlineInfo }"
-          >
-            {{ station.onlineInfo?.scheduledTrainCount.confirmed }}
-          </td>
-        </tr>
-      </tbody>
-    </table>
 
     <Loading v-if="!isDataLoaded && stations.length == 0" />
 
@@ -388,16 +394,18 @@ $rowCol: #424242;
   }
 }
 
+.table_wrapper {
+  overflow: auto;
+  overflow-y: hidden;
+  font-weight: 500;
+}
+
 table {
   white-space: nowrap;
   border-collapse: collapse;
   // min-width: 1350px;
   width: 100%;
 
-  overflow: auto;
-  overflow-y: hidden;
-  font-weight: 500;
-
   @include smallScreen() {
     min-width: auto;
   }