zmiana rozłożenia elementów w modalu aktywnego pociągu

src/components/TrainsView/TrainInfo.vue

@@ -1,7 +1,8 @@
 <template>
-  <div class="train-info">
+  <div class="train-info" :data-extended="extended">
     <section class="train-general">
-      <div class="general-info">
+      <div class="general-top-bar">
+        <div>
           <b class="warning-timeout" v-if="train.isTimeout" :title="$t('trains.timeout')">?</b>
           <span class="timetable-id" v-if="train.timetableData">
             #{{ train.timetableData.timetableId }}
@@ -11,10 +12,18 @@
             class="timetable-warnings"
             v-if="train.timetableData?.TWR || train.timetableData?.SKR"
           >
-          <span class="train-badge twr" v-if="train.timetableData?.TWR" :title="$t('general.TWR')">
+            <span
+              class="train-badge twr"
+              v-if="train.timetableData?.TWR"
+              :title="$t('general.TWR')"
+            >
               TWR
             </span>
-          <span class="train-badge skr" v-if="train.timetableData?.SKR" :title="$t('general.SKR')">
+            <span
+              class="train-badge skr"
+              v-if="train.timetableData?.SKR"
+              :title="$t('general.SKR')"
+            >
               SKR
             </span>
           </span>
@@ -44,14 +53,19 @@
             </b>
 
             <span v-else>{{ train.driverName }}</span>
+          </div>
+        </div>
 
-          <button
+        <div v-if="extended">
-            class="btn--image btn--action btn-timetable"
+          <button class="btn--image btn--action btn-timetable" @click="navigateToJournal">
-            @click="navigateToJournal"
+            <img src="/images/icon-train.svg" alt="train icon" />
-            v-if="extended"
+            <span>
-          >
-            <img src="/images/icon-train.svg" alt="" />
               {{ $t('trains.journal-button') }}
+            </span>
+          </button>
+
+          <button class="btn--image btn--action btn-exit" @click="closeModal">
+            <img src="/images/icon-exit.svg" alt="modal exit icon" />
           </button>
         </div>
       </div>
@@ -103,12 +117,24 @@
         </div>
       </div>
 
+      <div v-if="extended">
+        <span> {{ train.length }}m</span>
+        &bull;
+        <span> {{ (train.mass / 1000).toFixed(1) }}t</span>
+        <span v-if="train.stockList.length > 1">
+          &bull;
+          {{ $t('trains.cars') }}: {{ train.stockList.length - 1 }}
+        </span>
+        |
+        <span>{{ train.speed }}km/h</span>
+      </div>
+
       <div class="driver_position text--grayed" style="margin-top: 0.25em">
         {{ displayTrainPosition(train) }}
       </div>
     </section>
 
-    <section class="train-stats">
+    <section class="train-stats" v-if="!extended">
       <StockList :trainStockList="train.stockList" :tractionOnly="true" />
 
       <div>
@@ -203,6 +229,10 @@ export default defineComponent({
   grid-template-columns: 2fr 1fr;
   grid-template-rows: 1fr;
 
+  &[data-extended='true'] {
+    grid-template-columns: 1fr;
+  }
+
   padding: 1em;
 
   background-color: #1a1a1a;
@@ -214,12 +244,6 @@ export default defineComponent({
   vertical-align: text-bottom;
 }
 
-.btn-timetable {
-  display: inline-block;
-  padding: 0.25em;
-  margin-left: 0.5em;
-}
-
 .timetable-id {
   color: #d2d2d2;
 }
@@ -243,14 +267,27 @@ export default defineComponent({
   font-size: 0.8em;
 }
 
-.general-info {
+.general-top-bar {
+  display: flex;
+  justify-content: space-between;
+
+  & > div {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
 
     gap: 0.25em;
-  margin-right: 1.5em;
   }
+}
+
+.btn-timetable {
+  padding: 0.25em;
+}
+
+.btn-exit {
+  padding: 0.25em;
+}
+
 .general-status {
   display: flex;
   align-items: center;

src/components/TrainsView/TrainModal.vue

@@ -2,10 +2,6 @@
   <div class="train-modal" v-if="chosenTrain" @keydown.esc="closeModal">
     <div class="modal_background" @click="closeModal"></div>
     <div class="modal_content" ref="content" tabindex="0">
-      <button class="btn exit" @click="closeModal">
-        <img src="/images/icon-exit.svg" alt="close card" />
-      </button>
-
       <TrainInfo :train="chosenTrain" :extended="true" ref="trainInfo" />
       <TrainSchedule :train="chosenTrain" tabindex="0" />
     </div>
@@ -49,23 +45,6 @@ export default defineComponent({
   }
 }
 
-.exit {
-  position: absolute;
-  top: 0;
-  right: 0;
-
-  margin: 0.5em 1em;
-
-  padding: 0.25em;
-
-  z-index: 201;
-
-  img {
-    width: 1.5rem;
-    vertical-align: middle;
-  }
-}
-
 .train-modal {
   position: fixed;
   top: 0;