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

src/components/TrainsView/TrainInfo.vue

@@ -1,57 +1,71 @@
 <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">
-        <b class="warning-timeout" v-if="train.isTimeout" :title="$t('trains.timeout')">?</b>
+        <div>
-        <span class="timetable-id" v-if="train.timetableData">
+          <b class="warning-timeout" v-if="train.isTimeout" :title="$t('trains.timeout')">?</b>
-          #{{ train.timetableData.timetableId }}
+          <span class="timetable-id" v-if="train.timetableData">
-        </span>
+            #{{ train.timetableData.timetableId }}
-
-        <span
-          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')">
-            TWR
           </span>
-          <span class="train-badge skr" v-if="train.timetableData?.SKR" :title="$t('general.SKR')">
-            SKR
-          </span>
-        </span>
 
-        <strong>
+          <span
-          <span v-if="train.timetableData" class="text--primary"
+            class="timetable-warnings"
-            >{{ train.timetableData.category }}&nbsp;</span
+            v-if="train.timetableData?.TWR || train.timetableData?.SKR"
           >
-          <span class="train-number">{{ train.trainNo }}</span>
+            <span
-        </strong>
+              class="train-badge twr"
-        <span>&bull;</span>
+              v-if="train.timetableData?.TWR"
-        <b
+              :title="$t('general.TWR')"
-          class="level-badge driver"
+            >
-          :style="calculateExpStyle(train.driverLevel, train.isSupporter)"
+              TWR
-        >
+            </span>
-          {{ train.driverLevel < 2 ? 'L' : `${train.driverLevel}` }}
+            <span
-        </b>
+              class="train-badge skr"
+              v-if="train.timetableData?.SKR"
+              :title="$t('general.SKR')"
+            >
+              SKR
+            </span>
+          </span>
 
-        <div class="train-driver">
+          <strong>
+            <span v-if="train.timetableData" class="text--primary"
+              >{{ train.timetableData.category }}&nbsp;</span
+            >
+            <span class="train-number">{{ train.trainNo }}</span>
+          </strong>
+          <span>&bull;</span>
           <b
-            v-if="apiStore.donatorsData.includes(train.driverName)"
+            class="level-badge driver"
-            data-popup-key="DonatorPopUp"
+            :style="calculateExpStyle(train.driverLevel, train.isSupporter)"
-            :data-popup-content="$t('donations.driver-message')"
           >
-            {{ train.driverName }}
+            {{ train.driverLevel < 2 ? 'L' : `${train.driverLevel}` }}
-            <img src="/images/icon-diamond.svg" alt="donator diamond icon" />
           </b>
 
-          <span v-else>{{ train.driverName }}</span>
+          <div class="train-driver">
+            <b
+              v-if="apiStore.donatorsData.includes(train.driverName)"
+              data-popup-key="DonatorPopUp"
+              :data-popup-content="$t('donations.driver-message')"
+            >
+              {{ train.driverName }}
+              <img src="/images/icon-diamond.svg" alt="donator diamond icon" />
+            </b>
 
-          <button
+            <span v-else>{{ train.driverName }}</span>
-            class="btn--image btn--action btn-timetable"
+          </div>
-            @click="navigateToJournal"
+        </div>
-            v-if="extended"
+
-          >
+        <div v-if="extended">
-            <img src="/images/icon-train.svg" alt="" />
+          <button class="btn--image btn--action btn-timetable" @click="navigateToJournal">
-            {{ $t('trains.journal-button') }}
+            <img src="/images/icon-train.svg" alt="train icon" />
+            <span>
+              {{ $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;
-  align-items: center;
+  justify-content: space-between;
-  flex-wrap: wrap;
 
-  gap: 0.25em;
+  & > div {
-  margin-right: 1.5em;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+
+    gap: 0.25em;
+  }
 }
+
+.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;