Dodano sortowanie, lekkie zmiany w wyglądzie

src/components/ui/AppBar.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="app-bar">
+    <div class="bar-content flex flex-spaced">
+      <div class="bar-left">
+        <Options />
+
+        <span class="legend">
+          <!-- <button class="button">
+            <img :src="require('@/assets/icon-legend.svg')" alt="icon legend" />
+          </button>-->
+        </span>
+      </div>
+
+      <div class="bar-center"></div>
+
+      <div class="bar-right">
+        <span class="counter dispatchers">
+          <img src="@/assets/icon-dispatcher.svg" alt="icon dispatcher" />
+          {{stationCount}}
+        </span>
+
+        <span class="counter trains">
+          {{trainCount}}
+          <img src="@/assets/icon-train.svg" alt="icon train" />
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop } from "vue-property-decorator";
+
+import Options from "@/components/ui/Options.vue";
+
+@Component({
+  components: { Options }
+})
+export default class AppBar extends Vue {
+  @Prop(Number) trainCount;
+  @Prop(Number) stationCount;
+}
+</script>
+
+<style lang="scss">
+.app-bar {
+  display: flex;
+  justify-content: space-between;
+
+  position: sticky;
+  top: 0;
+  font-size: 0.3em;
+  background: #222;
+}
+
+.bar {
+  &-left {
+    display: flex;
+
+    & > .legend {
+      display: flex;
+      align-items: center;
+
+      img {
+        width: 1.6em;
+      }
+    }
+  }
+
+  &-right {
+    font-size: 1.35em;
+    display: flex;
+  }
+}
+</style>

src/components/ui/Card.vue

@@ -1,133 +1,131 @@
 <template>
-  <transition name="card-anim">
-    <div class="card" v-if="stationInfo">
-      <div class="card-exit" @click="closeCard">
-        <img :src="require('@/assets/icon-exit.svg')" alt="exit icon" />
+  <div class="card">
+    <div class="card-exit" @click="closeCard">
+      <img :src="require('@/assets/icon-exit.svg')" alt="exit icon" />
+    </div>
+
+    <div class="card-upper">
+      <div class="station-name">
+        <a
+          v-if="stationInfo.stationURL"
+          :href="stationInfo.stationURL"
+          target="_blank"
+          rel="noopener noreferrer"
+        >{{stationInfo.stationName}}</a>
+        <span v-else>{{stationInfo.stationName}}</span>
       </div>
 
-      <div class="card-upper">
-        <div class="station-name">
+      <div class="station-hash">{{stationInfo.stationHash}}</div>
+
+      <div class="station-icons">
+        <img
+          v-if="stationInfo.controlType"
+          :src="require(`@/assets/icon-${stationInfo.controlType}.svg`)"
+          :alt="stationInfo.controlType"
+          :title="'Sterowanie ' + stationInfo.controlType"
+        />
+
+        <img
+          v-if="stationInfo.signalType"
+          :src="require(`@/assets/icon-${stationInfo.signalType}.svg`)"
+          :alt="stationInfo.signalType"
+          :title="'Sygnalizacja ' + stationInfo.signalType"
+        />
+
+        <img
+          v-if="stationInfo.SBL && stationInfo.SBL !== ''"
+          :src="require(`@/assets/icon-SBL.svg`)"
+          alt="SBL"
+          title="Sceneria posiada SBL na przynajmniej jednym ze szlaków"
+        />
+
+        <img
+          v-if="stationInfo.default"
+          :src="require(`@/assets/icon-td2.svg`)"
+          alt="default-pack"
+          title="Sceneria domyślnie dostępna w grze"
+        />
+
+        <img
+          v-if="stationInfo.nonPublic || !stationInfo.reqLevel"
+          :src="require(`@/assets/icon-lock.svg`)"
+          alt="non-public"
+          title="Sceneria niepubliczna"
+        />
+
+        <span
+          v-if="stationInfo.reqLevel"
+          :title="'Wymagany poziom dyżurnego: ' +  stationInfo.reqLevel"
+        >{{(parseInt(stationInfo.reqLevel) < 2) ? "L" : stationInfo.reqLevel}}</span>
+      </div>
+
+      <div class="station-info"></div>
+    </div>
+
+    <div class="card-content">
+      <div class="dispatcher">
+        <div class="dispatcher-exp">{{stationInfo.dispatcherExp}}</div>
+        <div class="dispatcher-name">
           <a
-            v-if="stationInfo.stationURL"
-            :href="stationInfo.stationURL"
+            :href="'https://td2.info.pl/profile/?u=' + stationInfo.dispatcherId"
             target="_blank"
             rel="noopener noreferrer"
-          >{{stationInfo.stationName}}</a>
-          <span v-else>{{stationInfo.stationName}}</span>
+          >{{stationInfo.dispatcherName}}</a>
         </div>
-
-        <div class="station-hash">{{stationInfo.stationHash}}</div>
-
-        <div class="station-icons">
-          <img
-            v-if="stationInfo.controlType"
-            :src="require(`@/assets/icon-${stationInfo.controlType}.svg`)"
-            :alt="stationInfo.controlType"
-            :title="'Sterowanie ' + stationInfo.controlType"
-          />
-
-          <img
-            v-if="stationInfo.signalType"
-            :src="require(`@/assets/icon-${stationInfo.signalType}.svg`)"
-            :alt="stationInfo.signalType"
-            :title="'Sygnalizacja ' + stationInfo.signalType"
-          />
-
-          <img
-            v-if="stationInfo.SBL && stationInfo.SBL !== ''"
-            :src="require(`@/assets/icon-SBL.svg`)"
-            alt="SBL"
-            title="Sceneria posiada SBL na przynajmniej jednym ze szlaków"
-          />
-
-          <img
-            v-if="stationInfo.default"
-            :src="require(`@/assets/icon-td2.svg`)"
-            alt="default-pack"
-            title="Sceneria domyślnie dostępna w grze"
-          />
-
-          <img
-            v-if="stationInfo.nonPublic || !stationInfo.reqLevel"
-            :src="require(`@/assets/icon-lock.svg`)"
-            alt="non-public"
-            title="Sceneria niepubliczna"
-          />
-
-          <span
-            v-if="stationInfo.reqLevel"
-            :title="'Wymagany poziom dyżurnego: ' +  stationInfo.reqLevel"
-          >{{(parseInt(stationInfo.reqLevel) < 2) ? "L" : stationInfo.reqLevel}}</span>
-        </div>
-
-        <div class="station-info"></div>
       </div>
 
-      <div class="card-content">
-        <div class="dispatcher">
-          <div class="dispatcher-exp">{{stationInfo.dispatcherExp}}</div>
-          <div class="dispatcher-name">
+      <div class="rating">
+        <div class="rating-content">
+          <img :src="require(`@/assets/icon-like.svg`)" alt="like-icon" />
+          {{stationInfo.dispatcherRate}}
+        </div>
+      </div>
+
+      <div class="occupation">
+        <div class="occupation-title text--title">SCENERIA ZAJĘTA DO</div>
+        <div class="occupation-content text--content">{{stationInfo.occupiedTo}}</div>
+      </div>
+
+      <div class="spawns">
+        <div class="spawns-title text--title">OTWARTE SPAWNY</div>
+        <div class="spawns-content text--content">
+          <span
+            class="spawn"
+            v-for="(spawn, i) in stationInfo.spawnString"
+            :key="spawn + stationInfo.dispatcherName + i"
+          >{{spawn}}</span>
+
+          <span class="spawn" v-if="!stationInfo.spawnString">BRAK</span>
+        </div>
+      </div>
+
+      <div class="users">
+        <div class="users-title text--title">GRACZE NA STACJI</div>
+        <div class="users-content text--content">
+          <div
+            class="user"
+            v-for="train in stationInfo.trains"
+            :key="train.trainNo + train.driverName"
+          >
             <a
-              :href="'https://td2.info.pl/profile/?u=' + stationInfo.dispatcherId"
+              :href="'https://rj.td2.info.pl/train#' + train.trainNo + ';eu'"
               target="_blank"
               rel="noopener noreferrer"
-            >{{stationInfo.dispatcherName}}</a>
-          </div>
-        </div>
-
-        <div class="rating">
-          <div class="rating-content">
-            <img :src="require(`@/assets/icon-like.svg`)" alt="like-icon" />
-            {{stationInfo.dispatcherRate}}
-          </div>
-        </div>
-
-        <div class="occupation">
-          <div class="occupation-title text--title">SCENERIA ZAJĘTA DO</div>
-          <div class="occupation-content text--content">{{stationInfo.occupiedTo}}</div>
-        </div>
-
-        <div class="spawns">
-          <div class="spawns-title text--title">OTWARTE SPAWNY</div>
-          <div class="spawns-content text--content">
-            <span
-              class="spawn"
-              v-for="(spawn, i) in stationInfo.spawnString"
-              :key="spawn + stationInfo.dispatcherName + i"
-            >{{spawn}}</span>
-
-            <span class="spawn" v-if="!stationInfo.spawnString">BRAK</span>
-          </div>
-        </div>
-
-        <div class="users">
-          <div class="users-title text--title">GRACZE NA STACJI</div>
-          <div class="users-content text--content">
-            <div
-              class="user"
-              v-for="train in stationInfo.trains"
-              :key="train.trainNo + train.driverName"
             >
-              <a
-                :href="'https://rj.td2.info.pl/train#' + train.trainNo + ';eu'"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                <span>{{train.trainNo}}</span>
-                |
-                <span>{{train.driverName}}</span>
-              </a>
-            </div>
-
-            <span
-              class="user borderless"
-              v-if="!stationInfo.trains || stationInfo.trains.length == 0"
-            >BRAK</span>
+              <span>{{train.trainNo}}</span>
+              |
+              <span>{{train.driverName}}</span>
+            </a>
           </div>
+
+          <span
+            class="user borderless"
+            v-if="!stationInfo.trains || stationInfo.trains.length == 0"
+          >BRAK</span>
         </div>
       </div>
     </div>
-  </transition>
+  </div>
 </template>
 
 <script lang="ts">
@@ -153,18 +151,6 @@ export default Vue.extend({
   }
 }
 
-.card-anim {
-  &-enter-active,
-  &-leave-active {
-    transition: all 0.25s ease-in-out;
-  }
-
-  &-enter,
-  &-leave-to {
-    opacity: 0;
-  }
-}
-
 .card {
   display: flex;
   flex-direction: column;

src/components/ui/Clock.vue

@@ -27,6 +27,6 @@ export default Vue.extend({
   justify-content: center;
   align-items: center;
 
-  font-size: 1.25em;
+  font-size: 0.35em;
 }
 </style>

src/components/ui/Icon.vue

@@ -1,10 +0,0 @@
-<template>
-  <img class="icon" :src="require(`@/assets/icon-${name}.svg`)" alt />
-</template>
-
-<script lang="ts">
-import Vue from "vue";
-export default Vue.extend({
-  props: ["name"]
-});
-</script>

src/components/ui/List.vue

@@ -1,12 +1,13 @@
 <template>
   <div class="list flex">
-    <Card :stationInfo="focusedStationInfo" :closeCard="closeCard" />
-
+    <transition name="card-anim">
+      <Card v-if="focusedStationInfo" :stationInfo="focusedStationInfo" :closeCard="closeCard" />
+    </transition>
     <!-- <div class="info" v-if="stations.length == 0">Ups! Brak stacji do wyświetlenia!</div> -->
 
     <div class="table-wrapper" v-if="stations.length > 0">
       <table class="table">
-        <thead>
+        <thead class="table-head">
           <tr>
             <th v-for="(head, i) in headTitles" :key="i" @click="() => changeSorter(i)">
               <span>
@@ -15,16 +16,18 @@
                   <div v-if="head.length > 1">{{head[1]}}</div>
                 </div>
 
-                <Icon
-                  :name="`arrow-${sorterActive.type == 1 ? 'asc' : 'desc'}`"
+                <img
+                  class="icon"
                   v-if="sorterActive.index == i"
+                  :src="sorterActive.type == 1 ? icons.ascSVG : icons.descSVG"
+                  alt
                 />
               </span>
             </th>
           </tr>
         </thead>
 
-        <transition-group tag="tbody" name="table-anim">
+        <transition-group tag="tbody" class="table-body" name="table-anim">
           <tr
             class="table-item"
             v-for="(station, i) in computedStations"
@@ -32,27 +35,34 @@
             @click="() => { if(station.online) setFocusedStation(station.stationName) }"
           >
             <td
-              class="station-name"
+              class="item-station-name"
               :class="{'default-station': station.default, 'online': station.online}"
-            >{{station.stationName}} {{ station.reqLevel ? "| " + (parseInt(station.reqLevel) >= 2 ? station.reqLevel : "L") : "" }}</td>
-            <td class="hours">
+            >{{station.stationName}}</td>
+
+            <td class="item-station-level">
               <span
-                class="hour"
+                :style="calculateStyle(station.reqLevel)"
+              >{{ station.reqLevel ? (parseInt(station.reqLevel) >= 2 ? station.reqLevel : "L") : "" }}</span>
+            </td>
+
+            <td class="item-station-status">
+              <span
+                class="status"
                 :class="occupationClasses(station.occupiedTo)"
               >{{station.occupiedTo}}</span>
             </td>
 
-            <td class="disptacher-name">{{station.online ? station.dispatcherName : ""}}</td>
-            <td class="dispatcher-exp">
+            <td class="item-dispatcher-name">{{station.online ? station.dispatcherName : ""}}</td>
+            <td class="item-dispatcher-exp">
               <span
                 v-if="station.online"
                 :style="calculateStyle(station.dispatcherExp)"
               >{{station.dispatcherExp < 2 ? 'L' : station.dispatcherExp}}</span>
             </td>
             <td
-              class="users"
+              class="item-users"
             >{{station.online ? (station.currentUsers + "/" + station.maxUsers) : ""}}</td>
-            <td class="info">
+            <td class="item-info">
               <!-- <img
                 v-if="station.default"
                 :src="require(`@/assets/icon-td2.svg`)"
@@ -61,6 +71,7 @@
               />-->
 
               <img
+                class="icon-info"
                 v-if="station.controlType"
                 :src="require(`@/assets/icon-${station.controlType}.svg`)"
                 :alt="station.controlType"
@@ -68,6 +79,7 @@
               />
 
               <img
+                class="icon-info"
                 v-if="station.signalType"
                 :src="require(`@/assets/icon-${station.signalType}.svg`)"
                 :alt="station.signalType"
@@ -75,6 +87,7 @@
               />
 
               <img
+                class="icon-info"
                 v-if="station.SBL && station.SBL !== ''"
                 :src="require(`@/assets/icon-SBL.svg`)"
                 alt="SBL"
@@ -82,6 +95,7 @@
               />
 
               <img
+                class="icon-info"
                 v-if="!station.reqLevel || station.nonPublic"
                 :src="require(`@/assets/icon-lock.svg`)"
                 alt="non-public"
@@ -89,7 +103,7 @@
               />
             </td>
 
-            <td class="tracks twoway">
+            <td class="item-tracks twoway">
               <span
                 v-if="station.routes && station.routes.twoWay.catenary > 0"
                 class="track catenary"
@@ -103,7 +117,7 @@
               >{{station.routes.twoWay.noCatenary}}</span>
             </td>
 
-            <td class="tracks oneway">
+            <td class="item-tracks oneway">
               <span
                 v-if="station.routes && station.routes.oneWay.catenary > 0"
                 class="track catenary"
@@ -128,22 +142,28 @@ import Vue from "vue";
 import { mapGetters } from "vuex";
 
 import Card from "@/components/ui/Card.vue";
-import Icon from "@/components/ui/Icon.vue";
+
+const ascSVG = require("@/assets/icon-arrow-asc.svg");
+const descSVG = require("@/assets/icon-arrow-desc.svg");
 
 export default Vue.extend({
   name: "List",
   components: {
-    Card,
-    Icon
+    Card
   },
   data: () => ({
     focusedStationName: "",
+    icons: {
+      ascSVG,
+      descSVG
+    },
     sorterActive: { index: 0, type: 1 },
     headTitles: [
       ["Stacja"],
+      ["Wymagany poz.", "dyżurnego"],
       ["Status"],
       ["Dyżurny"],
-      ["Poziom"],
+      ["Poziom", "dyżurnego"],
       ["Maszyniści"],
       ["Informacje", "ogólne"],
       ["Szlaki", "dwutorowe"],
@@ -157,7 +177,7 @@ export default Vue.extend({
       const type: number = this.sorterActive.type;
 
       const sortByName = (a, b) => {
-        if (a.stationName > b.stationName) return type;
+        if (a.stationName >= b.stationName) return type;
         if (a.stationName < b.stationName) return -type;
       };
 
@@ -169,59 +189,56 @@ export default Vue.extend({
 
         case 1:
           sortFun = (a, b) => {
-            if (a.occupiedTo > b.occupiedTo) return type;
-            if (a.occupiedTo < b.occupiedTo) return -type;
+            if (parseInt(a.reqLevel) > parseInt(b.reqLevel)) return type;
+            if (parseInt(a.reqLevel) < parseInt(b.reqLevel)) return -type;
 
-            sortByName(a, b);
-
-            return 0;
+            return sortByName(a, b);
           };
           break;
 
         case 2:
           sortFun = (a, b) => {
-            if (a.dispatcherName > b.dispatcherName) return type;
-            if (a.dispatcherName < b.dispatcherName) return -type;
+            if (a.statusTimestamp > b.statusTimestamp) return type;
+            if (a.statusTimestamp < b.statusTimestamp) return -type;
 
-            sortByName(a, b);
-
-            return 0;
+            return sortByName(a, b);
           };
           break;
 
         case 3:
           sortFun = (a, b) => {
-            if (a.dispatcherExp > b.dispatcherExp) return type;
-            if (a.dispatcherExp < b.dispatcherExp) return -type;
+            if (a.dispatcherName > b.dispatcherName) return type;
+            if (a.dispatcherName < b.dispatcherName) return -type;
 
-            // TO DO: naprawić bugujące się sortowanie
-
-            // sortByName(a, b);
-
-            return 0;
+            return sortByName(a, b);
           };
           break;
 
         case 4:
           sortFun = (a, b) => {
-            if (a.currentUsers > b.currentUsers) return type;
-            if (a.currentUsers < b.currentUsers) return -type;
+            if (a.dispatcherExp > b.dispatcherExp) return type;
+            if (a.dispatcherExp < b.dispatcherExp) return -type;
 
-            sortByName(a, b);
-
-            return 0;
+            return sortByName(a, b);
           };
           break;
 
         case 5:
+          sortFun = (a, b) => {
+            if (a.currentUsers > b.currentUsers) return type;
+            if (a.currentUsers < b.currentUsers) return -type;
+
+            return sortByName(a, b);
+          };
+          break;
+
+        case 6:
           sortFun = (a, b) => {
             if (a.currentUsers > b.currentUsers) return type;
             if (a.currentUsers < b.currentUsers) return -type;
 
             if (a.maxUsers > b.maxUsers) return type;
             if (a.maxUsers < b.maxUsers) return -type;
-
-            return 0;
           };
           break;
       }
@@ -236,7 +253,7 @@ export default Vue.extend({
   },
   methods: {
     changeSorter(index: number) {
-      if (index >= 5) return;
+      if (index > 5) return;
 
       if (index == this.sorterActive.index)
         this.sorterActive.type = this.sorterActive.type == 1 ? -1 : 1;
@@ -284,7 +301,8 @@ export default Vue.extend({
     },
 
     setFocusedStation(name: string) {
-      this.focusedStationName = name;
+      if (this.focusedStationName == name) this.focusedStationName = "";
+      else this.focusedStationName = name;
     },
 
     closeCard() {
@@ -298,7 +316,20 @@ export default Vue.extend({
 @import "../../styles/variables.scss";
 @import "../../styles/responsive.scss";
 
-.hour {
+.card-anim {
+  &-enter-active,
+  &-leave-active {
+    transition: all 0.25s ease-in-out;
+  }
+
+  &-enter,
+  &-leave-to {
+    transform: translate(-45%, -50%);
+    opacity: 0;
+  }
+}
+
+.status {
   padding: 0.4em;
   border-radius: 1rem;
   font-weight: bold;
@@ -358,16 +389,16 @@ export default Vue.extend({
   white-space: nowrap;
   border-collapse: collapse;
 
-  font-size: calc(0.6rem + 0.35vw);
+  font-size: calc(0.55rem + 0.35vw);
 
   @include smallScreen() {
     font-size: 0.75rem;
   }
 
-  th {
+  &-head th {
     padding: 0.3rem;
     background-color: #444;
-    min-width: 150px;
+    min-width: 140px;
 
     cursor: pointer;
     user-select: none;
@@ -385,7 +416,7 @@ export default Vue.extend({
     }
   }
 
-  tr {
+  &-item {
     background-color: #5c5b5b;
 
     &:nth-child(even) {
@@ -398,7 +429,7 @@ export default Vue.extend({
       background-color: #818181;
     }
 
-    td {
+    & > td {
       padding: 0.3rem 1rem;
       margin: 0 3rem;
       text-align: center;
@@ -411,10 +442,14 @@ export default Vue.extend({
         padding: 0.1rem 0.5rem;
       }
     }
+  }
 
-    .dispatcher-exp {
-      & > span {
+  .item {
+    &-station-level,
+    &-dispatcher-exp {
+      span {
         display: block;
+
         width: 2em;
         height: 2em;
         line-height: 2em;
@@ -422,8 +457,15 @@ export default Vue.extend({
       }
     }
 
-    .info,
-    .tracks {
+    &-station-level {
+      span {
+        background-color: #888;
+        border-radius: 50%;
+      }
+    }
+
+    &-info,
+    &-tracks {
       img {
         width: 2.2em;
         margin: 0 0.2em;
@@ -431,17 +473,19 @@ export default Vue.extend({
       }
     }
 
-    .no-catenary {
-      background-color: #939393;
-    }
+    &-tracks {
+      .no-catenary {
+        background-color: #939393;
+      }
 
-    .catenary {
-      background-color: #009dce;
-    }
+      .catenary {
+        background-color: #009dce;
+      }
 
-    .track {
-      margin: 0 0.3rem;
-      padding: 0.5em;
+      .track {
+        margin: 0 0.3rem;
+        padding: 0.5em;
+      }
     }
   }
 }

src/components/ui/OptionCard.vue

@@ -1,57 +1,55 @@
 <template>
-  <transition name="appear">
-    <section class="option-card">
-      <div class="card-exit" @click="exit">
-        <img :src="require('@/assets/icon-exit.svg')" alt="exit icon" />
-      </div>
+  <section class="option-card">
+    <div class="card-exit" @click="exit">
+      <img :src="require('@/assets/icon-exit.svg')" alt="exit icon" />
+    </div>
 
-      <div class="card-title flex">FILTRUJ STACJE</div>
+    <div class="card-title flex">FILTRUJ STACJE</div>
 
-      <div class="card-options">
-        <div class="option" v-for="(option, i) in inputs.options" :key="i">
-          <label class="option-label">
-            <input
-              class="option-input"
-              type="checkbox"
-              :name="option.name"
-              :defaultValue="option.defaultValue"
-              :id="option.id"
-              v-model="option.value"
-              @change="handleChange"
-            />
-            <span class="option-content" :class="option.section">{{option.content}}</span>
-          </label>
-        </div>
-      </div>
-
-      <div class="card-sorts">
-        <!-- <div class="sort" v-for="(sort, i) in inputs.sorts" :key="i">{{ sort.content }}</div> -->
-      </div>
-
-      <div class="card-sliders">
-        <div class="slider" v-for="(slider, i) in inputs.sliders" :key="i">
+    <div class="card-options">
+      <div class="option" v-for="(option, i) in inputs.options" :key="i">
+        <label class="option-label">
           <input
-            class="slider-input"
-            type="range"
-            :name="slider.name"
-            :id="slider.id"
-            :min="slider.minRange"
-            :max="slider.maxRange"
-            v-model="slider.value"
-            @change="handleInput"
+            class="option-input"
+            type="checkbox"
+            :name="option.name"
+            :defaultValue="option.defaultValue"
+            :id="option.id"
+            v-model="option.value"
+            @change="handleChange"
           />
-
-          <span class="slider-value">{{slider.value}}</span>
-
-          <div class="slider-content">{{slider.content}}</div>
-        </div>
+          <span class="option-content" :class="option.section">{{option.content}}</span>
+        </label>
       </div>
+    </div>
 
-      <div class="card-reset flex">
-        <button class="button" @click="reset">RESET FILTRÓW</button>
+    <div class="card-sorts">
+      <!-- <div class="sort" v-for="(sort, i) in inputs.sorts" :key="i">{{ sort.content }}</div> -->
+    </div>
+
+    <div class="card-sliders">
+      <div class="slider" v-for="(slider, i) in inputs.sliders" :key="i">
+        <input
+          class="slider-input"
+          type="range"
+          :name="slider.name"
+          :id="slider.id"
+          :min="slider.minRange"
+          :max="slider.maxRange"
+          v-model="slider.value"
+          @change="handleInput"
+        />
+
+        <span class="slider-value">{{slider.value}}</span>
+
+        <div class="slider-content">{{slider.content}}</div>
       </div>
-    </section>
-  </transition>
+    </div>
+
+    <div class="card-reset flex">
+      <button class="button" @click="reset">RESET FILTRÓW</button>
+    </div>
+  </section>
 </template>
 
 <script lang="ts">
@@ -111,16 +109,6 @@ export default class OptionCard extends Vue {
 @import "../../styles/responsive";
 @import "../../styles/variables";
 
-.appear-enter-active,
-.appear-leave-active {
-  transition: all 0.3s ease;
-}
-
-.appear-enter,
-.appear-leave-to {
-  opacity: 0;
-}
-
 .option-card {
   position: fixed;
   top: 50%;

src/components/ui/Options.vue

@@ -2,12 +2,14 @@
   <div class="options">
     <div class="options-actions">
       <button class="action-btn button" :class="{'open': filterCardOpen}" @click="toggleCardState">
-        <img :src="require('@/assets/icon-filter2.svg')" alt="icon-filter" /> OPCJE
+        <img :src="require('@/assets/icon-filter2.svg')" alt="icon-filter" />
       </button>
     </div>
 
     <keep-alive>
-      <OptionCard v-if="filterCardOpen" :exit="toggleCardState" />
+      <transition name="card-anim">
+        <OptionCard v-if="filterCardOpen" :exit="toggleCardState" />
+      </transition>
     </keep-alive>
   </div>
 </template>
@@ -33,6 +35,19 @@ export default class Options extends Vue {
 @import "../../styles/variables.scss";
 @import "../../styles/responsive.scss";
 
+.card-anim {
+  &-enter-active,
+  &-leave-active {
+    transition: all 0.25s ease-in-out;
+  }
+
+  &-enter,
+  &-leave-to {
+    transform: translate(-45%, -50%);
+    opacity: 0;
+  }
+}
+
 .options {
   font-size: calc(0.6rem + 0.9vw);
 
@@ -42,9 +57,6 @@ export default class Options extends Vue {
 }
 
 .action-btn {
-  font-size: 0.75em;
-  margin: 0 0.2em;
-
   img {
     width: 1.3em;
   }