hotfixy designu

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 {

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 -->

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'
           }))`;
         });

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,

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;