Zmiana w ułożeniu elementów w widoku scenerii

src/components/SceneryView/SceneryHeader.vue

@@ -37,10 +37,6 @@ export default defineComponent({
 @import '../../styles/variables.scss';
 @import '../../styles/responsive.scss';
 
-.info-header {
-  padding-top: 2em;
-}
-
 .scenery-name {
   font-weight: bold;
   color: $accentCol;
@@ -48,7 +44,6 @@ export default defineComponent({
   position: relative;
 
   font-size: 3.5em;
-  margin-top: 0.25em;
 
   text-transform: uppercase;
 
@@ -63,11 +58,9 @@ export default defineComponent({
 
   position: absolute;
   top: 0;
-
 }
 
 .scenery-authors {
   color: #999;
 }
 </style>
-

src/components/SceneryView/SceneryInfo.vue

@@ -20,6 +20,12 @@
         <!-- spawn list -->
         <scenery-info-spawn-list :station="station" />
       </div>
+
+      <div class="info-actions">
+        <button class="btn btn--option">Pokaż historię obecnego dyżurnego</button>
+        <button class="btn btn--option">Pokaż historię dyżurów tej scenerii</button>
+        <button class="btn btn--option">Pokaż temat forum scenerii</button>
+      </div>
     </section>
   </div>
 </template>
@@ -81,10 +87,22 @@ h3.section-header {
 
 .info-lists {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 400px));
+  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
   justify-content: space-around;
 }
 
+.info-actions {
+  display: flex;
+  justify-content: center;
+
+  margin-top: 1em;
+
+  .btn {
+    margin: 0.5em;
+    box-shadow: 0 0 10px 4px #242424;
+  }
+}
+
 .badge {
   font-weight: 600;
 

src/components/SceneryView/SceneryTimetable.vue

@@ -30,7 +30,7 @@
     </div>
 
     <transition name="scenery-timetable-list-anim" mode="out-in">
-      <div :key="store.dataStatuses.trains + selectedCheckpoint">
+      <div :key="store.dataStatuses.trains + selectedCheckpoint" class="scenery-timetable-list">
         <div style="padding-bottom: 5em" v-if="store.dataStatuses.trains == 0 && computedScheduledTrains.length == 0">
           <Loading />
         </div>
@@ -63,11 +63,11 @@
                   <span class="content" v-html="scheduledTrain.stopInfo.comments"> </span>
                 </span>
               </span>
-              |
+              &nbsp;|&nbsp;
               <span style="color: white">
                 {{ scheduledTrain.driverName }}
               </span>
-              |
+              &nbsp;|&nbsp;
               <span class="general-status">
                 <span :class="scheduledTrain.stopStatus">
                   {{ $t(`timetables.${scheduledTrain.stopStatus}`) }}
@@ -272,15 +272,13 @@ export default defineComponent({
 @import '../../styles/variables.scss';
 
 h3.timetable-header {
-  margin: 0.5em 0;
-  padding: 0.3em;
-
   display: flex;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
 
   font-size: 1.5em;
+  margin: 1em 0;
 
   a {
     display: flex;
@@ -318,6 +316,13 @@ h3.timetable-header {
   }
 }
 
+.scenery-timetable-list {
+  max-height: 75vh;
+  overflow: auto;
+
+  padding: 0 0.5em;
+}
+
 .timetable {
   &-count {
     margin-left: 0.5em;
@@ -358,7 +363,6 @@ h3.timetable-header {
   &-schedule {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(30px, 1fr));
-    font-size: 1.15em;
   }
 }
 
@@ -367,8 +371,8 @@ h3.timetable-header {
   justify-content: center;
 
   flex-wrap: wrap;
-
-  font-size: 1.2em;
+  font-size: 1.1em;
+  margin: 0.75em 0;
 
   .checkpoint_item {
     &.current {
@@ -412,6 +416,9 @@ h3.timetable-header {
 }
 
 .general-info {
+  display: flex;
+  flex-wrap: wrap;
+
   .info-number {
     color: $accentCol;
   }

src/store/store.ts

@@ -344,6 +344,7 @@ export const useStore = defineStore('store', {
 
       socket.on('UPDATE', (data: APIData) => {
         this.apiData = data;
+        this.dataStatuses.connection = DataStatus.Loaded;
         this.setOnlineData();
       });
 
@@ -353,7 +354,6 @@ export const useStore = defineStore('store', {
       });
 
       this.webSocket = socket;
-      this.dataStatuses.connection = DataStatus.Loaded;
     },
 
     async connectToAPI() {

src/views/SceneryView.vue

@@ -9,31 +9,37 @@
     </div>
 
     <div class="scenery-wrapper" v-if="stationInfo" ref="card-wrapper">
-      <button
-        v-if="!timetableOnly"
-        class="back-btn btn btn--image"
-        :title="$t('scenery.return-btn')"
-        @click="navigateTo('/')"
-      >
-        <img :src="icons.back" alt="Back to scenery" />
-      </button>
+      <div class="scenery-left">
+        <div class="scenery-actions">
+          <button
+            v-if="!timetableOnly"
+            class="back-btn btn btn--image"
+            :title="$t('scenery.return-btn')"
+            @click="navigateTo('/')"
+          >
+            <img :src="icons.back" alt="Back to scenery" />
+          </button>
 
-      <button
-        v-if="!timetableOnly && store.region.id == 'eu' && stationInfo"
-        class="history-btn btn btn--image"
-        @click="
-          navigateTo('/journal/dispatchers', {
-            sceneryName: stationInfo?.name,
-          })
-        "
-      >
-        <img :src="viewMode == 'history' ? icons.user : icons.history" alt="icon" />
-      </button>
+          <!-- <button
+            v-if="!timetableOnly && store.region.id == 'eu' && stationInfo"
+            class="history-btn btn btn--image"
+            @click="
+              navigateTo('/journal/dispatchers', {
+                sceneryName: stationInfo?.name,
+              })
+            "
+          >
+            <img :src="viewMode == 'history' ? icons.user : icons.history" alt="icon" />
+          </button> -->
+        </div>
 
-      <SceneryHeader :station="stationInfo" />
+        <SceneryHeader :station="stationInfo" />
+        <SceneryInfo :station="stationInfo" :timetableOnly="timetableOnly" />
+      </div>
 
-      <SceneryInfo :station="stationInfo" :timetableOnly="timetableOnly" />
-      <SceneryTimetable :station="stationInfo" :timetableOnly="timetableOnly" />
+      <div class="scenery-right">
+        <SceneryTimetable :station="stationInfo" :timetableOnly="timetableOnly" />
+      </div>
     </div>
   </div>
 </template>
@@ -121,8 +127,6 @@ $sceneryBgCol: #333;
 
 .scenery {
   &-view {
-    min-height: 550px;
-
     display: flex;
     justify-content: center;
   }
@@ -142,42 +146,52 @@ $sceneryBgCol: #333;
       margin: 1em auto;
     }
   }
+}
 
-  &-wrapper {
-    position: relative;
+.scenery-wrapper {
+  display: grid;
+  grid-template-columns: 4fr 5fr;
+  gap: 0 1em;
 
-    width: 100%;
-    max-width: 1100px;
+  position: relative;
 
-    @include midScreen {
-      width: 100%;
-    }
+  width: 100%;
+  max-width: 1500px;
 
-    background: #292929;
-    padding: 1em;
-    margin: 1rem 0;
+  background: #292929;
+  padding: 1.5em;
+  margin: 1rem 0;
 
-    border-radius: 1.5em;
+  border-radius: 1.5em;
 
-    text-align: center;
-  }
+  text-align: center;
+}
+
+.scenery-left {
+  height: 80vh;
+  max-height: 1000px;
+}
+
+.scenery-actions {
+  display: flex;
+  justify-content: space-between;
 }
 
 button.btn {
-  position: absolute;
-  padding: 0.25em;
-
-  top: 0.5em;
   img {
     width: 2em;
   }
 }
 
-button.history-btn {
-  right: 0.5em;
-}
+@include midScreen {
+  .scenery-wrapper {
+    grid-template-columns: 1fr;
+    gap: 0;
+  }
 
-button.back-btn {
-  left: 0.5em;
+  .scenery-left { 
+    height: auto;
+    margin-bottom: 2em;
+  }
 }
 </style>