Poprawki tooltipów i plakietek statusu pociągów

src/components/TrainsView/TrainTable.vue

@@ -43,7 +43,7 @@
                   </strong>
                 </span>
 
-                <span class="info-route-arrow">
+                <span class="info-route-schedule tooltip">
                   <img
                     :src="
                       showedSchedule === train.timetableData.timetableId
@@ -52,6 +52,12 @@
                     "
                     alt="asc-arrow"
                   />
+
+                  <span>SRJP</span>
+
+                  <span class="tooltip-text">
+                    Wyświetl rozkład jazdy pociągu {{ train.trainNo }}
+                  </span>
                 </span>
               </div>
 
@@ -70,14 +76,20 @@
 
             <div class="info-bottom">
               <span
-                class="info-label user-badge tooltip"
+                class="info-label user-badge"
-                :class="train.stopStatus"
+                :class="train.stopStatus || 'disconnected'"
-                :style="!train.online ? 'color: gray' : ''"
-                v-if="train.stopStatus"
               >
-                {{ train.stopLabel }}
+                <span
+                  class="tooltip"
+                  :style="!train.online ? 'color: gray' : ''"
+                >
+                  <span v-if="train.stopStatus">{{ train.stopLabel }}</span>
+                  <span v-else>Sceneria offline</span>
 
-                <span class="content" v-if="!train.online">Pociąg offline</span>
+                  <span class="tooltip-text" v-if="!train.online">
+                    Pociąg offline
+                  </span>
+                </span>
               </span>
             </div>
           </span>
@@ -279,18 +291,41 @@ export default class TrainTable extends Vue {
   }
 
   &-route {
-    width: 100%;
+    display: flex;
-    font-size: 1.2em;
+    align-items: center;
+
+    font-size: 1.25em;
+    margin-bottom: 10px;
+
+    &-schedule {
+      margin-left: 10px;
+      padding: 0.15em 0.5em;
+
+      font-size: 0.75em;
+
+      background: #1085b3;
+      border-radius: 1em;
 
-    &-arrow img {
-      border: 2px solid white;
       vertical-align: middle;
+
+      img {
+        vertical-align: middle;
+        width: 1.2em;
+      }
+
+      .tooltip-text {
+        font-size: 0.9em;
+        background-color: #1085b3;
+
+        &::after {
+          border-color: #1085b3 transparent transparent transparent;
+        }
+      }
     }
   }
 
   &-stops {
-    margin-top: 0.35em;
+    margin-bottom: 10px;
-    margin-bottom: 1rem;
 
     font-size: 0.75em;
   }

src/styles/global.scss

@@ -19,27 +19,30 @@
 
 .tooltip {
   position: relative;
-  display: inline-block;
-
-  z-index: 5;
   
-  & > .content {
+  & > &-text {
-    visibility: hidden;
+    display: inline-block;
-    width: 120px;
+    width: 150px;
+
+    padding: .5rem .35rem;
     background-color: #830000;
-    color: #fff;
+    border-radius: .5rem;
+    
+    display: inline-block;
+    max-width: 150px;
+    
+    font-size: 1em;
     text-align: center;
-    padding: 5px 0;
+    color: #fff;
-    border-radius: 6px;
+    
-
-    font-size: 1rem;
-
     position: absolute;
-    bottom: 155%;
+    z-index: 1;
-    left: 50%;
+    visibility: hidden;
-    margin-left: -60px;
-
     opacity: 0;
+
+    left: 50%;
+    transform: translate(-50%, calc(-100% - 1rem));
+
     transition: opacity 0.3s;
 
     &::after {
@@ -50,11 +53,15 @@
       margin-left: -5px;
       border-width: 5px;
       border-style: solid;
-      border-color: #aa0000 transparent transparent transparent;
+      border-color: #830000 transparent transparent transparent;
     }
   }
 
-  &:hover > .content {
+  &:hover > &-text {
+    @include smallScreen() {
+      display: none;
+    }
+
     visibility: visible;
     opacity: 1;
   }
@@ -103,6 +110,8 @@ input {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
+
+  -webkit-tap-highlight-color: transparent;
 }
 
 .default-station {

src/styles/user_badge.scss

@@ -3,6 +3,7 @@ $departed: springgreen;
 $stopped: #ffa600;
 $online: gold;
 $terminated: red;
+$disconnected: slategray;
 
 .user-badge {
     border: 1px solid white;
@@ -45,4 +46,8 @@ $terminated: red;
     &.terminated {
         border: 1px solid $terminated;
     }
+
+    &.disconnected {
+        border: 1px solid $disconnected;
+    }
 }