Poprawki tooltipów

src/components/SceneryView/SceneryTimetable.vue

@@ -16,7 +16,7 @@
       </a>
     </h3>
 
-    <div class="select-box" v-if="stationInfo.checkpoints">
+    <!-- <div class="select-box" v-if="stationInfo.checkpoints">
       <div class="option-container">
         <div class="option-selected" @click="toggleOptionList">
           <span>{{ selectedOption }}</span>
@@ -35,7 +35,9 @@
           </li>
         </ul>
       </div>
-    </div>
+    </div> -->
+
+    <!-- <select-box></select-box> -->
 
     <span class="timetable-item loading" v-if="dataStatus == 0">{{
       $t("app.loading")
@@ -141,8 +143,9 @@ import { Component, Vue, Prop } from "vue-property-decorator";
 
 import Station from "@/scripts/interfaces/Station";
 import ScheduledTrain from "@/scripts/interfaces/ScheduledTrain";
+import SelectBox from "../Global/SelectBox.vue";
 
-@Component
+@Component({ components: { SelectBox } })
 export default class SceneryTimetable extends Vue {
   @Prop() readonly stationInfo!: Station;
   @Prop() readonly timetableOnly!: boolean;

src/components/TrainsView/TrainTable.vue

@@ -20,17 +20,13 @@
       >
         <div class="wrapper no-timetable" v-if="!train.timetableData">
           <span class="info">
-            <div class="info-main">
+            <div class="info-category">
-              <div class="info-top">
+              <span>
-                <div class="top-category">
+                {{ train.trainNo }} |
-                  <span>
+                <span style="color: gold">
-                    {{ train.trainNo }} |
+                  {{ $t("trains.no-timetable") }}
-                    <span style="color: gold">
+                </span>
-                      {{ $t("trains.no-timetable") }}
+              </span>
-                    </span>
-                  </span>
-                </div>
-              </div>
             </div>
           </span>
 
@@ -114,63 +110,58 @@
         >
           <span class="info">
             <div class="info-main">
-              <div class="info-top">
+              <span class="info-general">
-                <div class="top-category">
+                <span class="warning twr" v-if="train.timetableData.TWR">
-                  <span class="warning twr" v-if="train.timetableData.TWR">
+                  TWR
-                    TWR
+                </span>
+                <span class="warning skr" v-if="train.timetableData.SKR">
+                  SKR
+                </span>
+                <span>
+                  <strong>{{ train.timetableData.category }}</strong>
+                  {{ train.trainNo }} |
+                  <span style="color: gold">
+                    {{ train.timetableData.routeDistance }} km
                   </span>
+                </span>
+              </span>
 
-                  <span class="warning skr" v-if="train.timetableData.SKR">
+              <span class="info-srjp g-tooltip">
-                    SKR
+                <span class="activator">
-                  </span>
+                  SRJP
 
-                  <span>
-                    <strong>{{ train.timetableData.category }}</strong>
-                    {{ train.trainNo }} |
-
-                    <span style="color: gold">
-                      {{ train.timetableData.routeDistance }} km
-                    </span>
-                  </span>
-                </div>
-
-                <div class="top-timetable-btn tooltip">
                   <img
                     :src="
-                      showedSchedule === train.timetableData.timetableId
+                      showedSchedule == train.timetableData.timetableId
                         ? ascSVG
                         : descSVG
                     "
-                    alt="asc-arrow"
+                    alt="arrow-icon"
                   />
-
-                  <span>SRJP</span>
-
-                  <span class="tooltip-text">
-                    {{ $t("trains.detailed-timetable") }} {{ train.trainNo }}
-                  </span>
-                </div>
-              </div>
-
-              <div class="info-route">
-                <span class="info-route-text">
-                  <strong>
-                    {{ train.timetableData.route.replace("|", " - ") }}
-                  </strong>
                 </span>
-              </div>
 
-              <div class="info-stops">
+                <span class="content">
-                <span v-if="train.timetableData.followingStops.length > 2">
+                  {{ $t("trains.detailed-timetable") }} {{ train.trainNo }}
-                  {{ $t("trains.via-title") }}
-
-                  <span
-                    v-html="
-                      generateStopList(train.timetableData.followingStops)
-                    "
-                  ></span>
                 </span>
-              </div>
+              </span>
+            </div>
+
+            <div class="info-route">
+              <span class="info-route-text">
+                <strong>
+                  {{ train.timetableData.route.replace("|", " - ") }}
+                </strong>
+              </span>
+            </div>
+
+            <div class="info-stops">
+              <span v-if="train.timetableData.followingStops.length > 2">
+                {{ $t("trains.via-title") }}
+
+                <span
+                  v-html="generateStopList(train.timetableData.followingStops)"
+                ></span>
+              </span>
             </div>
           </span>
 
@@ -263,9 +254,9 @@
 import { Vue, Component, Prop } from "vue-property-decorator";
 
 import Train from "@/scripts/interfaces/Train";
+import TrainStop from "@/scripts/interfaces/TrainStop";
 
 import TrainSchedule from "@/components/TrainsView/TrainSchedule.vue";
-import TrainStop from "@/scripts/interfaces/TrainStop";
 import { DataStatus } from "@/scripts/enums/DataStatus";
 
 @Component({
@@ -309,8 +300,6 @@ export default class TrainTable extends Vue {
     this.$nextTick(() => {
       const currentEl: HTMLElement = this.$refs[elementId][0];
 
-      console.log(currentEl);
-
       currentEl.scrollIntoView({
         behavior: "smooth",
         block: "nearest",
@@ -370,7 +359,7 @@ export default class TrainTable extends Vue {
   &-list {
     @include smallScreen() {
       width: 100%;
-      overflow: hidden;
+      // overflow-x: hidden;
     }
   }
 
@@ -386,7 +375,7 @@ export default class TrainTable extends Vue {
 
 .wrapper {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
   grid-template-rows: 1fr;
 
   @include smallScreen() {
@@ -395,17 +384,18 @@ export default class TrainTable extends Vue {
 }
 
 .info {
-  display: flex;
+  &-main {
-  flex-direction: column;
-  justify-content: space-between;
-
-  &-top {
     display: flex;
     justify-content: space-between;
     align-items: center;
 
-    div {
+    .info-srjp .activator {
       display: flex;
+      align-items: center;
+
+      background-color: var(--clr-accent);
+      border-radius: 0.5em;
+      padding: 0.1em 0.35em;
     }
   }
 
@@ -422,10 +412,6 @@ export default class TrainTable extends Vue {
     margin-bottom: 10px;
 
     font-size: 0.7em;
-
-    @include smallScreen() {
-      font-size: 0.75em;
-    }
   }
 
   &-bottom {
@@ -454,10 +440,11 @@ export default class TrainTable extends Vue {
 
   &-info {
     margin-bottom: 1em;
+    text-align: center;
+    word-wrap: break-word;
   }
 
   &-name {
-    margin: 0 0.3em;
     font-weight: bold;
   }
 

src/styles/global.scss

@@ -30,43 +30,29 @@ body {
 }
 
 
-.tooltip {
+.g-tooltip {
   position: relative;
 
-  background-color: var(--clr-accent);
+  z-index: 10;
-  padding: .1em .5em;
-  border-radius: 1em;
 
-
+  .content {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  & > &-text {
-    display: inline-block;
-    width: 150px;
-
-
-    font-size: 0.9em;
-
-    background-color: var(--clr-accent);
-
-    padding: .15em .5em;
-    border-radius: 1em;
-    
-    display: inline-block;
-    max-width: 150px;
-    
-    text-align: center;
-    color: #fff;
-    
     position: absolute;
-    z-index: 1;
+    left: 50%;
+    top: 0;
+
+    transform: translate(-50%, -120%);
+
+    z-index: 10;
     visibility: hidden;
     opacity: 0;
 
-    left: 50%;
+    min-width: 150px;
-    transform: translate(-50%, calc(-100% - 1rem));
+
+    background-color: var(--clr-accent);
+    text-align: center;
+    
+    padding: 0.15em;
+    border-radius: .5em;
 
     transition: opacity 0.3s;
 
@@ -80,12 +66,21 @@ body {
       border-style: solid;
       border-color: var(--clr-accent) transparent transparent transparent;
     }
+
+    @include smallScreen() {
+      right: 0;
+      left: 0;
+
+      &::after {
+        left: 75%;
+      }
+    }
   }
 
-  &:hover > &-text {
+  &:hover > .content {
-    @include smallScreen() {
+    // @include smallScreen() {
-      display: none;
+    //   display: none;
-    }
+    // }
 
     visibility: visible;
     opacity: 1;

src/views/SceneryView.vue

@@ -92,7 +92,7 @@ $sceneryBgCol: #333;
 
     display: inline-block;
 
-    font-size: 2em;
+    font-size: 1.5em;
 
     button {
       margin: 1em auto;