Dodano dodatkowe możliwości zamknięcia karty rozkładu jazdy

src/components/TrainsView/TrainInfo.vue

@@ -284,6 +284,8 @@ export default defineComponent({
   &.extended-view {
     grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
     grid-template-rows: 1fr;
+
+    margin-top: 0.5em;
   }
 
   &.simple-view {

src/components/TrainsView/TrainTable.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="train-table">
+  <div class="train-table" @keydown.esc="closeTimetableCard">
     <transition name="anim" mode="out-in">
       <div :key="timetableLoaded">
         <div class="traffic-warning" v-if="distanceLimitExceeded">
@@ -36,7 +36,7 @@
 </template>
 
 <script lang="ts">
-import { Component, computed, ComputedRef, defineComponent, inject, Ref, ref, watch } from '@vue/runtime-core';
+import { computed, ComputedRef, defineComponent, inject, Ref } from '@vue/runtime-core';
 import { useStore } from '@/store';
 
 import defaultVehicleIconsJSON from '@/data/defaultVehicleIcons.json';

src/components/TrainsView/TrainTimetableCard.vue

@@ -1,10 +1,11 @@
 <template>
   <div class="bg-dimmer" @click="close"></div>
   <section class="train-timetable-card card">
-
+    <div class="card-exit" @click="close" @keydown.enter="close" tabindex="0">
+      <img :src="icons.exit" alt="icon-exit" />
+    </div>
 
     <train-info :train="train" />
-
     <train-schedule :followingStops="train.timetableData?.followingStops" ref="card-inner" tabindex="0" @focus="test" />
   </section>
 </template>
@@ -40,9 +41,8 @@ export default defineComponent({
     },
 
     test() {
-      console.log("xd");
-      
-    }
+      console.log('xd');
+    },
   },
 });
 </script>

src/styles/card.scss

@@ -29,10 +29,10 @@
     position: absolute;
     top: 0;
     right: 0;
-    margin: 0.3em 0em;
+    margin: 0.5em 0.5em;
 
     img {
-      width: 1.6em;
+      width: 2em;
     }
 
     cursor: pointer;