Widok pociągów: nowe odznaki statusów

src/components/Global/TrainModal.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="card-dimmer"></div>
-  <div class="train-modal" v-click-outside="closeModal" @keydown.esc="closeModal"  >
+  <div class="train-modal" v-click-outside="closeModal" @keydown.esc="closeModal">
-    <button class="btn exit" @click="closeModal" >
+    <button class="btn exit" @click="closeModal">
       <img :src="icons.exit" alt="close card" />
     </button>
 
@@ -40,7 +40,6 @@ export default defineComponent({
 
   activated() {
     this.$nextTick(() => {
-      
       (this.$refs['content'] as HTMLElement).focus();
     });
   },
@@ -60,11 +59,12 @@ export default defineComponent({
 .exit {
   position: absolute;
   top: 0;
-
   right: 0;
+
   margin: 1em 2em;
 
-  background-color: white;
+  background-color: #00000077;
+  outline: 2px solid white;
   padding: 0.25em;
   border-radius: 50%;
 
@@ -73,9 +73,6 @@ export default defineComponent({
   img {
     width: 1.5rem;
     vertical-align: middle;
-
-    filter: invert(100%);
-    -moz-filter: invert(100%);
   }
 }
 
@@ -101,4 +98,17 @@ export default defineComponent({
   overflow: auto;
   max-height: 95vh;
 }
+
+@include smallScreen {
+  .exit {
+    top: auto;
+    bottom: 0;
+
+    margin: 1em;
+
+    img {
+      width: 1.75rem;
+    }
+  }
+}
 </style>

src/components/TrainsView/TrainInfo.vue

@@ -1,91 +1,83 @@
 <template>
   <div class="train-info" tabindex="0">
     <section class="train-route">
-      <span>
+      <div class="train_general">
-        <div>
+        <span>
-          <span>
+          <span class="timetable-id" v-if="train.timetableData">#{{ train.timetableData.timetableId }}</span>
-            <span class="timetable-id" v-if="train.timetableData">#{{ train.timetableData.timetableId }}</span>
 
-            <span class="timetable_warnings">
+          <span class="timetable_warnings">
-              <span class="warning twr" v-if="train.timetableData?.TWR">TWR</span>
+            <span class="train-badge twr" v-if="train.timetableData?.TWR">TWR</span>
-              <span class="warning skr" v-if="train.timetableData?.SKR">SKR</span>
+            <span class="train-badge skr" v-if="train.timetableData?.SKR">SKR</span>
-            </span>
-            <strong v-if="train.timetableData">{{ train.timetableData.category }}&nbsp;</strong>
-            <strong>{{ train.trainNo }}</strong>
-            <span>&nbsp;| {{ train.driverName }}&nbsp;</span>
           </span>
+          <strong v-if="train.timetableData">{{ train.timetableData.category }}&nbsp;</strong>
+          <strong>{{ train.trainNo }}</strong>
+          <span>&nbsp;| {{ train.driverName }}&nbsp;</span>
+        </span>
+      </div>
 
-          <img
+      <div class="timetable_route" v-if="train.timetableData">
-            class="image-offline"
+        <strong>{{ train.timetableData.route.replace('|', ' - ') }}</strong>
-            style="height: 1em"
+        <img
-            v-if="!train.currentStationHash"
+          v-if="getSceneriesWithComments(train.timetableData).length > 0"
-            :src="icons.offline"
+          class="image-warning"
-            alt="offline"
+          :src="icons.warning"
-            :title="$t('trains.offline')"
+          :title="`${$t('trains.timetable-comments')} (${getSceneriesWithComments(train.timetableData)})`"
-          />
+        />
+      </div>
+
+      <hr style="margin: 0.25em 0" />
+
+      <div class="timetable_stops" v-if="train.timetableData">
+        <span v-if="train.timetableData.followingStops.length > 2">
+          {{ $t('trains.via-title') }}
+          <span v-html="displayStopList(train.timetableData.followingStops)"></span>
+        </span>
+      </div>
+
+      <div class="timetable_progress" style="margin-top: 0.5em" v-if="train.timetableData">
+        <!-- <span> </span> -->
+        <span class="timetable_progress-bar">
+          <!-- {{ confirmedPercentage(train.timetableData.followingStops) }}%&nbsp; -->
+          <span class="bar-bg"></span>
+          <span
+            class="bar-fg"
+            :style="{ width: `${Math.floor(confirmedPercentage(train.timetableData.followingStops))}%` }"
+          ></span>
+        </span>
+
+        <span class="timetable_progress-distance">
+          &nbsp; {{ currentDistance(train.timetableData.followingStops) }} km /
+          <span class="text--primary"> {{ train.timetableData.routeDistance }} km </span>
+          |
+          <span v-html="currentDelay(train.timetableData.followingStops)"></span>
+        </span>
+
+        <div class="train-status-badges">
+          <div v-if="!train.currentStationHash" class="train-badge offline">{{ $t('trains.scenery-offline') }}</div>
+          <div v-if="!train.online" class="train-badge offline">Offline {{ lastSeenMessage(train.lastSeen) }}</div>
         </div>
+      </div>
 
-        <div class="timetable_route" v-if="train.timetableData">
+      <div class="driver_position text--grayed" style="margin-top: 0.25em">
-          <strong>{{ train.timetableData.route.replace('|', ' - ') }}</strong>
+        <span v-if="train.currentStationHash">
-          <img
+          {{ $t('trains.current-scenery') }} <span>{{ train['currentStationName'] }}&nbsp;</span>
-            v-if="getSceneriesWithComments(train.timetableData).length > 0"
+        </span>
-            class="image-warning"
-            :src="icons.warning"
-            :title="`${$t('trains.timetable-comments')} (${getSceneriesWithComments(train.timetableData)})`"
-          />
-        </div>
 
-        <hr style="margin: 0.25em 0" />
+        <span v-else>
+          {{ $t('trains.current-scenery') }}
+          <span>{{ train['currentStationName'].replace(/.[a-zA-Z0-9]+.sc/, '') }} (offline)&nbsp;</span>
+        </span>
 
-        <div class="timetable_stops" v-if="train.timetableData">
+        <span v-if="train.signal">
-          <span v-if="train.timetableData.followingStops.length > 2">
+          {{ $t('trains.current-signal') }} <span>{{ train['signal'] }}&nbsp;</span>
-            {{ $t('trains.via-title') }}
+        </span>
-            <span v-html="displayStopList(train.timetableData.followingStops)"></span>
-          </span>
-        </div>
 
-        <div class="timetable_progress" style="margin-top: 0.5em" v-if="train.timetableData">
+        <span v-if="train.connectedTrack">
-          <!-- <span> </span> -->
+          {{ $t('trains.current-track') }} <span>{{ train['connectedTrack'] }}&nbsp;</span>
-          <span class="timetable_progress-bar">
+        </span>
-            <!-- {{ confirmedPercentage(train.timetableData.followingStops) }}%&nbsp; -->
-            <span class="bar-bg"></span>
-            <span
-              class="bar-fg"
-              :style="{ width: `${Math.floor(confirmedPercentage(train.timetableData.followingStops))}%` }"
-            ></span>
-          </span>
 
-          <span>
+        <span v-if="train.distance">({{ displayDistance(train.distance) }})</span>
-            &nbsp; {{ currentDistance(train.timetableData.followingStops) }} km /
+      </div>
-            <span class="text--primary"> {{ train.timetableData.routeDistance }} km </span>
-            |
-            <span v-html="currentDelay(train.timetableData.followingStops)"></span>
-          </span>
-        </div>
-
-        <div v-if="!train.online" style="color: salmon">Offline - {{ lastSeenMessage(train.lastSeen) }}</div>
-
-        <div class="driver_position text--grayed" style="margin-top: 0.25em">
-          <span v-if="train.currentStationHash">
-            {{ $t('trains.current-scenery') }} <span>{{ train['currentStationName'] }}&nbsp;</span>
-          </span>
-
-          <span v-else>
-            {{ $t('trains.current-scenery') }}
-            <span>{{ train['currentStationName'].replace(/.[a-zA-Z0-9]+.sc/, '') }} (offline)&nbsp;</span>
-          </span>
-
-          <span v-if="train.signal">
-            {{ $t('trains.current-signal') }} <span>{{ train['signal'] }}&nbsp;</span>
-          </span>
-
-          <span v-if="train.connectedTrack">
-            {{ $t('trains.current-track') }} <span>{{ train['connectedTrack'] }}&nbsp;</span>
-          </span>
-
-          <span v-if="train.distance">({{ displayDistance(train.distance) }})</span>
-        </div>
-      </span>
     </section>
 
     <section class="train-stats">
@@ -134,7 +126,6 @@ export default defineComponent({
   data: () => ({
     icons: {
       warning: require('@/assets/icon-warning.svg'),
-      offline: require('@/assets/icon-offline.svg'),
     },
   }),
 });
@@ -143,8 +134,7 @@ export default defineComponent({
 <style lang="scss" scoped>
 @import '../../styles/responsive.scss';
 
-.image-warning,
+.image-warning {
-.image-offline {
   height: 1em;
 
   margin-left: 0.5em;
@@ -187,6 +177,38 @@ export default defineComponent({
   font-size: 0.75em;
 }
 
+.train_general {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.train-status-badges {
+  display: flex;
+  flex-wrap: wrap;
+
+}
+
+.train-badge {
+  padding: 0.15em 0.35em;
+  margin-right: 0.3em;
+
+  font-weight: bold;
+
+  font-size: 0.9em;
+
+  &.twr {
+    background-color: var(--clr-twr);
+  }
+
+  &.skr {
+    background-color: var(--clr-skr);
+  }
+
+  &.offline {
+    background-color: #b83b2d;
+  }
+}
+
 .timetable_route {
   display: flex;
   align-items: center;
@@ -196,28 +218,13 @@ export default defineComponent({
 
 .timetable_warnings {
   color: black;
-
-  .warning {
-    padding: 0.1em 0.3em;
-    margin-right: 0.3em;
-    border-radius: 1em;
-
-    font-weight: bold;
-
-    &.twr {
-      background: var(--clr-twr);
-    }
-
-    &.skr {
-      background: var(--clr-skr);
-    }
-  }
 }
 
 .timetable_progress {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
+
 }
 
 .timetable_progress-bar {
@@ -245,6 +252,10 @@ export default defineComponent({
   }
 }
 
+.timetable_progress-distance {
+  margin-right: 0.25em;
+}
+
 .comments {
   display: flex;
   align-items: center;
@@ -275,6 +286,14 @@ export default defineComponent({
     }
   }
 
+  .train_general {
+    justify-content: center;
+  }
+
+  .train-status-badges {
+    justify-content: center;
+  }
+
   .timetable_route {
     justify-content: center;
   }

src/locales/en.json

@@ -185,9 +185,11 @@
     "comment": "Exploitation comments for: ",
     "table-limit": "For performance reasons there's a limit of 10 trains shown at the same time.",
 
-    "last-seen-now": "last seen: just now",
+    "last-seen-now": "since now",
-    "last-seen-min": "last seen: one minute ago",
+    "last-seen-min": "since one minute",
-    "last-seen-ago": "last seen: {minutes} mins ago"
+    "last-seen-ago": "since {minutes} minutes",
+
+    "scenery-offline": "Offline ride"
   },
   "journal": {
     "title": "DISPATCHER HISTORY",

src/locales/pl.json

@@ -186,9 +186,11 @@
     "comment": "Uwagi eksploatacyjne dla: ",
     "table-limit": "Dla płynności działania strony pokazanych jest tylko 10 pociągów zgodnie z wybranymi filtrami.",
 
-    "last-seen-now": "ostatnio widziany: przed chwilą",
+    "last-seen-now": "od niedawna",
-    "last-seen-min": "ostatnio widziany: minutę temu",
+    "last-seen-min": "od minuty",
-    "last-seen-ago": "ostatnio widziany: {minutes} min. temu"
+    "last-seen-ago": "od {minutes} minut",
+
+    "scenery-offline": "Przejazd offline"
   },
   "journal": {
     "title": "HISTORIA DYŻURÓW",