design: badge poziomów

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;
   }