From fb2348e77484d06198f171f703a78d56a9c25174 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Sat, 23 Mar 2024 23:55:18 +0100
Subject: [PATCH] hotfixy designu

---
 .../JournalTimetables/TimetableGeneral.vue    | 25 +++++++++++--------
 .../TimetableHistoryList.vue                  |  2 +-
 src/components/PopUp/PopUp.vue                |  3 ++-
 src/components/TrainsView/TrainInfo.vue       | 22 ++++++++--------
 src/components/TrainsView/TrainTable.vue      |  6 ++---
 src/locales/en.json                           |  5 +++-
 src/locales/pl.json                           |  5 +++-
 7 files changed, 39 insertions(+), 29 deletions(-)

diff --git a/src/components/JournalView/JournalTimetables/TimetableGeneral.vue b/src/components/JournalView/JournalTimetables/TimetableGeneral.vue
index 885fd2a..00fa55a 100644
--- a/src/components/JournalView/JournalTimetables/TimetableGeneral.vue
+++ b/src/components/JournalView/JournalTimetables/TimetableGeneral.vue
@@ -35,16 +35,14 @@
         {{ timetable.driverName }}
       </strong>
 
-      <span v-if="timetable.terminated == false">
-        &bull;
-        <button
-          class="btn--image btn-timetable"
-          @click.stop="showTimetable(timetable, $event.currentTarget)"
-        >
-          <img src="/images/icon-train.svg" alt="" />
-          RJ ONLINE
-        </button>
-      </span>
+      <button
+        v-if="timetable.terminated == false"
+        class="btn--image btn--action btn-timetable"
+        @click.stop="showTimetable(timetable, $event.currentTarget)"
+      >
+        <img src="/images/icon-train.svg" alt="" />
+        {{ $t('journal.timetable-online-button') }}
+      </button>
     </span>
 
     <span class="general-time">
@@ -156,7 +154,12 @@ export default defineComponent({
 
 .btn-timetable {
   display: inline-block;
-  padding: 0;
+  padding: 0.1em 0.4em;
+  margin-left: 0.5em;
+
+  img {
+    vertical-align: top;
+  }
 }
 
 @include smallScreen {
diff --git a/src/components/JournalView/JournalTimetables/TimetableHistoryList.vue b/src/components/JournalView/JournalTimetables/TimetableHistoryList.vue
index 01de44a..2671486 100644
--- a/src/components/JournalView/JournalTimetables/TimetableHistoryList.vue
+++ b/src/components/JournalView/JournalTimetables/TimetableHistoryList.vue
@@ -5,7 +5,7 @@
         v-for="{ timetable, showExtraInfo } in computedTimetableHistory"
         class="journal_item"
         :key="timetable.id"
-        @click="showExtraInfo.value = !showExtraInfo.value"
+        @click.stop.prevent="showExtraInfo.value = !showExtraInfo.value"
       >
         <div class="journal_item-info">
           <!-- General -->
diff --git a/src/components/PopUp/PopUp.vue b/src/components/PopUp/PopUp.vue
index 3023551..69beef7 100644
--- a/src/components/PopUp/PopUp.vue
+++ b/src/components/PopUp/PopUp.vue
@@ -34,7 +34,8 @@ export default defineComponent({
           const isOutside =
             val.y + previewEl.getBoundingClientRect().height > window.innerHeight + window.scrollY;
 
-          previewEl.style.transform = `translate(-50%, calc(${
+          // previewEl.style.transform = `translate(-${~~((val.x / window.innerWidth) * 100)}%, calc(${isOutside ? '-100% - 1.5rem' : '1.5rem'}))`;
+          previewEl.style.transform = `translate(-${~~((val.x / window.innerWidth) * 100)}%, calc(${
             isOutside ? '-100% - 1.5rem' : '1.5rem'
           }))`;
         });
diff --git a/src/components/TrainsView/TrainInfo.vue b/src/components/TrainsView/TrainInfo.vue
index 3a4bb3f..3bf240f 100644
--- a/src/components/TrainsView/TrainInfo.vue
+++ b/src/components/TrainsView/TrainInfo.vue
@@ -45,13 +45,14 @@
 
           <span v-else>{{ train.driverName }}</span>
 
-          <span v-if="extended">
-            &bull;
-            <button class="btn--image btn--text btn-timetable" @click="navigateToJournal">
-              <img src="/images/icon-train.svg" alt="" />
-              DZIENNIK
-            </button>
-          </span>
+          <button
+            class="btn--image btn--action btn-timetable"
+            @click="navigateToJournal"
+            v-if="extended"
+          >
+            <img src="/images/icon-train.svg" alt="" />
+            {{ $t('trains.journal-button') }}
+          </button>
         </div>
       </div>
 
@@ -182,8 +183,8 @@ export default defineComponent({
 
 .image-warning {
   height: 1em;
-
   margin-left: 0.5em;
+  vertical-align: middle;
 }
 
 .train-stats {
@@ -215,7 +216,8 @@ export default defineComponent({
 
 .btn-timetable {
   display: inline-block;
-  padding: 0;
+  padding: 0.25em;
+  margin-left: 0.5em;
 }
 
 .timetable-id {
@@ -293,8 +295,6 @@ export default defineComponent({
     grid-template-columns: 1fr;
     gap: 1em 0;
     text-align: center;
-
-    font-size: 1.15em;
   }
 
   .general-info,
diff --git a/src/components/TrainsView/TrainTable.vue b/src/components/TrainsView/TrainTable.vue
index 2e7e280..c6ac691 100644
--- a/src/components/TrainsView/TrainTable.vue
+++ b/src/components/TrainsView/TrainTable.vue
@@ -1,13 +1,13 @@
 <template>
   <transition name="status-anim" mode="out-in" tag="div" class="train-table">
     <div :key="apiStore.dataStatuses.connection">
-      <div class="table-info" key="offline" v-if="store.isOffline">
+      <div class="table-warning" key="offline" v-if="store.isOffline">
         {{ $t('app.offline') }}
       </div>
 
       <Loading v-else-if="apiStore.dataStatuses.connection == Status.Loading" key="loading" />
 
-      <div class="table-info" key="no-trains" v-else-if="trains.length == 0">
+      <div class="table-warning" key="no-trains" v-else-if="trains.length == 0">
         {{ $t('trains.no-trains') }}
       </div>
 
@@ -105,7 +105,7 @@ export default defineComponent({
   overflow-x: hidden;
 }
 
-.table-info {
+.table-warning {
   text-align: center;
 
   padding: 1em 0;
diff --git a/src/locales/en.json b/src/locales/en.json
index 661cd60..9e71137 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -319,7 +319,9 @@
     "last-seen-ago": "since {minutes} minutes",
 
     "scenery-offline": "Offline ride",
-    "timeout": "An error occured while trying to refresh SWDR timetable data!"
+    "timeout": "An error occured while trying to refresh SWDR timetable data!",
+
+    "journal-button": "DRIVER'S JOURNAL"
   },
   "train-stats": {
     "stats-button": "STATISTICS",
@@ -355,6 +357,7 @@
     "timetable-active": "ACTIVE",
     "timetable-fulfilled": "FULFILLED",
     "timetable-abandoned": "ABANDONED",
+    "timetable-online-button": "ONLINE TIMETABLE",
 
     "online-since": "ONLINE SINCE",
     "duty-lasted": "The duty lasted",
diff --git a/src/locales/pl.json b/src/locales/pl.json
index 5b7b3c7..f0e0aff 100644
--- a/src/locales/pl.json
+++ b/src/locales/pl.json
@@ -299,7 +299,9 @@
 
     "scenery-offline": "Przejazd offline",
 
-    "timeout": "Wystąpił problem z aktualizacją rozkładów jazdy z SWDR"
+    "timeout": "Wystąpił problem z aktualizacją rozkładów jazdy z SWDR",
+
+    "journal-button": "DZIENNIK MASZYNISTY"
   },
   "train-stats": {
     "stats-button": "STATYSTYKI",
@@ -341,6 +343,7 @@
     "timetable-active": "AKTYWNY",
     "timetable-fulfilled": "WYPEŁNIONY",
     "timetable-abandoned": "PORZUCONY",
+    "timetable-online-button": "RJ ONLINE",
 
     "stock-info": "DODATKOWE INFORMACJE",
     "stock-length": "Długość",