Zmiana wyglądu widoków i rozłożenia elementów na stronie (1.6.0a)

src/components/SceneryView/SceneryInfo/SceneryInfoDispatcher.vue

@@ -1,23 +1,25 @@
 <template>
   <section class="info-dispatcher">
     <div class="dispatcher" v-if="station.onlineInfo">
-      <span
-        class="dispatcher_level"
-        :style="calculateExpStyle(station.onlineInfo.dispatcherExp)"
-      >
+      <span class="dispatcher_level" :style="calculateExpStyle(station.onlineInfo.dispatcherExp)">
         {{ station.onlineInfo.dispatcherExp > 1 ? station.onlineInfo.dispatcherExp : 'L' }}
       </span>
 
       <span class="dispatcher_name">{{ station.onlineInfo.dispatcherName }}</span>
+
+      <span class="dispatcher_likes text--primary">
+        <img :src="icons.like" alt="icon-like" />
+        <span>{{ station.onlineInfo?.dispatcherRate || '0' }}</span>
+      </span>
     </div>
 
     <span class="status-badge" v-if="station.onlineInfo && onlineFrom > 0">
-      OD {{ new Date(onlineFrom).toLocaleTimeString('pl-PL', { hour: "2-digit", minute: "2-digit" }) }}
+      OD {{ new Date(onlineFrom).toLocaleTimeString('pl-PL', { hour: '2-digit', minute: '2-digit' }) }}
     </span>
 
     <span class="status-badge" v-if="station.onlineInfo" :class="station.onlineInfo.statusID">
       {{ $t(`status.${station.onlineInfo.statusID}`) }}
-      {{ station.onlineInfo.statusID == 'online' ?  timestampToString(station.onlineInfo.statusTimestamp) : '' }}
+      {{ station.onlineInfo.statusID == 'online' ? timestampToString(station.onlineInfo.statusTimestamp) : '' }}
     </span>
 
     <span class="status-badge free" v-else>
@@ -34,7 +36,7 @@ import Station from '@/scripts/interfaces/Station';
 import dateMixin from '@/mixins/dateMixin';
 
 export default defineComponent({
-  mixins: [styleMixin, dateMixin ],
+  mixins: [styleMixin, dateMixin],
   props: {
     station: {
       type: Object as () => Station,
@@ -43,15 +45,15 @@ export default defineComponent({
 
     onlineFrom: {
       type: Number,
-      default: -1
-    }
+      default: -1,
+    },
   },
 
-
   data: () => ({
     icons: {
       spawn: require('@/assets/icon-spawn.svg'),
-    }
+      like: require('@/assets/icon-like.svg'),
+    },
   }),
 });
 </script>
@@ -81,12 +83,21 @@ export default defineComponent({
     }
 
     &_name {
-      margin-right: 1em;
+      margin-right: 0.4em;
+    }
+
+    &_likes {
+      img {
+        height: 0.7em;
+        margin-right: 0.25em;
+      }
+
+      margin-right: 1.5em;
     }
   }
 
   .status-badge {
-    font-size: 1.2em;
+    font-size: 1.25em;
     margin: 0.5em 0.25em;
   }
 }

src/components/SceneryView/SceneryInfo/SceneryInfoIcons.vue

@@ -78,7 +78,7 @@ export default defineComponent({
 .info-icons {
   img {
     width: 3.5em;
-    margin: 0 0.5em;
+    margin: 1em 0.5em;
 
     border: 2px solid #4e4e4e;
     border-radius: 0.5em;

src/components/SceneryView/SceneryInfo/SceneryInfoRoutes.vue

@@ -21,8 +21,8 @@
 
       <span class="track-specs">
         {{ route.tracks }}tor
-        <img v-if="route.catenary" :src="icons.trackCatenary" alt="icon track catenary"  />
-        <img v-else :src="icons.trackNoCatenary" alt="icon track no catenary" >
+        <img v-if="route.catenary" :src="icons.trackCatenary" alt="icon track catenary" />
+        <img v-else :src="icons.trackNoCatenary" alt="icon track no catenary" />
 
         <img v-if="route.TWB" :src="icons.trackTWB" alt="icon track twb" />
         <img v-if="route.SBL" :src="icons.trackSBL" alt="icon track sbl" />
@@ -46,12 +46,12 @@ export default defineComponent({
   data() {
     return {
       icons: {
-        trackTWB: require("@/assets/icon-track-twb.svg"),
-        trackSBL: require("@/assets/icon-track-sbl.svg"),
-        trackCatenary: require("@/assets/icon-track-catenary.svg"),
-        trackNoCatenary: require("@/assets/icon-track-nocatenary.svg"),
-      }
-    }
+        trackTWB: require('@/assets/icon-track-twb.svg'),
+        trackSBL: require('@/assets/icon-track-sbl.svg'),
+        trackCatenary: require('@/assets/icon-track-catenary.svg'),
+        trackNoCatenary: require('@/assets/icon-track-nocatenary.svg'),
+      },
+    };
   },
 });
 </script>
@@ -90,5 +90,4 @@ export default defineComponent({
     vertical-align: text-bottom;
   }
 }
-
 </style>

src/components/SceneryView/SceneryInfo/SceneryInfoSpawnList.vue

@@ -1,8 +1,9 @@
 <template>
   <section class="info-spawn-list">
     <h3 class="spawn-header section-header">
-      {{ $t('scenery.spawns') }}
       <img :src="icons.spawn" alt="icon-spawn" />
+      &nbsp;{{ $t('scenery.spawns') }} &nbsp;
+      <span class="text--primary">{{ station.onlineInfo?.spawns.length || '0' }}</span>
     </h3>
 
     <span v-if="station.onlineInfo">

src/components/SceneryView/SceneryInfo/SceneryInfoStats.vue

@@ -83,7 +83,7 @@ export default defineComponent({
   }
 
   span > img {
-    width: 1.2em;
+    width: 1.2em; 
     margin-right: 0.5em;
   }
 }

src/components/SceneryView/SceneryInfo/SceneryInfoUserList.vue

@@ -1,8 +1,9 @@
 <template>
   <section class="info-user-list">
     <h3 class="user-header section-header">
-      {{ $t('scenery.users') }}
       <img :src="icons.user" alt="icon-user" />
+      &nbsp;{{ $t('scenery.users') }} &nbsp;
+      <span class="text--primary">{{ station.onlineInfo?.currentUsers || '0' }}/{{ station.onlineInfo?.maxUsers || '0' }}</span>
     </h3>
 
     <div
@@ -83,6 +84,8 @@ $terminated: red;
 $disconnected: slategray;
 
 .info-user-list {
+  padding: 0.5em;
+
   ul {
     display: flex;
     flex-wrap: wrap;