chore: changes in scenery view layout

src/components/SceneryView/SceneryDispatchersHistory.vue

@@ -1,5 +1,6 @@
 <template>
-  <section class="scenery-table-section">
+  <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">
@@ -60,13 +61,14 @@
           </tr>
         </tbody>
       </table>
-  </section>
+    </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>
 
 <script lang="ts">
@@ -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,14 +1,14 @@
 <template>
-  <!-- WIP -->
+  <div class="scenery-timetables-history">
-  <!-- <div class="top-filters">
+    <div class="top-filters">
-    <button class="btn btn--option">ROZPOCZYNA BIEG</button>
+      <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>
+      <button class="btn btn--option checked">KOŃCZY BIEG</button>
-  </div> -->
+    </div>
 
-  <section class="scenery-table-section">
+    <div class="history-wrapper">
       <Loading v-if="dataStatus != DataStatus.Loaded" />
 
       <div class="no-history" v-else-if="historyList.length == 0">
@@ -58,13 +58,14 @@
           </tr>
         </tbody>
       </table>
-  </section>
+    </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>
 
 <script lang="ts">
@@ -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;
-
+  padding: 0.25em;
-  button {
-    padding: 0.5em;
-  }
 }
 </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;
+}
+
 [data-tooltip]:hover::after,
 [data-tooltip]:focus::after {
   position: absolute;
@@ -315,11 +308,20 @@ a.a-button {
   z-index: 100;
 }
 
-[data-tooltip] {
+@include smallScreen {
-  cursor: help;
+  ::-webkit-scrollbar {
+    width: 0.5em;
+    height: 0.5em;
+
+    &-track {
+      background-color: #222;
+    }
+
+    &-thumb {
+      background-color: #777;
+    }
   }
 
-@include smallScreen {
   [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;
 }