chore: changes in scenery view layout

src/components/SceneryView/SceneryDispatchersHistory.vue

@@ -1,71 +1,73 @@
 <template>
-  <section class="scenery-table-section">
-    <Loading v-if="dataStatus != DataStatus.Loaded && historyList.length == 0" />
+  <div class="scenery-dispatchers-history">
+    <div class="history-wrapper">
+      <Loading v-if="dataStatus != DataStatus.Loaded && historyList.length == 0" />
 
-    <div class="no-history" v-else-if="historyList.length == 0">
-      {{ $t('scenery.history-list-empty') }}
+      <div class="no-history" v-else-if="historyList.length == 0">
+        {{ $t('scenery.history-list-empty') }}
+      </div>
+
+      <table class="scenery-history-table" v-else>
+        <thead>
+          <th>{{ $t('scenery.dispatchers-history-hash') }}</th>
+          <th>{{ $t('scenery.dispatchers-history-dispatcher') }}</th>
+          <th>{{ $t('scenery.dispatchers-history-level') }}</th>
+          <th>{{ $t('scenery.dispatchers-history-rate') }}</th>
+          <th>{{ $t('scenery.dispatchers-history-date') }}</th>
+        </thead>
+
+        <tbody>
+          <tr v-for="historyItem in historyList" :key="historyItem.id">
+            <td>#{{ historyItem.stationHash }}</td>
+            <td>
+              <router-link
+                :to="`/journal/dispatchers?search-dispatcher=${historyItem.dispatcherName}`"
+              >
+                <b>{{ historyItem.dispatcherName }}</b>
+              </router-link>
+            </td>
+            <td>
+              <b
+                v-if="historyItem.dispatcherLevel !== null"
+                class="level-badge dispatcher"
+                :style="
+                  calculateExpStyle(historyItem.dispatcherLevel, historyItem.dispatcherIsSupporter)
+                "
+              >
+                {{ historyItem.dispatcherLevel >= 2 ? historyItem.dispatcherLevel : 'L' }}
+              </b>
+
+              <b v-else>?</b>
+            </td>
+            <td class="text--primary">
+              <b>{{ historyItem.dispatcherRate }}</b>
+            </td>
+            <td style="min-width: 300px">
+              <div v-if="historyItem.timestampTo">
+                <b>{{ $d(historyItem.timestampFrom) }}</b>
+
+                {{ timestampToString(historyItem.timestampFrom) }}
+                - {{ timestampToString(historyItem.timestampTo) }} ({{
+                  calculateDuration(historyItem.currentDuration)
+                }})
+              </div>
+
+              <div class="dispatcher-online" v-else>
+                {{ $t('journal.online-since') }}
+                <b>{{ timestampToString(historyItem.timestampFrom) }}</b>
+                ({{ calculateDuration(historyItem.currentDuration) }})
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
     </div>
 
-    <table class="scenery-history-table" v-else>
-      <thead>
-        <th>{{ $t('scenery.dispatchers-history-hash') }}</th>
-        <th>{{ $t('scenery.dispatchers-history-dispatcher') }}</th>
-        <th>{{ $t('scenery.dispatchers-history-level') }}</th>
-        <th>{{ $t('scenery.dispatchers-history-rate') }}</th>
-        <th>{{ $t('scenery.dispatchers-history-date') }}</th>
-      </thead>
-
-      <tbody>
-        <tr v-for="historyItem in historyList" :key="historyItem.id">
-          <td>#{{ historyItem.stationHash }}</td>
-          <td>
-            <router-link
-              :to="`/journal/dispatchers?search-dispatcher=${historyItem.dispatcherName}`"
-            >
-              <b>{{ historyItem.dispatcherName }}</b>
-            </router-link>
-          </td>
-          <td>
-            <b
-              v-if="historyItem.dispatcherLevel !== null"
-              class="level-badge dispatcher"
-              :style="
-                calculateExpStyle(historyItem.dispatcherLevel, historyItem.dispatcherIsSupporter)
-              "
-            >
-              {{ historyItem.dispatcherLevel >= 2 ? historyItem.dispatcherLevel : 'L' }}
-            </b>
-
-            <b v-else>?</b>
-          </td>
-          <td class="text--primary">
-            <b>{{ historyItem.dispatcherRate }}</b>
-          </td>
-          <td style="min-width: 300px">
-            <div v-if="historyItem.timestampTo">
-              <b>{{ $d(historyItem.timestampFrom) }}</b>
-
-              {{ timestampToString(historyItem.timestampFrom) }}
-              - {{ timestampToString(historyItem.timestampTo) }} ({{
-                calculateDuration(historyItem.currentDuration)
-              }})
-            </div>
-
-            <div class="dispatcher-online" v-else>
-              {{ $t('journal.online-since') }}
-              <b>{{ timestampToString(historyItem.timestampFrom) }}</b>
-              ({{ calculateDuration(historyItem.currentDuration) }})
-            </div>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </section>
-
-  <div class="bottom-info">
-    <button class="btn btn--option" v-if="historyList.length > 0" @click="navigateToHistory">
-      {{ $t('scenery.bottom-info') }}
-    </button>
+    <div class="bottom-info">
+      <button class="btn btn--option" v-if="historyList.length > 0" @click="navigateToHistory">
+        {{ $t('scenery.bottom-info') }}
+      </button>
+    </div>
   </div>
 </template>
 
@@ -149,6 +151,20 @@ export default defineComponent({
 @import '../../styles/responsive.scss';
 @import '../../styles/sceneryViewTables.scss';
 
+.scenery-dispatchers-history {
+  height: 100%;
+  overflow: auto;
+
+  display: grid;
+  gap: 0.5em;
+  grid-template-rows: auto 40px;
+}
+
+.history-wrapper {
+  position: relative;
+  overflow: auto;
+}
+
 .level-badge {
   margin: 0 auto;
 }

src/components/SceneryView/SceneryTimetablesHistory.vue

@@ -1,69 +1,70 @@
 <template>
-  <!-- WIP -->
-  <!-- <div class="top-filters">
-    <button class="btn btn--option">ROZPOCZYNA BIEG</button>
+  <div class="scenery-timetables-history">
+    <div class="top-filters">
+      <button class="btn btn--option checked">ROZPOCZYNA BIEG</button>
 
-    <button class="btn btn--option">PRZEZ</button>
+      <button class="btn btn--option checked">PRZEZ</button>
 
-    <button class="btn btn--option">KOŃCZY BIEG</button>
-  </div> -->
-
-  <section class="scenery-table-section">
-    <Loading v-if="dataStatus != DataStatus.Loaded" />
-
-    <div class="no-history" v-else-if="historyList.length == 0">
-      {{ $t('scenery.history-list-empty') }}
+      <button class="btn btn--option checked">KOŃCZY BIEG</button>
     </div>
 
-    <table class="scenery-history-table" v-else>
-      <thead>
-        <th>{{ $t('scenery.timetables-history-id') }}</th>
-        <th>{{ $t('scenery.timetables-history-number') }}</th>
-        <th>{{ $t('scenery.timetables-history-route') }}</th>
-        <th>{{ $t('scenery.timetables-history-driver') }}</th>
-        <th>{{ $t('scenery.timetables-history-author') }}</th>
-        <th>{{ $t('scenery.timetables-history-date') }}</th>
-      </thead>
+    <div class="history-wrapper">
+      <Loading v-if="dataStatus != DataStatus.Loaded" />
 
-      <tbody>
-        <tr v-for="historyItem in historyList" :key="historyItem.id">
-          <td>
-            <router-link :to="`/journal/timetables?search-train=%23${historyItem.id}`">
-              #{{ historyItem.id }}
-            </router-link>
-          </td>
-          <td>
-            <b class="text--primary">{{ historyItem.trainCategoryCode }}</b> <br />
-            {{ historyItem.trainNo }}
-          </td>
-          <td>{{ historyItem.route.replace('|', ' -> ') }}</td>
-          <td>
-            <router-link :to="`/journal/timetables?search-driver=${historyItem.driverName}`">
-              {{ historyItem.driverName }}
-            </router-link>
-          </td>
+      <div class="no-history" v-else-if="historyList.length == 0">
+        {{ $t('scenery.history-list-empty') }}
+      </div>
 
-          <td>
-            <router-link
-              v-if="historyItem.authorName"
-              :to="`/journal/timetables?search-dispatcher=${historyItem.authorName}`"
-              >{{ historyItem.authorName }}
-            </router-link>
-            <i v-else>{{ $t('scenery.timetable-author-unknown') }}</i>
-          </td>
-          <td>
-            <b>{{ localeDay(historyItem.beginDate, $i18n.locale) }}</b>
-            {{ localeTime(historyItem.beginDate, $i18n.locale) }}
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </section>
+      <table class="scenery-history-table" v-else>
+        <thead>
+          <th>{{ $t('scenery.timetables-history-id') }}</th>
+          <th>{{ $t('scenery.timetables-history-number') }}</th>
+          <th>{{ $t('scenery.timetables-history-route') }}</th>
+          <th>{{ $t('scenery.timetables-history-driver') }}</th>
+          <th>{{ $t('scenery.timetables-history-author') }}</th>
+          <th>{{ $t('scenery.timetables-history-date') }}</th>
+        </thead>
 
-  <div class="bottom-info">
-    <button class="btn btn--option" v-if="historyList.length > 0" @click="navigateToHistory()">
-      {{ $t('scenery.bottom-info') }}
-    </button>
+        <tbody>
+          <tr v-for="historyItem in historyList" :key="historyItem.id">
+            <td>
+              <router-link :to="`/journal/timetables?search-train=%23${historyItem.id}`">
+                #{{ historyItem.id }}
+              </router-link>
+            </td>
+            <td>
+              <b class="text--primary">{{ historyItem.trainCategoryCode }}</b> <br />
+              {{ historyItem.trainNo }}
+            </td>
+            <td>{{ historyItem.route.replace('|', ' -> ') }}</td>
+            <td>
+              <router-link :to="`/journal/timetables?search-driver=${historyItem.driverName}`">
+                {{ historyItem.driverName }}
+              </router-link>
+            </td>
+
+            <td>
+              <router-link
+                v-if="historyItem.authorName"
+                :to="`/journal/timetables?search-dispatcher=${historyItem.authorName}`"
+                >{{ historyItem.authorName }}
+              </router-link>
+              <i v-else>{{ $t('scenery.timetable-author-unknown') }}</i>
+            </td>
+            <td>
+              <b>{{ localeDay(historyItem.beginDate, $i18n.locale) }}</b>
+              {{ localeTime(historyItem.beginDate, $i18n.locale) }}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <div class="bottom-info">
+      <button class="btn btn--option" v-if="historyList.length > 0" @click="navigateToHistory()">
+        {{ $t('scenery.bottom-info') }}
+      </button>
+    </div>
   </div>
 </template>
 
@@ -142,13 +143,24 @@ export default defineComponent({
 @import '../../styles/responsive.scss';
 @import '../../styles/sceneryViewTables.scss';
 
+.scenery-timetables-history {
+  height: 100%;
+  overflow: auto;
+
+  display: grid;
+  gap: 1em;
+  grid-template-rows: 40px auto 40px;
+}
+
+.history-wrapper {
+  position: relative;
+  overflow: auto;
+}
+
 .top-filters {
   display: flex;
   justify-content: center;
   gap: 0.5em;
-
-  button {
-    padding: 0.5em;
-  }
+  padding: 0.25em;
 }
 </style>

src/styles/global.scss

@@ -228,6 +228,10 @@ a.a-button {
 
       background-color: #3c3c3c;
     }
+
+    &:hover {
+      background-color: #555;
+    }
   }
 
   &.btn--image {
@@ -283,22 +287,11 @@ a.a-button {
   }
 }
 
-@include smallScreen {
-  ::-webkit-scrollbar {
-    width: 0.5em;
-    height: 0.5em;
-
-    &-track {
-      background-color: #222;
-    }
-
-    &-thumb {
-      background-color: #777;
-    }
-  }
+// Basic tooltip
+[data-tooltip] {
+  cursor: help;
 }
 
-// Basic tooltip
 [data-tooltip]:hover::after,
 [data-tooltip]:focus::after {
   position: absolute;
@@ -315,11 +308,20 @@ a.a-button {
   z-index: 100;
 }
 
-[data-tooltip] {
-  cursor: help;
-}
-
 @include smallScreen {
+  ::-webkit-scrollbar {
+    width: 0.5em;
+    height: 0.5em;
+
+    &-track {
+      background-color: #222;
+    }
+
+    &-thumb {
+      background-color: #777;
+    }
+  }
+
   [data-tooltip]:hover::after,
   [data-tooltip]:focus::after {
     transform: translate(-50%, 2em);

src/styles/sceneryViewTables.scss

@@ -1,9 +1,3 @@
-.scenery-table-section {
-  position: relative;
-  height: 100%;
-  overflow-y: scroll;
-}
-
 table.scenery-history-table {
   width: 100%;
   border-collapse: collapse;
@@ -25,7 +19,7 @@ table.scenery-history-table {
 
   td {
     padding: 0.75em;
-    border-bottom: solid 5px #111;
+    border-bottom: solid 5px #181818;
   }
 }
 

src/views/SceneryView.vue

@@ -229,6 +229,7 @@ button.back-btn {
   padding: 1em 0.5em;
 
   height: calc(100vh - 0.5em);
+  min-height: 800px;
   overflow: auto;
 
   display: flex;
@@ -240,9 +241,10 @@ button.back-btn {
   padding: 1em 0.5em;
 
   height: calc(100vh - 0.5em);
+  min-height: 800px;
 
   display: grid;
-  grid-template-rows: auto 1fr auto;
+  grid-template-rows: auto 1fr;
   gap: 1em;
 }