From 300e70dcfe1d42fb32befe22c29b5b153f1d6a07 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Thu, 15 Aug 2024 15:01:36 +0200
Subject: [PATCH] chore: journal timetables buttons alignment

---
 .../JournalTimetables/TimetableDetails.vue    | 20 +++++++++++++++++++
 .../JournalTimetables/TimetableGeneral.vue    | 18 +----------------
 2 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/src/components/JournalView/JournalTimetables/TimetableDetails.vue b/src/components/JournalView/JournalTimetables/TimetableDetails.vue
index a9964f4..305cbe1 100644
--- a/src/components/JournalView/JournalTimetables/TimetableDetails.vue
+++ b/src/components/JournalView/JournalTimetables/TimetableDetails.vue
@@ -5,6 +5,15 @@
         <b>{{ $t('journal.stock-info') }}</b>
         <img :src="`/images/icon-arrow-${showExtraInfo ? 'asc' : 'desc'}.svg`" alt="Arrow icon" />
       </button>
+
+      <button
+        v-if="timetable.terminated == false"
+        class="btn--action btn-timetable"
+        @click.stop="showTimetable(timetable, $event.currentTarget)"
+      >
+        <img src="/images/icon-train.svg" alt="train icon" />
+        <b>{{ $t('journal.timetable-online-button') }}</b>
+      </button>
     </div>
 
     <div class="details-body" v-if="timetable.stockString && timetable.stockMass && showExtraInfo">
@@ -77,9 +86,13 @@
 import { PropType, defineComponent } from 'vue';
 import StockList from '../../Global/StockList.vue';
 import { API } from '../../../typings/api';
+import modalTrainMixin from '../../../mixins/modalTrainMixin';
 
 export default defineComponent({
   components: { StockList },
+  
+  mixins: [modalTrainMixin],
+
   props: {
     showExtraInfo: {
       type: Boolean,
@@ -118,6 +131,12 @@ export default defineComponent({
     onImageError(e: Event) {
       const imageEl = e.target as HTMLImageElement;
       imageEl.src = '/images/icon-unknown.png';
+    },
+
+    showTimetable(timetable: API.TimetableHistory.Data, target: EventTarget | null) {
+      if (timetable?.terminated) return;
+
+      this.selectModalTrainById(`${timetable.driverName}${timetable.trainNo}`, target);
     }
   }
 });
@@ -134,6 +153,7 @@ export default defineComponent({
 
 .details-actions {
   display: flex;
+  gap: 0.5em;
 
   button img {
     height: 1.25em;
diff --git a/src/components/JournalView/JournalTimetables/TimetableGeneral.vue b/src/components/JournalView/JournalTimetables/TimetableGeneral.vue
index 47c84ee..ce37587 100644
--- a/src/components/JournalView/JournalTimetables/TimetableGeneral.vue
+++ b/src/components/JournalView/JournalTimetables/TimetableGeneral.vue
@@ -66,15 +66,6 @@
               : `${$t('journal.timetable-abandoned')} ${localeTime(timetable.endDate, $i18n.locale)}`
         }}
       </b>
-
-      <button
-        v-if="timetable.terminated == false"
-        class="btn--action btn-timetable"
-        @click.stop="showTimetable(timetable, $event.currentTarget)"
-      >
-        <img src="/images/icon-train.svg" alt="train icon" />
-        <b>{{ $t('journal.timetable-online-button') }}</b>
-      </button>
     </span>
   </div>
 </template>
@@ -104,14 +95,6 @@ export default defineComponent({
       required: true
     }
   },
-
-  methods: {
-    showTimetable(timetable: API.TimetableHistory.Data, target: EventTarget | null) {
-      if (timetable?.terminated) return;
-
-      this.selectModalTrainById(`${timetable.driverName}${timetable.trainNo}`, target);
-    }
-  }
 });
 </script>
 
@@ -180,6 +163,7 @@ export default defineComponent({
 
 @include smallScreen {
   .item-general {
+    flex-direction: column;
     justify-content: center;
   }
 }