chore: changes in scenery view layout

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>