Zmiany wyglądu i działania filtra stacji, poprawki

src/components/SceneryView/SceneryInfo.vue

@@ -7,7 +7,8 @@
           :href="stationInfo.stationURL"
           target="_blank"
           rel="noopener noreferrer"
-        >{{ stationInfo.stationName }}</a>
+          >{{ stationInfo.stationName }}</a
+        >
 
         <span v-else>{{ stationInfo.stationName }}</span>
       </div>
@@ -33,11 +34,15 @@
         <span class="schedules">
           <img :src="timetableIcon" alt="icon-timetable" />
           <span v-if="stationInfo.scheduledTrains">
-            <span style="color: #eee">{{stationInfo.scheduledTrains.length}}</span>
+            <span style="color: #eee">{{
+              stationInfo.scheduledTrains.length
+            }}</span>
             /
-            <span
-              style="color: #bbb"
-            >{{ stationInfo.scheduledTrains.filter(train => train.stopInfo.confirmed).length }}</span>
+            <span style="color: #bbb">{{
+              stationInfo.scheduledTrains.filter(
+                (train) => train.stopInfo.confirmed
+              ).length
+            }}</span>
           </span>
         </span>
       </div>
@@ -84,22 +89,39 @@
           alt="icon-unavailable"
           title="Sceneria niedostępna"
         />
+
+        <img
+          v-if="stationInfo.stationLines && stationInfo.stationLines != ''"
+          :src="require('@/assets/icon-real.svg')"
+          alt="real"
+          title="Sceneria realna / półrealna"
+        />
       </div>
 
       <div class="info-dispatcher">
         <div>
           <span
             class="level"
-            :style="calculateExpStyle(stationInfo.dispatcherExp, stationInfo.dispatcherIsSupporter)"
-          >{{ stationInfo.dispatcherExp > 1 ? stationInfo.dispatcherExp : "L"}}</span>
+            :style="
+              calculateExpStyle(
+                stationInfo.dispatcherExp,
+                stationInfo.dispatcherIsSupporter
+              )
+            "
+          >
+            {{
+              stationInfo.dispatcherExp > 1 ? stationInfo.dispatcherExp : "L"
+            }}
+          </span>
 
           <span class="name">{{ stationInfo.dispatcherName }}</span>
         </div>
 
         <span
-          class="status"
+          class="status-badge"
           :class="statusClasses(stationInfo.occupiedTo)"
-        >{{ stationInfo.occupiedTo }}</span>
+          >{{ stationInfo.occupiedTo }}
+        </span>
       </div>
 
       <div class="info-lists">
@@ -123,7 +145,9 @@
           <div
             class="user offline"
             v-if="!computedStationTrains || computedStationTrains.length == 0"
-          >BRAK AKTYWNYCH GRACZY</div>
+          >
+            BRAK AKTYWNYCH GRACZY
+          </div>
         </div>
 
         <div class="spawn-list">
@@ -144,7 +168,8 @@
           <span
             class="spawn none"
             v-if="!stationInfo.spawns || stationInfo.spawns.length == 0"
-          >BRAK OTWARTYCH SPAWNÓW</span>
+            >BRAK OTWARTYCH SPAWNÓW</span
+          >
         </div>
       </div>
     </section>
@@ -264,6 +289,9 @@ h3 {
     img {
       width: 2.5em;
       margin: 0 0.5rem;
+
+      border: 2px solid #4e4e4e;
+      border-radius: 0.5em;
     }
   }
 

src/components/StationsView/FilterCard.vue

@@ -1,7 +1,7 @@
 <template>
-  <section class="filter-card">
+  <section class="card">
     <div class="card-exit" @click="exit">
-      <img :src="require('@/assets/icon-exit.svg')" alt="exit icon" />
+      <!-- <img :src="require('@/assets/icon-exit.svg')" alt="exit icon" /> -->
     </div>
 
     <div class="card-title flex">FILTRUJ STACJE</div>
@@ -21,7 +21,8 @@
           <span
             class="option-content"
             :class="option.section + (option.value ? ' checked' : '')"
-          >{{ option.content }}</span>
+            >{{ option.content }}</span
+          >
         </label>
       </div>
     </div>
@@ -46,10 +47,12 @@
     </div>
 
     <div class="card-save">
-      <div class="option save">
-        <label class="option-label">
-          <input class="option-input" type="checkbox" v-model="saveOptions" @change="saveFilters" />
-          <span class="option-content save" :class="{ checked: saveOptions }">ZAPISZ FILTRY</span>
+      <div class="option">
+        <label>
+          <input type="checkbox" v-model="saveOptions" @change="saveFilters" />
+          <span class="save" :class="{ checked: saveOptions }">
+            ZAPISZ FILTRY
+          </span>
         </label>
       </div>
     </div>
@@ -106,9 +109,6 @@ export default class FilterCard extends Vue {
   saveFilters(): void {
     if (!this.saveOptions) {
       StorageManager.unregisterStorage(this.STORAGE_KEY);
-
-      console.log(this.saveOptions);
-
       return;
     }
 
@@ -145,52 +145,31 @@ export default class FilterCard extends Vue {
 
 <style lang="scss" scoped>
 @import "../../styles/responsive";
-@import "../../styles/variables";
-
-.filter-card {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-
-  z-index: 3;
-
-  overflow: auto;
-  max-height: 95vh;
-
-  padding: 0.5em;
-  max-width: 600px;
-  width: 65%;
-
-  background: #262a2e;
-
-  font-size: 1.5em;
-
-  box-shadow: 0 0 15px 5px #474747;
-
-  @include smallScreen() {
-    width: 95%;
-  }
-
-  @include bigScreen {
-    font-size: 1.1rem;
-  }
-}
+@import "../../styles/card";
 
 .card {
+  font-size: 1.5em;
+
   &-title {
     font-size: 2em;
     font-weight: 700;
     color: $accentCol;
 
     margin: 0.5em 0;
-    margin-top: 1em;
+
+    text-align: center;
   }
 
   &-options {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(6em, 1fr));
-    padding: 0 1.5em;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    grid-template-rows: repeat(4, 1fr);
+    gap: 0.5em;
+
+    @include smallScreen() {
+      grid-template-columns: repeat(auto-fit, minmax(6em, 1fr));
+      grid-template-rows: auto;
+    }
   }
 
   &-sliders {
@@ -202,6 +181,7 @@ export default class FilterCard extends Vue {
 
     button {
       margin: 0 0.3em;
+      border: 1px solid white;
     }
   }
 
@@ -210,8 +190,8 @@ export default class FilterCard extends Vue {
     justify-content: center;
 
     .option {
-      width: 30%;
-      font-size: 0.9em;
+      width: 7em;
+      font-size: 1.1em;
     }
   }
 
@@ -223,13 +203,11 @@ export default class FilterCard extends Vue {
 }
 
 .option {
-  margin: 0.3em;
-
-  &-input {
+  input {
     display: none;
   }
 
-  &-content {
+  span {
     user-select: none;
     -moz-user-select: none;
     -webkit-user-select: none;
@@ -239,21 +217,16 @@ export default class FilterCard extends Vue {
 
     cursor: pointer;
 
-    padding: 0.6em 0.5em;
-    border-radius: 0.4em;
+    padding: 0.45em 0.4em;
 
-    font-size: 0.65em;
-
-    background-color: #333;
+    font-size: 0.8em;
 
     display: inline-block;
     position: relative;
 
     transition: all 0.2s;
 
-    &.save {
-      font-size: 0.8em;
-    }
+    border-radius: 0.5em;
 
     &:not(.checked) {
       background-color: #585858;
@@ -313,7 +286,7 @@ export default class FilterCard extends Vue {
         width: 100%;
         height: 100%;
 
-        border-radius: inherit;
+        border-radius: 0.5em;
       }
     }
   }
@@ -321,8 +294,7 @@ export default class FilterCard extends Vue {
 
 .slider {
   display: flex;
-
-  padding: 0.5em;
+  margin: 1em 0;
 
   &-value {
     display: flex;
@@ -333,7 +305,6 @@ export default class FilterCard extends Vue {
     margin-right: 0.3em;
     padding: 0.1em 0.2em;
 
-    font-size: 1.1em;
     font-weight: 500;
 
     border-radius: 0.2em;
@@ -343,7 +314,7 @@ export default class FilterCard extends Vue {
     display: flex;
     align-items: center;
 
-    font-size: 0.75em;
+    font-size: 0.8em;
   }
 
   &-input {

src/components/StationsView/StationTable.vue

@@ -4,7 +4,11 @@
       <table>
         <thead>
           <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 class="header_wrapper">
                 <div class="header_item">
                   <div v-if="head[0].includes('.svg')">
@@ -38,35 +42,51 @@
             <td
               class="station_name"
               :class="{
-              'default-station': station.default,
-              online: station.online,
-              'station-unavailable': station.unavailable,
-            }"
-            >{{ station.stationName }}</td>
+                'default-station': station.default,
+                online: station.online,
+                'station-unavailable': station.unavailable,
+              }"
+            >
+              {{ station.stationName }}
+            </td>
 
             <td class="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="station_status">
               <span
-                class="status"
+                class="status-badge"
                 :class="statusClasses(station.occupiedTo)"
-              >{{ station.occupiedTo}}</span>
+                >{{ station.occupiedTo }}</span
+              >
             </td>
 
-            <td class="station_dispatcher-name">{{ station.online ? station.dispatcherName : "" }}</td>
+            <td class="station_dispatcher-name">
+              {{ station.online ? station.dispatcherName : "" }}
+            </td>
 
             <td class="station_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="station_tracks twoway">
@@ -74,13 +94,17 @@
                 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>
+              >
+                {{ 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>
+              >
+                {{ station.routes.twoWay.noCatenary }}
+              </span>
 
               <span class="separator"></span>
 
@@ -88,13 +112,17 @@
                 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>
+              >
+                {{ 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>
+              >
+                {{ station.routes.oneWay.noCatenary }}
+              </span>
             </td>
 
             <td class="station_info">
@@ -131,7 +159,7 @@
               />
             </td>
 
-            <td class="station_users" :class="{inactive: !station.online }">
+            <td class="station_users" :class="{ inactive: !station.online }">
               <span>
                 <span class="highlight">{{ station.currentUsers }}</span>
                 /
@@ -139,16 +167,23 @@
               </span>
             </td>
 
-            <td class="station_spawns" :class="{inactive: !station.online }">
+            <td class="station_spawns" :class="{ inactive: !station.online }">
               <span class="highlight">{{ station.spawns.length }}</span>
             </td>
 
-            <td class="station_schedules" :class="{inactive: !station.online }">
-              <span class="highlight">{{station.scheduledTrains.length}} &nbsp;</span>
+            <td
+              class="station_schedules"
+              :class="{ inactive: !station.online }"
+            >
+              <span class="highlight">
+                {{ station.scheduledTrains.length }} &nbsp;
+              </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>
             </td>
             <!-- 
             <td class="station_stats">
@@ -159,7 +194,9 @@
       </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>