Lekkie zmiany w wyglądzie strony

src/components/TrainsView/TrainStats.vue

@@ -5,7 +5,9 @@
         class="stats-btn button"
         @click="toggleStats"
         v-if="trains.length > 0"
-      >STATYSTYKI RUCHU</button>
+      >
+        STATYSTYKI RUCHU
+      </button>
     </div>
 
     <transition name="stats-anim">
@@ -13,36 +15,47 @@
         <h2 class="stats-header">STATYSTYKI RUCHU</h2>
 
         <div class="stats-speed">
-          <div class="title stats-title">PRĘDKOŚCI POCIĄGÓW (MIN | ŚR | MAX) [km/h]</div>
-          <div class="stats-content">{{speedStats.min}} | {{speedStats.avg}} | {{speedStats.max}}</div>
+          <div class="title stats-title">
+            PRĘDKOŚCI POCIĄGÓW (MIN | ŚR | MAX) [km/h]
+          </div>
+          <div class="stats-content">
+            {{ speedStats.min }} | {{ speedStats.avg }} | {{ speedStats.max }}
+          </div>
         </div>
 
         <div class="stats-length">
-          <div class="title stats-title">DŁUGOŚCI ROZKŁADÓW (MIN | ŚR | MAX) [km]</div>
-          <div
-            class="stats-content"
-          >{{timetableStats.min}} | {{timetableStats.avg}} | {{timetableStats.max}}</div>
+          <div class="title stats-title">
+            DŁUGOŚCI ROZKŁADÓW (MIN | ŚR | MAX) [km]
+          </div>
+          <div class="stats-content">
+            {{ timetableStats.min }} | {{ timetableStats.avg }} |
+            {{ timetableStats.max }}
+          </div>
         </div>
 
         <div class="stats-categories">
           <div class="title stats-title">KATEGORIE RJ</div>
 
           <div class="category-list">
-            <span class="category" v-for="[key, value] of categoryList" :key="key">
-              <span class="category-type">{{key}}</span>
-              <span class="category-count">{{value}}</span>
+            <span
+              class="category"
+              v-for="[key, value] of categoryList"
+              :key="key"
+            >
+              <span class="category-type">{{ key }}</span>
+              <span class="category-count">{{ value }}</span>
             </span>
           </div>
 
           <div class="special-list">
             <span class="special twr">
               <span class="special-type">WYSOKIEGO RYZYKA</span>
-              <span class="special-count">{{specialTrainCount[0]}}</span>
+              <span class="special-count">{{ specialTrainCount[0] }}</span>
             </span>
 
             <span class="special skr">
               <span class="special-type">PRZEKROCZONA SKRAJNIA</span>
-              <span class="special-count">{{specialTrainCount[1]}}</span>
+              <span class="special-count">{{ specialTrainCount[1] }}</span>
             </span>
           </div>
         </div>
@@ -51,7 +64,9 @@
           <div class="title stats-title">NAJCZĘSTSZE JEDNOSTKI</div>
 
           <div class="loco-list stats-content">
-            <div class="loco-item" v-for="(loco,i) in locoList" :key="i">{{loco[0]}} | {{loco[1]}}</div>
+            <div class="loco-item" v-for="(loco, i) in locoList" :key="i">
+              {{ loco[0] }} | {{ loco[1] }}
+            </div>
           </div>
         </div>
       </div>
@@ -222,7 +237,7 @@ export default class TrainStats extends Vue {
   &-list {
     display: flex;
     flex-wrap: wrap;
-    font-size: 0.85em;
+    font-size: 0.95em;
   }
 
   margin-right: 0.4em;
@@ -235,7 +250,8 @@ export default class TrainStats extends Vue {
   }
 
   &-type {
-    background: #888;
+    background: rgb(88, 88, 88);
+    font-weight: 600;
   }
 
   &-count {

src/components/TrainsView/TrainTable.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="train-table">
-    <div class="no-trains" v-if="computedTrains.length == 0">Ups! Brak pociągów do wyświetlenia :/</div>
+    <div class="no-trains" v-if="computedTrains.length == 0">
+      Ups! Brak pociągów do wyświetlenia :/
+    </div>
 
     <ul class="train-list">
       <li
@@ -8,7 +10,11 @@
         v-for="(train, i) in computedTrains"
         :key="i"
         :id="train.timetableData.timetableId"
-        @click="() => {changeFocusedTrain(train.trainNo);}"
+        @click="
+          () => {
+            changeFocusedTrain(train.trainNo);
+          }
+        "
       >
         <span class="train-info">
           <span class="info">
@@ -17,43 +23,52 @@
                 <span>
                   <strong>{{ train.timetableData.category }}</strong>
                   {{ train.trainNo }} |
-                  <span
-                    style=" color: gold;"
-                  >{{ train.timetableData.routeDistance }} km</span>
+                  <span style="color: gold"
+                    >{{ train.timetableData.routeDistance }} km</span
+                  >
                 </span>
 
                 <span>
-                  <span class="warning twr" v-if="train.timetableData.TWR">TWR</span>
-                  <span class="warning skr" v-if="train.timetableData.SKR">SKR</span>
+                  <span class="warning twr" v-if="train.timetableData.TWR"
+                    >TWR</span
+                  >
+                  <span class="warning skr" v-if="train.timetableData.SKR"
+                    >SKR</span
+                  >
                 </span>
               </div>
 
               <div class="info-route">
                 <strong>
-                  {{
-                  train.timetableData.route.replace("|", " - ")
-                  }}
+                  {{ train.timetableData.route.replace("|", " - ") }}
                 </strong>
               </div>
 
               <div class="info-stations">
                 <span v-if="train.timetableData.followingStops.length > 2">
                   Przez:
-                  <span v-html="generateStopList(train.timetableData.followingStops)"></span>
+                  <span
+                    v-html="
+                      generateStopList(train.timetableData.followingStops)
+                    "
+                  ></span>
                 </span>
               </div>
             </div>
 
             <div class="info-bottom">
-              <span
-                class="info-online"
-                :class="{'online': train.online}"
-              >{{train.online ? "ONLINE" : "OFFLINE"}}</span>
+              <span class="info-online" :class="{ online: train.online }">{{
+                train.online ? "ONLINE" : "OFFLINE"
+              }}</span>
 
               <button
                 class="button"
-                @click="changeScheduleShowState(train.timetableData.timetableId)"
-              >ROZKŁAD JAZDY</button>
+                @click="
+                  changeScheduleShowState(train.timetableData.timetableId)
+                "
+              >
+                ROZKŁAD JAZDY
+              </button>
             </div>
           </span>
 
@@ -62,11 +77,10 @@
               <a
                 :href="'https://td2.info.pl/profile/?u=' + train.driverId"
                 target="_blank"
-              >{{ train.driverName }}</a>
-              <span style="color: #bbb; margin-left: 1em;">
-                {{
-                train.locoType
-                }}
+                >{{ train.driverName }}</a
+              >
+              <span style="color: #bbb; margin-left: 1em">
+                {{ train.locoType }}
               </span>
             </span>
             <span class="driver-loco">
@@ -211,7 +225,7 @@ export default class TrainTable extends Vue {
     padding: 1rem;
     margin-bottom: 1rem;
 
-    background-color: #383838;
+    background-color: $primaryCol;
 
     cursor: pointer;
   }