Zmiany w wyglądzie, poprawki responsywności

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

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>

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;