design: badge poziomów

src/App.scss

@@ -46,7 +46,7 @@
   font-size: 1rem;
 
   @include smallScreen() {
-    font-size: calc(0.65rem + 1.1vw);
+    font-size: calc(0.5rem + 1.1vw);
   }
 
   @include screenLandscape() {

src/components/JournalView/JournalDispatchersList.vue

@@ -17,10 +17,10 @@
         @keydown.enter="navigateToScenery(item.stationName, item.isOnline)"
         tabindex="0"
       >
-        <span>
+        <span class="item-general">
           <b
             v-if="item.dispatcherLevel !== null"
-            class="dispatcher-level"
+            class="level-badge dispatcher"
             :style="calculateExpStyle(item.dispatcherLevel, item.dispatcherIsSupporter)"
           >
             {{ item.dispatcherLevel >= 2 ? item.dispatcherLevel : 'L' }}
@@ -31,7 +31,7 @@
           <span class="region-badge" :class="item.region">PL1</span>
         </span>
 
-        <span>
+        <span class="item-time">
           <span :data-status="item.isOnline"> {{ item.isOnline ? $t('journal.online-since') : 'OFFLINE' }}&nbsp; </span>
           <span>
             {{ new Date(item.timestampFrom).toLocaleTimeString('pl-PL', { timeStyle: 'short' }) }}
@@ -99,18 +99,9 @@ export default defineComponent({
 <style lang="scss" scoped>
 @import '../../styles/animations.scss';
 @import '../../styles/responsive.scss';
+@import '../../styles/badge.scss';
 @import '../../styles/JournalSection.scss';
 
-.region-badge {
-  padding: 0.1em 0.5em;
-  border-radius: 0.5em;
-  font-weight: bold;
-
-  &.eu {
-    background-color: forestgreen;
-  }
-}
-
 li.sticky {
   position: sticky;
   top: 0;
@@ -141,6 +132,16 @@ li.sticky {
   }
 }
 
+.item-general {
+  display: flex;
+  align-items: center;
+  gap: 0.25em;
+
+  .level-badge {
+    margin-right: 0.25em;
+  }
+}
+
 .journal_day {
   margin-bottom: 1em;
   padding: 0.5em;
@@ -157,16 +158,4 @@ li.sticky {
     font-weight: bold;
   }
 }
-
-.dispatcher-level {
-  display: inline-block;
-  text-align: center;
-
-  line-height: 1.45em;
-  width: 1.45em;
-  height: 1.45em;
-
-  margin-right: 0.45em;
-  border-radius: 0.25em;
-}
 </style>

src/components/JournalView/JournalTimetablesList.vue

@@ -6,25 +6,35 @@
       :key="timetable.id"
     >
       <div class="journal_item-info">
-        <div class="info-top">
+        <div class="info-general">
           <span
+            class="general-train"
             tabindex="0"
             @click="showTimetable(timetable)"
             @keydown.enter="showTimetable(timetable)"
             style="cursor: pointer"
           >
-            <b class="text--primary">{{ timetable.trainCategoryCode }}&nbsp;</b>
-            <b>{{ timetable.trainNo }}</b>
-            | <span>{{ timetable.driverName }}</span> |
             <span class="text--grayed">#{{ timetable.id }}</span>
-            <span v-if="timetable.driverLevel !== null">
-              |
-              <b :style="calculateTextExpStyle(timetable.driverLevel, timetable.driverIsSupporter)">
-                {{ timetable.driverLevel < 2 ? 'L' : `${timetable.driverLevel} lvl` }}
-              </b>
+            &bull;
+            <span>
+              <strong class="text--primary">
+                {{ timetable.trainCategoryCode }}
+              </strong>
+              <strong>&nbsp;{{ timetable.trainNo }}</strong>
             </span>
+            &bull;
+            <strong
+              v-if="timetable.driverLevel !== null"
+              class="level-badge driver"
+              :style="calculateExpStyle(timetable.driverLevel, timetable.driverIsSupporter)"
+            >
+              {{ timetable.driverLevel < 2 ? 'L' : `${timetable.driverLevel}` }}
+            </strong>
+
+            <strong>{{ timetable.driverName }}</strong>
           </span>
-          <span>
+
+          <span class="general-time">
             <b class="info-date">{{ localeDay(timetable.beginDate, $i18n.locale) }}</b>
             <b
               class="info-status"
@@ -189,6 +199,7 @@ export default defineComponent({
     },
 
     showTimetable(timetable: TimetableHistory) {
+      if (!timetable) return;
       if (timetable.terminated) return;
 
       this.selectModalTrain(timetable.driverName + timetable.trainNo.toString());
@@ -209,7 +220,6 @@ export default defineComponent({
 @import '../../styles/badge.scss';
 @import '../../styles/JournalSection.scss';
 
-
 hr {
   margin: 0.25em 0;
 }
@@ -236,10 +246,14 @@ hr {
     }
   }
 
-  &-top {
+  &-general {
     display: flex;
-    flex-wrap: wrap;
     justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+
+    gap: 0.25em;
+    margin-bottom: 0.5em;
   }
 
   &-route {
@@ -251,6 +265,12 @@ hr {
   }
 }
 
+.general-train {
+  display: flex;
+  align-items: center;
+  gap: 0.25em;
+}
+
 ul.stock-list {
   display: flex;
   align-items: flex-end;
@@ -291,14 +311,9 @@ ul.stock-list {
 }
 
 @include smallScreen {
-  .info-top {
+  .info-general {
     flex-direction: column;
-
-    span {
-      margin: 0.1em auto;
-    }
   }
-
   .info-extended {
     text-align: center;
   }

src/components/SceneryView/SceneryDispatchersHistory.vue

@@ -5,25 +5,31 @@
     <div class="list-warning" v-else-if="dispatcherHistoryList.length == 0">{{ $t('scenery.history-list-empty') }}</div>
 
     <ul class="history-list" v-else>
-      <li class="list-item" v-for="historyItem in dispatcherHistoryList">
-        <div>
-          <router-link :to="`/journal/dispatchers?dispatcherName=${historyItem.dispatcherName}`">
-            <span class="text--grayed">#{{ historyItem.stationHash }}&nbsp;</span>
-            <b>{{ historyItem.dispatcherName }}</b>
-          </router-link>
-        </div>
+      <li class="list-item" v-for="item in dispatcherHistoryList">
+        <router-link class="item-general" :to="`/journal/dispatchers?dispatcherName=${item.dispatcherName}`">
+          <span class="text--grayed">#{{ item.stationHash }}&nbsp;</span>
+          <b
+            v-if="item.dispatcherLevel !== null"
+            class="level-badge dispatcher"
+            :style="calculateExpStyle(item.dispatcherLevel, item.dispatcherIsSupporter)"
+          >
+            {{ item.dispatcherLevel >= 2 ? item.dispatcherLevel : 'L' }}
+          </b>
 
-        <div v-if="historyItem.timestampTo">
-          <b>{{ $d(historyItem.timestampFrom) }}</b>
+          <b>{{ item.dispatcherName }}</b>
+        </router-link>
 
-          {{ timestampToString(historyItem.timestampFrom) }}
-          - {{ timestampToString(historyItem.timestampTo) }} ({{ calculateDuration(historyItem.currentDuration) }})
+        <div v-if="item.timestampTo">
+          <b>{{ $d(item.timestampFrom) }}</b>
+
+          {{ timestampToString(item.timestampFrom) }}
+          - {{ timestampToString(item.timestampTo) }} ({{ calculateDuration(item.currentDuration) }})
         </div>
 
         <div class="dispatcher-online" v-else>
           {{ $t('journal.online-since') }}
-          <b>{{ timestampToString(historyItem.timestampFrom) }}</b>
-          ({{ calculateDuration(historyItem.currentDuration) }})
+          <b>{{ timestampToString(item.timestampFrom) }}</b>
+          ({{ calculateDuration(item.currentDuration) }})
         </div>
       </li>
     </ul>
@@ -39,10 +45,11 @@ import { DispatcherHistory } from '../../scripts/interfaces/api/DispatchersAPIDa
 import Station from '../../scripts/interfaces/Station';
 import { URLs } from '../../scripts/utils/apiURLs';
 import Loading from '../Global/Loading.vue';
+import styleMixin from '../../mixins/styleMixin';
 
 export default defineComponent({
   name: 'SceneryDispatchersHistory',
-  mixins: [dateMixin],
+  mixins: [dateMixin, styleMixin],
   props: {
     station: {
       type: Object as PropType<Station>,
@@ -96,6 +103,12 @@ export default defineComponent({
   line-height: 1.5em;
 }
 
+.item-general {
+  display: flex;
+  align-items: center;
+  gap: 0.25em;
+}
+
 .dispatcher-online {
   color: springgreen;
 }

src/components/SceneryView/SceneryInfo.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="scenery-info">
     <section v-if="!timetableOnly">
-      <div class="info-general" v-if="station.generalInfo">
+      <div class="scenery-info-general" v-if="station.generalInfo">
         <scenery-info-icons :station="station" />
 
-        <div class="general-list">
+        <div class="scenery-general-list">
           <span>
             <b>{{ $t('availability.title') }}:</b> {{ $t(`availability.${station.generalInfo.availability}`) }}
 
@@ -130,11 +130,11 @@ h3.section-header {
   margin-top: 1em;
 }
 
-.info-general {
+.scenery-info-general {
   margin-top: 1em;
 }
 
-.general-list {
+.scenery-general-list {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;

src/components/TrainsView/TrainInfo.vue

@@ -14,12 +14,11 @@
           <span v-if="train.timetableData">{{ train.timetableData.category }}&nbsp;</span>
           <span class="train-number">{{ train.trainNo }}</span>
         </strong>
-        <span>|</span>
-        <span>{{ train.driverName }}</span>
-        <span>|</span>
-        <b :style="calculateTextExpStyle(train.driverLevel, train.isSupporter)">
-          {{ train.driverLevel < 2 ? 'L' : `${train.driverLevel} lvl` }}
+        <span>&bull;</span>
+        <b class="level-badge driver" :style="calculateExpStyle(train.driverLevel, train.isSupporter)">
+          {{ train.driverLevel < 2 ? 'L' : `${train.driverLevel}` }}
         </b>
+        <span>{{ train.driverName }}</span>
       </div>
 
       <div class="timetable_route" v-if="train.timetableData">
@@ -117,6 +116,8 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 @import '../../styles/responsive.scss';
+@import '../../styles/badge.scss';
+
 
 .image-warning {
   height: 1em;
@@ -172,6 +173,7 @@ export default defineComponent({
   flex-wrap: wrap;
 
   gap: 0.25em;
+  margin-right: 1.5em;
 }
 .train-status-badges {
   display: flex;

src/styles/badge.scss

@@ -1,28 +1,58 @@
-.badge {
-  font-weight: 600;
-
-  display: inline-block;
-  padding: 0;
-
-  background: #585858;
-
-  margin: 0.25em;
-
-  span {
-    display: inline-block;
-    padding: 0.2em 0.4em;
-  }
-
-  &-none {
-    font-weight: 600;
-
-    padding: 0.2em 0.4em;
-    background: firebrick;
-
-    text-align: center;
-
-    @include smallScreen() {
-      font-size: 1em;
-    }
-  }
-}
+.badge {
+  font-weight: 600;
+
+  display: inline-block;
+  padding: 0;
+
+  background: #585858;
+
+  margin: 0.25em;
+
+  span {
+    display: inline-block;
+    padding: 0.2em 0.4em;
+  }
+
+  &-none {
+    font-weight: 600;
+
+    padding: 0.2em 0.4em;
+    background: firebrick;
+
+    text-align: center;
+
+    @include smallScreen() {
+      font-size: 1em;
+    }
+  }
+}
+
+.level-badge {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 0.9em;
+
+  &.driver {
+    border-radius: 50%;
+    width: 1.7em;
+    height: 1.7em;
+  }
+
+  &.dispatcher {
+    border-radius: 0.25em;
+
+    width: 1.6em;
+    height: 1.6em;
+  }
+}
+
+.region-badge {
+  padding: 0 0.5em;
+  border-radius: 0.5em;
+  font-weight: bold;
+
+  &.eu {
+    background-color: forestgreen;
+  }
+}