From 1a93fa3249a1e79adcfdc0407511e5bf38a3f580 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Sat, 20 Mar 2021 20:16:09 +0100
Subject: [PATCH] =?UTF-8?q?Zmiany=20w=20wygl=C4=85dzie,=20poprawki=20respo?=
 =?UTF-8?q?nsywno=C5=9Bci?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                   |  6 +-
 src/components/SceneryView/SceneryInfo.vue    | 69 +++++++++----------
 .../SceneryView/SceneryTimetable.vue          |  7 +-
 src/components/StationsView/FilterCard.vue    |  4 --
 src/components/TrainsView/TrainOptions.vue    | 13 ++--
 src/components/TrainsView/TrainStats.vue      |  8 +--
 src/components/TrainsView/TrainTable.vue      | 52 ++++++++------
 src/styles/card.scss                          | 12 ++--
 src/styles/scenery_status.scss                |  3 +-
 src/views/SceneryView.vue                     | 32 +--------
 src/views/TrainsView.vue                      |  4 +-
 11 files changed, 90 insertions(+), 120 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 6ba09c0..718c4bb 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -228,12 +228,8 @@ export default class App extends Vue {
 
   font-size: 1rem;
 
-  @include midScreen() {
-    font-size: 0.95rem;
-  }
-
   @include smallScreen() {
-    font-size: 0.7rem;
+    font-size: calc(0.35rem + 1vw);
   }
 }
 
diff --git a/src/components/SceneryView/SceneryInfo.vue b/src/components/SceneryView/SceneryInfo.vue
index 20e704b..63f1c6a 100644
--- a/src/components/SceneryView/SceneryInfo.vue
+++ b/src/components/SceneryView/SceneryInfo.vue
@@ -99,9 +99,9 @@
       </div>
 
       <div class="info-dispatcher">
-        <div>
+        <div class="dispatcher">
           <span
-            class="level"
+            class="dispatcher_level"
             :style="
               calculateExpStyle(
                 stationInfo.dispatcherExp,
@@ -114,7 +114,7 @@
             }}
           </span>
 
-          <span class="name">{{ stationInfo.dispatcherName }}</span>
+          <span class="dispatcher_name">{{ stationInfo.dispatcherName }}</span>
         </div>
 
         <span class="status-badge" :class="stationInfo.statusID"
@@ -233,7 +233,7 @@ h3 {
   justify-content: center;
   align-items: center;
 
-  font-size: 1.2em;
+  font-size: 1.5em;
 
   img {
     width: 1.1em;
@@ -243,30 +243,33 @@ h3 {
 
 .info {
   &-header {
-    padding: 1rem;
+    padding: 1em;
 
     & > .scenery-name {
-      font-size: 3em;
       font-weight: bold;
       color: $accentCol;
 
+      font-size: 4em;
+
       text-transform: uppercase;
     }
 
     & > .scenery-hash {
-      font-size: 1em;
       line-height: 0.8em;
       color: #aaa;
+
+      font-size: 1.5em;
     }
   }
 
   &-stats {
-    font-size: 1.3em;
     padding: 1rem 0;
 
     display: flex;
     justify-content: center;
 
+    font-size: 1.7em;
+
     & > span {
       display: flex;
       align-items: center;
@@ -286,11 +289,11 @@ h3 {
   }
 
   &-brief {
-    padding: 1rem 0;
+    padding: 1em 0;
 
     img {
-      width: 2.5em;
-      margin: 0 0.5rem;
+      width: 3.5em;
+      margin: 0 0.5em;
 
       border: 2px solid #4e4e4e;
       border-radius: 0.5em;
@@ -302,28 +305,29 @@ h3 {
     align-items: center;
     justify-content: center;
 
-    .level {
-      display: inline-block;
-      margin-right: 0.3em;
-      background: firebrick;
-
-      border-radius: 0.1em;
-
-      width: 1.5em;
-      height: 1.5em;
-      line-height: 1.5em;
+    .dispatcher {
       font-size: 2em;
-      font-weight: bold;
+
+      &_level {
+        display: inline-block;
+        margin-right: 0.3em;
+        background: firebrick;
+
+        border-radius: 0.1em;
+
+        width: 1.5em;
+        height: 1.5em;
+        line-height: 1.5em;
+        font-weight: bold;
+      }
+
+      &_name {
+        margin-right: 1em;
+      }
     }
 
-    .name {
-      font-size: 1.6em;
-      margin-right: 1em;
-    }
-
-    .status {
-      font-size: 1em;
-      border-radius: 1em;
+    .status-badge {
+      font-size: 1.2em;
     }
   }
 
@@ -346,7 +350,6 @@ h3 {
 .user,
 .spawn {
   font-weight: 600;
-  font-size: 0.85em;
 
   display: inline-block;
   padding: 0;
@@ -359,10 +362,6 @@ h3 {
     display: inline-block;
     padding: 0.2em 0.4em;
   }
-
-  @include smallScreen() {
-    font-size: 1em;
-  }
 }
 
 .user {
diff --git a/src/components/SceneryView/SceneryTimetable.vue b/src/components/SceneryView/SceneryTimetable.vue
index a573791..db50f08 100644
--- a/src/components/SceneryView/SceneryTimetable.vue
+++ b/src/components/SceneryView/SceneryTimetable.vue
@@ -226,7 +226,7 @@ h3 {
   justify-content: center;
   align-items: center;
 
-  font-size: 1.2em;
+  font-size: 1.5em;
 
   img {
     width: 1.1em;
@@ -254,6 +254,8 @@ h3 {
 .select-box {
   display: flex;
   justify-content: center;
+
+  font-size: 1.2em;
 }
 
 .option {
@@ -341,10 +343,10 @@ h3 {
 
   &-item {
     margin: 1em auto;
-    font-size: 0.8em;
 
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+    gap: 0 0.5em;
 
     padding: 0 0.35em;
 
@@ -393,7 +395,6 @@ h3 {
     @include smallScreen() {
       width: 100%;
       margin: 0.7em 0;
-      font-size: 1.8em;
     }
   }
 }
diff --git a/src/components/StationsView/FilterCard.vue b/src/components/StationsView/FilterCard.vue
index 0b61320..5f3d445 100644
--- a/src/components/StationsView/FilterCard.vue
+++ b/src/components/StationsView/FilterCard.vue
@@ -154,10 +154,6 @@ export default class FilterCard extends Vue {
 .card {
   font-size: 1.25em;
 
-  @include smallScreen() {
-    font-size: 1.35em;
-  }
-
   &-title {
     font-size: 2em;
     font-weight: 700;
diff --git a/src/components/TrainsView/TrainOptions.vue b/src/components/TrainsView/TrainOptions.vue
index e4b4415..6692ad4 100644
--- a/src/components/TrainsView/TrainOptions.vue
+++ b/src/components/TrainsView/TrainOptions.vue
@@ -166,13 +166,11 @@ export default class TrainOptions extends Vue {
   background: #333;
   border-radius: 0.5em 0.5em 0 0;
 
-  margin-right: 0.5rem;
+  margin-right: 0.35em;
 
   @include smallScreen() {
     width: 100%;
-    margin: 0.5rem 0;
-
-    font-size: 0.85rem;
+    margin: 0.35em 0;
   }
 }
 
@@ -221,7 +219,7 @@ export default class TrainOptions extends Vue {
         }
 
         label {
-          padding: 0.5rem 1rem;
+          padding: 0.5em 1em;
           width: 100%;
           cursor: pointer;
         }
@@ -234,7 +232,7 @@ export default class TrainOptions extends Vue {
     justify-content: space-between;
     align-items: center;
 
-    padding: 0.5rem 0.5rem;
+    padding: 0.25em 0.5em;
     min-width: 200px;
 
     cursor: pointer;
@@ -261,7 +259,8 @@ export default class TrainOptions extends Vue {
   &-input {
     border: none;
 
-    padding: 0.5rem 1rem;
+    padding: 0.5em 0.5em;
+
     margin: 0;
 
     min-width: 85%;
diff --git a/src/components/TrainsView/TrainStats.vue b/src/components/TrainsView/TrainStats.vue
index 1ade8b8..582232e 100644
--- a/src/components/TrainsView/TrainStats.vue
+++ b/src/components/TrainsView/TrainStats.vue
@@ -212,7 +212,6 @@ export default class TrainStats extends Vue {
 }
 
 .train-stats {
-  font-size: 0.9rem;
   z-index: 10;
 
   margin-bottom: 0.5em;
@@ -224,7 +223,6 @@ export default class TrainStats extends Vue {
 
 .stats {
   &-btn {
-    font-size: 1em;
     padding: 0.5em;
   }
 
@@ -245,7 +243,6 @@ export default class TrainStats extends Vue {
   }
 
   &-content {
-    font-size: 1.1em;
     color: #ddd;
   }
 }
@@ -255,7 +252,6 @@ export default class TrainStats extends Vue {
   &-list {
     display: flex;
     flex-wrap: wrap;
-    font-size: 0.95em;
   }
 
   margin-right: 0.4em;
@@ -313,7 +309,7 @@ export default class TrainStats extends Vue {
 
 @include smallScreen {
   .button {
-    font-size: 0.85rem;
+    font-size: 1.2em;
   }
 
   .stats-body {
@@ -327,7 +323,7 @@ export default class TrainStats extends Vue {
   .btn-wrapper {
     display: flex;
     justify-content: center;
-    margin-top: 1rem;
+    margin-top: 1em;
   }
 }
 </style>
\ No newline at end of file
diff --git a/src/components/TrainsView/TrainTable.vue b/src/components/TrainsView/TrainTable.vue
index 1d53320..e65c27b 100644
--- a/src/components/TrainsView/TrainTable.vue
+++ b/src/components/TrainsView/TrainTable.vue
@@ -78,18 +78,19 @@
           </span>
 
           <span class="driver">
-            <span class="driver-name">
-              <a
-                :href="'https://td2.info.pl/profile/?u=' + train.driverId"
-                target="_blank"
-              >
-                {{ train.driverName }}
-              </a>
-            </span>
-
-            <span class="driver-type">
-              {{ train.locoType }}
-            </span>
+            <div class="driver-info">
+              <span class="driver-name">
+                <a
+                  :href="'https://td2.info.pl/profile/?u=' + train.driverId"
+                  target="_blank"
+                >
+                  {{ train.driverName }}
+                </a>
+              </span>
+              <span class="driver-type">
+                {{ train.locoType }}
+              </span>
+            </div>
 
             <span class="driver-loco">
               <img
@@ -262,14 +263,14 @@ export default class TrainTable extends Vue {
 
     & > .wrapper {
       display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 
-      @include midScreen() {
-        grid-template-columns: 1fr;
-        grid-template-rows: repeat(3, minmax(100px, 1fr));
+      gap: 2em 0;
 
-        gap: 0.4em 0;
-      }
+      // @include midScreen() {
+      //   grid-template-columns: 1fr;
+      //   grid-template-rows: repeat(3, minmax(0, 1fr));
+      // }
     }
   }
 }
@@ -304,7 +305,7 @@ export default class TrainTable extends Vue {
     font-size: 0.7em;
 
     @include smallScreen() {
-      font-size: 0.85em;
+      font-size: 0.75em;
     }
   }
 
@@ -326,7 +327,13 @@ export default class TrainTable extends Vue {
   display: flex;
   align-items: center;
   justify-content: center;
-  flex-wrap: wrap;
+  flex-flow: column;
+
+  grid-row: span 2;
+
+  &-info {
+    margin-bottom: 1em;
+  }
 
   &-name {
     margin: 0 0.3em;
@@ -354,7 +361,10 @@ export default class TrainTable extends Vue {
   flex-direction: column;
   justify-content: space-around;
 
-  font-size: 0.95em;
+  font-size: 0.85em;
+
+  // grid-column: 1 / 3;
+  // grid-column: span 2;
 
   &-main {
     display: flex;
diff --git a/src/styles/card.scss b/src/styles/card.scss
index 8cd96a2..77f2100 100644
--- a/src/styles/card.scss
+++ b/src/styles/card.scss
@@ -15,8 +15,8 @@
 
   box-shadow: 0 0 15px 5px #474747;
 
-  width: 75%;
-  max-width: 650px;
+  // width: 75%;
+  width: 650px;
   max-height: 95%;
 
   padding: 0.5em 1em;
@@ -26,9 +26,11 @@
     width: 95%;
   }
 
-  @include bigScreen {
-    font-size: 1.4rem;
-  }
+  // @include midScreen {
+  //   width: 85%;
+  // }
+
+
 
   &-exit {
     position: absolute;
diff --git a/src/styles/scenery_status.scss b/src/styles/scenery_status.scss
index ff9bbbc..e1f631f 100644
--- a/src/styles/scenery_status.scss
+++ b/src/styles/scenery_status.scss
@@ -10,8 +10,7 @@ $taken: #09a116;
   border-radius: 1rem;
   font-weight: 500;
 
-  font-size: 0.9em;
-  padding: 0.2em 0.6em;
+  padding: 0.2em .55em;
 
   background-color: $taken;
 
diff --git a/src/views/SceneryView.vue b/src/views/SceneryView.vue
index b2ef340..8500607 100644
--- a/src/views/SceneryView.vue
+++ b/src/views/SceneryView.vue
@@ -72,44 +72,16 @@ export default class SceneryView extends Vue {
 @import "../styles/responsive.scss";
 @import "../styles/variables.scss";
 
-h3 {
-  margin: 0.5em 0;
-  padding: 0.3em;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  font-size: 1.2em;
-
-  img {
-    width: 1.1em;
-    margin-left: 0.5em;
-  }
-}
-
 .scenery {
   &-view {
     min-height: 100%;
 
     display: flex;
     justify-content: center;
-
-    font-size: 1.35em;
-
-    @include bigScreen() {
-      font-size: 1.25rem;
-      align-items: flex-start;
-    }
-
-    @include smallScreen {
-      font-size: calc(0.5rem + 1vw);
-    }
   }
 
   &-offline {
     align-self: center;
-    font-size: 1.5em;
     text-align: center;
     padding: 2em 1em;
 
@@ -125,10 +97,10 @@ h3 {
 
   &-wrapper {
     // background: #555;
-    max-width: 950px;
     width: 75%;
+    max-width: 950px;
 
-    @include smallScreen {
+    @include midScreen {
       width: 95%;
     }
 
diff --git a/src/views/TrainsView.vue b/src/views/TrainsView.vue
index 4b76536..040a9ea 100644
--- a/src/views/TrainsView.vue
+++ b/src/views/TrainsView.vue
@@ -139,8 +139,8 @@ export default class TrainsView extends Vue {
 }
 
 @include smallScreen {
-  .options-wrapper {
-    justify-content: center;
+  .options-bar {
+    font-size: 1.15em;
   }
 }
 </style>