Dodano górny pasek z informacjami dla widoku RJ

src/components/Global/TrainModal.vue

@@ -1,18 +1,36 @@
 <template>
   <div class="card-dimmer"></div>
   <div class="train-modal" v-click-outside="closeModal" @keydown.esc="closeModal">
+    <transition name="top-info-bar-anim">
+      <div class="top-info-bar" v-if="isTopBarVisible">
+        <span v-if="chosenTrain.timetableData">
+          <b class="text--primary">{{ chosenTrain.timetableData.category }} {{ chosenTrain.trainNo }}</b>
+          {{ chosenTrain.driverName }} &bull;
+          <b>{{ chosenTrain.timetableData.route.replace('|', ' > ') }}</b>
+          &bull;
+          {{ currentDistance(chosenTrain.timetableData.followingStops) }} km /
+          <span class="text--primary">{{ chosenTrain.timetableData.routeDistance }} km</span>
+          &bull;
+          <span class="text--grayed">{{ displayTrainPosition(chosenTrain) }}</span>
+          &bull;
+          {{ chosenTrain.speed }}km/h
+        </span>
+      </div>
+    </transition>
+
     <button class="btn exit" @click="closeModal">
       <img :src="icons.exit" alt="close card" />
     </button>
 
     <div class="content" tabindex="0" ref="content">
-      <TrainInfo :train="chosenTrain" :extended="false" />
+      <TrainInfo :train="chosenTrain" :extended="false" ref="trainInfo" />
       <TrainSchedule :train="chosenTrain" tabindex="0" />
     </div>
   </div>
 </template>
 
 <script lang="ts">
+import trainInfoMixin from '@/mixins/trainInfoMixin';
 import Train from '@/scripts/interfaces/Train';
 import { defineComponent, PropType } from 'vue';
 import TrainInfo from '../TrainsView/TrainInfo.vue';
@@ -20,11 +38,14 @@ import TrainSchedule from '../TrainsView/TrainSchedule.vue';
 
 export default defineComponent({
   components: { TrainInfo, TrainSchedule },
+  mixins: [trainInfoMixin],
 
   emits: ['closeModal'],
 
   data() {
     return {
+      isTopBarVisible: false,
+
       icons: {
         exit: require('@/assets/icon-exit.svg'),
       },
@@ -39,15 +60,32 @@ export default defineComponent({
   },
 
   activated() {
+    const contentEl = this.$refs['content'] as HTMLElement;
+
     this.$nextTick(() => {
-      (this.$refs['content'] as HTMLElement).focus();
+      contentEl.focus();
     });
+
+
+    contentEl.addEventListener('scroll', this.handleContentScroll);
+  },
+
+  deactivated() {
+    (this.$refs['content'] as HTMLElement).removeEventListener('scroll', this.handleContentScroll);
+    this.isTopBarVisible = false;
   },
 
   methods: {
     closeModal() {
       this.$emit('closeModal');
     },
+
+    handleContentScroll(e: Event) {
+      const trainInfoCompHeight: number = (this.$refs['trainInfo'] as any).$el.getBoundingClientRect().height;
+
+      const posTop = (e.target as HTMLElement).scrollTop;
+      this.isTopBarVisible = posTop > trainInfoCompHeight;
+    },
   },
 });
 </script>
@@ -56,6 +94,19 @@ export default defineComponent({
 @import '../../styles/responsive.scss';
 @import '../../styles/card.scss';
 
+.top-info-bar-anim {
+  &-enter-active,
+  &-leave-active {
+    transition: all 150ms ease-in-out;
+  }
+
+  &-enter-from,
+  &-leave-to {
+    transform: translate(-50%, -50%) scale(0.8);
+    opacity: 0;
+  }
+}
+
 .exit {
   position: absolute;
   top: 0;
@@ -63,7 +114,7 @@ export default defineComponent({
 
   margin: 1em 2em;
 
-  background-color: #00000077;
+  background-color: #000000;
   outline: 2px solid white;
   padding: 0.25em;
   border-radius: 50%;
@@ -94,12 +145,30 @@ export default defineComponent({
   overflow: hidden;
 }
 
+.top-info-bar {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 100%;
+
+  padding: 0.5em 1em;
+  padding-right: 4em;
+  text-align: center;
+
+  overflow: hidden;
+
+  z-index: 101;
+
+  background-color: #000000dd;
+}
+
 .content {
   overflow: auto;
   max-height: 95vh;
 }
 
-@include smallScreen {
+@include midScreen {
   .exit {
     top: auto;
     bottom: 0;
@@ -110,5 +179,13 @@ export default defineComponent({
       width: 1.75rem;
     }
   }
+
+  .content {
+    padding-bottom: 3em;
+  }
+
+  .top-info-bar {
+    padding: 0.5em 1em;
+  }
 }
 </style>

src/components/TrainsView/TrainInfo.vue

@@ -59,24 +59,7 @@
       </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>
+          {{ displayTrainPosition(train) }}
       </div>
     </section>
 
@@ -160,14 +143,11 @@ export default defineComponent({
   grid-template-rows: 1fr;
 
   padding: 1em;
+
   background-color: #202020;
   gap: 0.5em;
 }
 
-.driver_position:first-letter {
-  text-transform: capitalize;
-}
-
 .timetable-id {
   margin-right: 0.3em;
   color: #d2d2d2;