poprawki designu scenerii

src/components/Global/StationStatusBadge.vue

@@ -86,7 +86,7 @@ $online: #09a116;
 $unknown: #b93c3c;
 
 .status-badge {
-  border-radius: 1rem;
+  border-radius: 1em;
   font-weight: 500;
 
   padding: 0.2em 0.55em;

src/components/SceneryView/SceneryInfo/SceneryInfoDispatcher.vue

@@ -1,15 +1,15 @@
 <template>
   <section class="info-dispatcher">
-    <div class="dispatcher" v-if="onlineScenery && onlineScenery.dispatcherExp != -1">
+    <div class="info-top" v-if="onlineScenery && onlineScenery.dispatcherExp != -1">
       <span
-        class="dispatcher_level"
+        class="dispatcher-level"
         :style="calculateExpStyle(onlineScenery.dispatcherExp, onlineScenery.dispatcherIsSupporter)"
       >
         {{ onlineScenery.dispatcherExp > 1 ? onlineScenery.dispatcherExp : 'L' }}
       </span>
 
       <router-link
-        class="dispatcher_name"
+        class="dispatcher-name"
         :to="`/journal/dispatchers?search-dispatcher=${onlineScenery.dispatcherName}`"
       >
         <span
@@ -21,18 +21,25 @@
         </span>
         <span v-else>{{ onlineScenery.dispatcherName }}</span>
       </router-link>
+    </div>
 
-      <span class="dispatcher_likes text--primary">
+    <div class="info-bottom">
+      <span
+        class="dispatcher-likes text--primary"
+        v-if="onlineScenery && onlineScenery.dispatcherExp != -1"
+      >
         <img src="/images/icon-like.svg" alt="Likes count icon" />
         <span>{{ onlineScenery?.dispatcherRate || '0' }}</span>
       </span>
-    </div>
 
-    <StationStatusBadge
+      <span class="dispatcher-badge">
-      :isOnline="onlineScenery ? true : false"
+        <StationStatusBadge
-      :dispatcherStatus="onlineScenery?.dispatcherStatus"
+          :isOnline="onlineScenery ? true : false"
-      :dispatcherTimestamp="onlineScenery?.dispatcherTimestamp"
+          :dispatcherStatus="onlineScenery?.dispatcherStatus"
-    />
+          :dispatcherTimestamp="onlineScenery?.dispatcherTimestamp"
+        />
+      </span>
+    </div>
   </section>
 </template>
 
@@ -59,45 +66,46 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .info-dispatcher {
-  display: flex;
+  font-size: 1.8em;
-  align-items: center;
+}
-  justify-content: center;
 
-  flex-wrap: wrap;
+.info-top {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5em;
+}
+
+.info-bottom {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   gap: 0.5em;
 
-  .dispatcher {
+  margin-top: 0.5em;
-    font-size: 2em;
+}
 
-    &_level {
+.dispatcher-level {
-      display: inline-block;
+  background: firebrick;
-      margin-right: 0.3em;
-      background: firebrick;
 
-      border-radius: 0.1em;
+  border-radius: 0.1em;
 
-      width: 1.5em;
+  width: 1.5em;
-      height: 1.5em;
+  height: 1.5em;
-      line-height: 1.5em;
+  line-height: 1.5em;
-      font-weight: bold;
+  font-weight: bold;
-    }
+}
 
-    &_name {
+.dispatcher-likes {
-      cursor: pointer;
+  display: flex;
-      margin-right: 0.25em;
+  gap: 0.25em;
-    }
 
-    &_likes {
+  img {
-      img {
+    width: 1em;
-        height: 0.7em;
-        margin: 0 0.25em;
-      }
-    }
-  }
-
-  .status-badge {
-    font-size: 1.25em;
-    margin: 0.5em 0.25em;
   }
 }
+
+.dispatcher-badge {
+  font-size: 0.7em;
+}
 </style>

src/views/SceneryView.vue

@@ -236,6 +236,7 @@ button.back-btn {
   height: 95vh;
   min-height: 750px;
   max-height: 1000px;
+  overflow: auto;
 
   display: flex;
   flex-direction: column;