Lekkie zmiany w wyglądzie strony

src/components/StationsView/StationCard.vue

@@ -5,18 +5,21 @@
         class="schedule-icon"
         :src="require('@/assets/icon-clock.svg')"
         alt="schedule-icon"
-        @click="() => cardMode = cardMode == 0 ? 1 : 0"
+        @click="() => (cardMode = cardMode == 0 ? 1 : 0)"
+      />
+      <img
+        :src="require('@/assets/icon-exit.svg')"
+        alt="exit-icon"
+        @click="exit"
       />
-      <img :src="require('@/assets/icon-exit.svg')" alt="exit-icon" @click="exit" />
     </div>
 
-    <div class="card-content" :class="{'offline': !stationInfo.online}">
+    <div class="card-content" :class="{ offline: !stationInfo.online }">
       <div class="main">
         <div class="main-content">
-          <span
-            class="main-level flex"
-            v-if="stationInfo.reqLevel > -1"
-          >{{ 2 > parseInt(stationInfo.reqLevel) ? "L" : stationInfo.reqLevel}}</span>
+          <span class="main-level flex" v-if="stationInfo.reqLevel > -1">{{
+            2 > parseInt(stationInfo.reqLevel) ? "L" : stationInfo.reqLevel
+          }}</span>
           <span class="main-general">
             <div class="main-name">
               <a
@@ -24,11 +27,12 @@
                 :href="stationInfo.stationURL"
                 target="_blank"
                 rel="noopener noreferrer"
-              >{{stationInfo.stationName}}</a>
+                >{{ stationInfo.stationName }}</a
+              >
 
-              <span v-else>{{stationInfo.stationName}}</span>
+              <span v-else>{{ stationInfo.stationName }}</span>
             </div>
-            <div class="main-hash">{{stationInfo.stationHash}}</div>
+            <div class="main-hash">{{ stationInfo.stationHash }}</div>
           </span>
         </div>
       </div>
@@ -80,30 +84,39 @@
       <div class="dispatcher">
         <div
           class="dispatcher-level flex"
-          :style="calculateExpStyle(stationInfo.dispatcherExp, stationInfo.dispatcherIsSupporter)"
-        >{{stationInfo.online ? computedDispatcherExp : ""}}</div>
+          :style="
+            calculateExpStyle(
+              stationInfo.dispatcherExp,
+              stationInfo.dispatcherIsSupporter
+            )
+          "
+        >
+          {{ stationInfo.online ? computedDispatcherExp : "" }}
+        </div>
         <div class="dispatcher-info">
           <div class="dispatcher-name">
             <a
-              :href="'https://td2.info.pl/profile/?u=' + stationInfo.dispatcherId"
+              :href="
+                'https://td2.info.pl/profile/?u=' + stationInfo.dispatcherId
+              "
               target="_blank"
               rel="noopener noreferrer"
-            >{{stationInfo.dispatcherName || "---"}}</a>
+              >{{ stationInfo.dispatcherName || "---" }}</a
+            >
           </div>
 
           <div class="dispatcher-rate">
             <img :src="require(`@/assets/icon-like.svg`)" alt="like-icon" />
-            <span>{{stationInfo.dispatcherRate}}</span>
+            <span>{{ stationInfo.dispatcherRate }}</span>
           </div>
         </div>
       </div>
 
       <div class="hours">
         <div class="hours-title title">STATUS</div>
-        <span
-          class="status"
-          :class="statusClasses(stationInfo.occupiedTo)"
-        >{{stationInfo.occupiedTo}}</span>
+        <span class="status" :class="statusClasses(stationInfo.occupiedTo)">{{
+          stationInfo.occupiedTo
+        }}</span>
       </div>
 
       <div class="spawns flex flex-column">
@@ -113,7 +126,8 @@
             class="spawn"
             v-for="(spawn, i) in stationInfo.spawnString"
             :key="spawn + stationInfo.dispatcherName + i"
-          >{{spawn}}</span>
+            >{{ spawn }}</span
+          >
 
           <span class="spawn" v-if="!stationInfo.spawnString">BRAK</span>
         </div>
@@ -129,24 +143,31 @@
             :key="train.trainNo + train.driverName"
           >
             <router-link
-              :to="{ name: 'TrainsView', params: { passedSearchedTrain: train.trainNo.toString()}}"
+              :to="{
+                name: 'TrainsView',
+                params: { passedSearchedTrain: train.trainNo.toString() },
+              }"
             >
-              <span>{{train.trainNo}}</span>
+              <span>{{ train.trainNo }}</span>
               |
-              <span>{{train.driverName}}</span>
+              <span>{{ train.driverName }}</span>
             </router-link>
           </div>
 
           <span
             class="user borderless"
-            v-if="!stationInfo.stationTrains || stationInfo.stationTrains.length == 0"
-          >BRAK</span>
+            v-if="
+              !stationInfo.stationTrains ||
+              stationInfo.stationTrains.length == 0
+            "
+            >BRAK</span
+          >
         </div>
       </div>
     </div>
 
     <StationTimetable
-      :class="{show: cardMode == 1}"
+      :class="{ show: cardMode == 1 }"
       :scheduledTrains="computedScheduledTrains"
       :stationName="stationInfo.stationName"
     />
@@ -213,9 +234,10 @@ export default class StationCard extends styleMixin {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 @import "../../styles/variables.scss";
 @import "../../styles/responsive.scss";
+
 .title {
   color: $accentCol;
   font-weight: 600;

src/components/StationsView/StationTable.vue

@@ -4,11 +4,15 @@
       <table class="table">
         <thead class="table-head">
           <tr>
-            <th v-for="(head, i) in headTitles" :key="i" @click="() => changeSorter(i)">
+            <th
+              v-for="(head, i) in headTitles"
+              :key="i"
+              @click="() => changeSorter(i)"
+            >
               <span>
                 <div>
-                  <div>{{head[0]}}</div>
-                  <div v-if="head.length > 1">{{head[1]}}</div>
+                  <div>{{ head[0] }}</div>
+                  <div v-if="head.length > 1">{{ head[1] }}</div>
                 </div>
 
                 <img
@@ -26,36 +30,64 @@
           class="table-item"
           v-for="(station, i) in stations"
           :key="i + station.stationHash"
-          @click="() => {  setFocusedStation(station.stationName) }"
+          @click="
+            () => {
+              setFocusedStation(station.stationName);
+            }
+          "
         >
           <td
             class="item-station-name"
-            :class="{'default-station': station.default, 'online': station.online, 'station-unavailable': station.unavailable}"
-          >{{station.stationName}}</td>
+            :class="{
+              'default-station': station.default,
+              online: station.online,
+              'station-unavailable': station.unavailable,
+            }"
+          >
+            {{ station.stationName }}
+          </td>
 
           <td class="item-station-level">
             <span
               v-if="station.reqLevel"
               :style="calculateExpStyle(station.reqLevel)"
-            >{{ (station.reqLevel && station.reqLevel > -1) ? (parseInt(station.reqLevel) >= 2 ? station.reqLevel : "L") : "?" }}</span>
+              >{{
+                station.reqLevel && station.reqLevel > -1
+                  ? parseInt(station.reqLevel) >= 2
+                    ? station.reqLevel
+                    : "L"
+                  : "?"
+              }}</span
+            >
 
             <span v-else>?</span>
           </td>
 
           <td class="item-station-status">
-            <span class="status" :class="statusClasses(station.occupiedTo)">{{station.occupiedTo}}</span>
+            <span class="status" :class="statusClasses(station.occupiedTo)">{{
+              station.occupiedTo
+            }}</span>
           </td>
 
-          <td class="item-dispatcher-name">{{station.online ? station.dispatcherName : ""}}</td>
+          <td class="item-dispatcher-name">
+            {{ station.online ? station.dispatcherName : "" }}
+          </td>
           <td class="item-dispatcher-exp">
             <span
               v-if="station.online"
               :style="calculateExpStyle(station.dispatcherExp)"
-            >{{2 > station.dispatcherExp ? 'L' : station.dispatcherExp}}</span>
+              >{{
+                2 > station.dispatcherExp ? "L" : station.dispatcherExp
+              }}</span
+            >
+          </td>
+          <td class="item-users">
+            {{
+              station.online
+                ? station.currentUsers + "/" + station.maxUsers
+                : ""
+            }}
           </td>
-          <td
-            class="item-users"
-          >{{station.online ? (station.currentUsers + "/" + station.maxUsers) : ""}}</td>
           <td class="item-info">
             <img
               class="icon-info"
@@ -94,39 +126,59 @@
             <span
               v-if="station.routes && station.routes.twoWay.catenary > 0"
               class="track catenary"
-              :title="'Liczba zelektryfikowanych szlaków dwutorowych: ' + station.routes.twoWay.catenary"
-            >{{station.routes.twoWay.catenary}}</span>
+              :title="
+                'Liczba zelektryfikowanych szlaków dwutorowych: ' +
+                station.routes.twoWay.catenary
+              "
+              >{{ station.routes.twoWay.catenary }}</span
+            >
 
             <span
               v-if="station.routes && station.routes.twoWay.noCatenary > 0"
               class="track no-catenary"
-              :title="'Liczba niezelektryfikowanych szlaków dwutorowych: ' + station.routes.twoWay.noCatenary"
-            >{{station.routes.twoWay.noCatenary}}</span>
+              :title="
+                'Liczba niezelektryfikowanych szlaków dwutorowych: ' +
+                station.routes.twoWay.noCatenary
+              "
+              >{{ station.routes.twoWay.noCatenary }}</span
+            >
 
             <span class="separator"></span>
 
             <span
               v-if="station.routes && station.routes.oneWay.catenary > 0"
               class="track catenary"
-              :title="'Liczba zelektryfikowanych szlaków jednotorowych: ' + station.routes.oneWay.catenary"
-            >{{station.routes.oneWay.catenary}}</span>
+              :title="
+                'Liczba zelektryfikowanych szlaków jednotorowych: ' +
+                station.routes.oneWay.catenary
+              "
+              >{{ station.routes.oneWay.catenary }}</span
+            >
 
             <span
               v-if="station.routes && station.routes.oneWay.noCatenary > 0"
               class="track no-catenary"
-              :title="'Liczba niezelektryfikowanych szlaków jednotorowych: ' + station.routes.oneWay.noCatenary"
-            >{{station.routes.oneWay.noCatenary}}</span>
+              :title="
+                'Liczba niezelektryfikowanych szlaków jednotorowych: ' +
+                station.routes.oneWay.noCatenary
+              "
+              >{{ station.routes.oneWay.noCatenary }}</span
+            >
           </td>
 
           <td class="active-timetables">
             <transition name="change-anim" mode="out-in">
               <span :key="station.scheduledTrains.length">
                 <span v-if="station.scheduledTrains">
-                  <span style="color:#eee">{{ station.scheduledTrains.length}}</span>
+                  <span style="color: #eee">{{
+                    station.scheduledTrains.length
+                  }}</span>
                   /
-                  <span
-                    style="color:#bbb"
-                  >{{ station.scheduledTrains.filter(train => train.stopInfo.confirmed).length }}</span>
+                  <span style="color: #bbb">{{
+                    station.scheduledTrains.filter(
+                      (train) => train.stopInfo.confirmed
+                    ).length
+                  }}</span>
                 </span>
 
                 <span v-else>...</span>
@@ -136,7 +188,9 @@
         </tr>
       </table>
     </div>
-    <div class="no-stations" v-if="stations.length == 0">Ups! Brak stacji do wyświetlenia!</div>
+    <div class="no-stations" v-if="stations.length == 0">
+      Ups! Brak stacji do wyświetlenia!
+    </div>
   </section>
 </template>
 
@@ -182,7 +236,8 @@ export default class StationTable extends styleMixin {
 <style lang="scss" scoped>
 @import "../../styles/responsive.scss";
 @import "../../styles/variables.scss";
-@import "../../styles/global.scss";
+
+$rowCol: #4b4b4b;
 
 .change-anim {
   &-enter-active,
@@ -197,7 +252,7 @@ export default class StationTable extends styleMixin {
 }
 
 .station-table {
-  font-size: calc(0.5rem + 0.3vw);
+  font-size: calc(0.5rem + 0.35vw);
   overflow: auto;
   overflow-y: hidden;
 }
@@ -220,6 +275,7 @@ export default class StationTable extends styleMixin {
   &-wrapper {
     overflow: auto;
   }
+
   white-space: nowrap;
   border-collapse: collapse;
 
@@ -234,7 +290,7 @@ export default class StationTable extends styleMixin {
 
   &-head th {
     padding: 0.3rem;
-    background-color: #444;
+    background-color: $primaryCol;
     min-width: 120px;
 
     cursor: pointer;
@@ -254,16 +310,16 @@ export default class StationTable extends styleMixin {
   }
 
   &-item {
-    background-color: #5c5b5b;
+    background-color: $rowCol;
 
     &:nth-child(even) {
-      background-color: rgb(102, 101, 101);
+      background-color: lighten($rowCol, 5);
       color: white;
     }
 
     &:hover,
     &:focus {
-      background-color: #818181;
+      background-color: lighten($rowCol, 20);
     }
 
     & > td {

src/components/StationsView/StationTimetable.vue

@@ -2,32 +2,46 @@
   <div class="station-timetable">
     <div class="timetable-wrapper">
       <div class="timetable-title title">
-        <div style="font-size: 1.5em;">{{stationName.toUpperCase()}}</div>
-        <div style="font-size: 0.7em;">AKTYWNE ROZKŁADY JAZDY</div>
+        <div style="font-size: 1.5em">{{ stationName.toUpperCase() }}</div>
+        <div style="font-size: 0.7em">AKTYWNE ROZKŁADY JAZDY</div>
       </div>
 
       <div class="timetable-content">
-        <div class="timetable-item" v-for="(scheduledTrain, i) in computedScheduledTrains" :key="i">
+        <div
+          class="timetable-item"
+          v-for="(scheduledTrain, i) in computedScheduledTrains"
+          :key="i"
+        >
           <span class="timetable-general">
             <span class="general-info">
               <router-link
-                :to="{ name: 'TrainsView', params: { passedSearchedTrain: scheduledTrain.trainNo.toString()}}"
+                :to="{
+                  name: 'TrainsView',
+                  params: {
+                    passedSearchedTrain: scheduledTrain.trainNo.toString(),
+                  },
+                }"
               >
                 <span>
-                  <strong>{{scheduledTrain.category}}</strong>
-                  {{scheduledTrain.trainNo}}
-                </span>
-              </router-link>|
+                  <strong>{{ scheduledTrain.category }}</strong>
+                  {{ scheduledTrain.trainNo }}
+                </span> </router-link
+              >|
               <span>
                 <a
-                  :href="'https://td2.info.pl/profile/?u=' + scheduledTrain.driverId"
+                  :href="
+                    'https://td2.info.pl/profile/?u=' + scheduledTrain.driverId
+                  "
                   target="_blank"
-                >{{ scheduledTrain.driverName }}</a>
+                  >{{ scheduledTrain.driverName }}</a
+                >
               </span>
             </span>
 
             <span class="general-status">
-              <span :class="scheduledTrain.stopStatus">{{scheduledTrain.stopLabel}}</span>
+              <span :class="scheduledTrain.stopStatus">{{
+                scheduledTrain.stopLabel
+              }}</span>
             </span>
           </span>
 
@@ -36,29 +50,33 @@
               <span
                 class="arrival-time begins"
                 v-if="scheduledTrain.stopInfo.beginsHere"
-              >ROZPOCZYNA BIEG</span>
-              <span
-                class="arrival-time"
-                v-else
-              >{{scheduledTrain.stopInfo.arrivalTimeString}} ({{scheduledTrain.stopInfo.arrivalDelay}})</span>
+                >ROZPOCZYNA BIEG</span
+              >
+              <span class="arrival-time" v-else
+                >{{ scheduledTrain.stopInfo.arrivalTimeString }} ({{
+                  scheduledTrain.stopInfo.arrivalDelay
+                }})</span
+              >
             </span>
 
             <span class="schedule-stop">
-              <span
-                class="stop-time"
-                v-if="scheduledTrain.stopInfo.stopTime"
-              >{{scheduledTrain.stopInfo.stopTime}} {{scheduledTrain.stopInfo.stopType}}</span>
+              <span class="stop-time" v-if="scheduledTrain.stopInfo.stopTime"
+                >{{ scheduledTrain.stopInfo.stopTime }}
+                {{ scheduledTrain.stopInfo.stopType }}</span
+              >
               <span class="stop-arrow arrow"></span>
             </span>
             <span class="schedule-departure">
               <span
                 class="departure-time terminates"
                 v-if="scheduledTrain.stopInfo.terminatesHere"
-              >KOŃCZY BIEG</span>
-              <span
-                class="departure-time"
-                v-else
-              >{{scheduledTrain.stopInfo.departureTimeString}} ({{scheduledTrain.stopInfo.departureDelay}})</span>
+                >KOŃCZY BIEG</span
+              >
+              <span class="departure-time" v-else
+                >{{ scheduledTrain.stopInfo.departureTimeString }} ({{
+                  scheduledTrain.stopInfo.departureDelay
+                }})</span
+              >
             </span>
           </span>
         </div>

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