From 903133fc33350f49b8f600cfc8e773c8d4e8f0a7 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Tue, 7 Jun 2022 11:42:56 +0200
Subject: [PATCH] =?UTF-8?q?Poprawiono=20responsywno=C5=9B=C4=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/StationsView/StationTable.vue | 57 +++++++++++---------
 src/components/TrainsView/TrainSchedule.vue  |  6 +--
 2 files changed, 33 insertions(+), 30 deletions(-)

diff --git a/src/components/StationsView/StationTable.vue b/src/components/StationsView/StationTable.vue
index e5dd5a9..10f527d 100644
--- a/src/components/StationsView/StationTable.vue
+++ b/src/components/StationsView/StationTable.vue
@@ -48,10 +48,7 @@
             @keydown.space="openForumSite($event, station.generalInfo?.url)"
             tabindex="0"
           >
-            <td
-              class="station_name"
-              :class="station.generalInfo?.availability"
-            >
+            <td class="station_name" :class="station.generalInfo?.availability">
               <b v-if="station.generalInfo?.project" style="color: salmon">{{ station.generalInfo.project }}</b>
               {{ station.name }}
             </td>
@@ -144,22 +141,16 @@
               </span>
             </td>
 
-            <td class="station_info">
-              <span v-if="station.generalInfo">
-                <span
-                  class="scenery-icon icon-info"
-                  :class="station.generalInfo.controlType.replace('+', '-')"
-                  :title="$t('desc.control-type') + $t(`controls.${station.generalInfo.controlType}`)"
-                  v-html="getControlTypeAbbrev(station.generalInfo.controlType)"
-                >
-                </span>
-                <!-- <img
-                class="icon-info"
-                v-if="station.generalInfo?.controlType"
-                :src="require(`@/assets/icon-${station.generalInfo.controlType}.svg`)"
-                :alt="station.generalInfo.controlType"
+            <td class="station_info" v-if="station.generalInfo">
+              <span
+                class="scenery-icon icon-info"
+                :class="station.generalInfo.controlType.replace('+', '-')"
                 :title="$t('desc.control-type') + $t(`controls.${station.generalInfo.controlType}`)"
-              /> -->
+                v-html="getControlTypeAbbrev(station.generalInfo.controlType)"
+              >
+              </span>
+
+              <span>
                 <img
                   class="icon-info"
                   v-if="station.generalInfo.SUP"
@@ -167,7 +158,9 @@
                   alt="SUP (RASP-UZK)"
                   :title="$t('desc.SUP')"
                 />
+              </span>
 
+              <span>
                 <img
                   class="icon-info"
                   v-if="station.generalInfo.signalType"
@@ -175,7 +168,9 @@
                   :alt="station.generalInfo.signalType"
                   :title="$t('desc.signals-type') + $t(`signals.${station.generalInfo.signalType}`)"
                 />
+              </span>
 
+              <span>
                 <img
                   class="icon-info"
                   v-if="station.generalInfo && station.generalInfo.routes.sblRouteNames.length > 0"
@@ -184,8 +179,10 @@
                   :title="$t('desc.SBL') + `${station.generalInfo.routes.sblRouteNames.join(',')}`"
                 />
               </span>
+            </td>
 
-              <img v-else class="icon-info" :src="unknownIcon" alt="icon-unknown" :title="$t('desc.unknown')" />
+            <td class="station_info" v-else>
+              <img class="icon-info" :src="unknownIcon" alt="icon-unknown" :title="$t('desc.unknown')" />
             </td>
 
             <td class="station_users" :class="{ inactive: !station.onlineInfo }">
@@ -414,7 +411,8 @@ tr.station {
 
     @include smallScreen() {
       margin: 0;
-      padding: 0.1em 0.5em;
+      padding: 0.3em 0.5em;
+      font-size: 1.1em;
     }
   }
 }
@@ -463,20 +461,26 @@ td.station {
 
   &_info {
     display: flex;
+    align-items: center;
     justify-content: center;
 
+    /* Images */
     .icon-info {
-      font-size: 0.8rem;
-      width: 2rem;
-      height: 2rem;
+      display: flex;
+      justify-content: center;
+      align-items: center;
 
-      line-height: 2rem;
+      width: 32px;
+      height: 32px;
+      font-size: 12px;
 
       margin: 0 0.2em;
-      vertical-align: middle;
 
       outline: 2px solid #444;
       border-radius: 0.5em;
+
+      @include smallScreen() {
+      }
     }
   }
 
@@ -519,4 +523,5 @@ td.station {
 
   background: #333;
 }
+
 </style>
diff --git a/src/components/TrainsView/TrainSchedule.vue b/src/components/TrainsView/TrainSchedule.vue
index 72f101f..1058d28 100644
--- a/src/components/TrainsView/TrainSchedule.vue
+++ b/src/components/TrainsView/TrainSchedule.vue
@@ -1,4 +1,3 @@
-p
 <template>
   <div class="train-schedule" @click="toggleShowState">
     <div class="train-stock">
@@ -51,7 +50,7 @@ p
 
             <span class="stop-name" v-html="stop.stopName"> </span>
 
-            <stop-date :stop="stop" />
+            <StopDate :stop="stop" />
           </span>
 
           <div class="stop_line" v-if="i < train.timetableData!.followingStops.length - 1">
@@ -194,7 +193,7 @@ $stopNameClr: #22a8d1;
 }
 ul.stock-list {
   display: flex;
-  align-items: end;
+  align-items: flex-end;
   overflow-x: auto;
   padding-bottom: 1em;
 
@@ -203,7 +202,6 @@ ul.stock-list {
     color: #aaa;
     font-size: 0.9em;
   }
-
 }
 
 .schedule-wrapper {