Zmiany w wyglądzie filtrów, responsywność

src/components/ui/Card.vue

@@ -1,4 +1,5 @@
 <template>
+  <transition name="card-anim">
     <div class="card" v-if="stationInfo">
       <div class="card-exit" @click="closeCard">X</div>
 
@@ -54,7 +55,7 @@
           <span
             v-if="stationInfo.reqLevel"
             :title="'Wymagany poziom dyżurnego: ' +  stationInfo.reqLevel"
-        >{{parseInt(stationInfo.reqLevel) < 2 ? "L" : stationInfo.reqLevel}}</span>
+          >{{(parseInt(stationInfo.reqLevel) < 2) ? "L" : stationInfo.reqLevel}}</span>
         </div>
 
         <div class="station-info"></div>
@@ -124,6 +125,7 @@
         </div>
       </div>
     </div>
+  </transition>
 </template>
 
 <script lang="ts">
@@ -149,27 +151,34 @@ 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;
   position: fixed;
   top: 50%;
   left: 50%;
-
+  transform: translate(-50%, -50%);
-  display: flex;
-  flex-direction: column;
-
   z-index: 2;
 
-  transform: translate(-50%, -50%);
-  background: #474747;
-
-  max-height: 95%;
-
   overflow: auto;
+  background: #474747;
+  box-shadow: 0 0 15px 5px #474747;
 
   width: 65%;
   max-width: 650px;
-
+  max-height: 95%;
-  box-shadow: 0 0 15px 5px #474747;
 
   font-size: calc(0.6rem + 0.5vw);
 
@@ -181,9 +190,7 @@ export default Vue.extend({
     position: absolute;
     top: 0;
     right: 0;
-
     padding: 1rem;
-
     font-size: calc(1rem + 0.7vw);
 
     cursor: pointer;
@@ -196,7 +203,6 @@ export default Vue.extend({
 
     align-items: center;
     text-align: center;
-
     padding: 1em;
 
     & > div {
@@ -208,7 +214,6 @@ export default Vue.extend({
   &-upper {
     background: #959595;
     text-align: center;
-
     padding: 0.2em;
   }
 }
@@ -235,17 +240,16 @@ export default Vue.extend({
   }
 
   &-icons {
-    padding: 0.5rem;
-
     display: flex;
     justify-content: center;
     align-items: center;
+    padding: 0.5rem;
 
     img,
     span {
+      margin: 0 0.5em;
       width: 2.5em;
       height: 2.5em;
-      margin: 0 0.5em;
     }
 
     span {
@@ -257,9 +261,9 @@ export default Vue.extend({
 
       font-weight: bold;
 
+      user-select: none;
       -moz-user-select: none;
       -webkit-user-select: none;
-      user-select: none;
     }
   }
 }
@@ -271,6 +275,8 @@ export default Vue.extend({
   justify-content: center;
   align-items: center;
 
+  text-align: center;
+
   @include smallScreen() {
     flex-direction: column;
   }
@@ -280,12 +286,12 @@ export default Vue.extend({
     justify-content: center;
     align-items: center;
 
-    border: 2px solid #ffbb00;
-    border-radius: 50%;
-    font-size: 1.3em;
-
     width: 2em;
     height: 2em;
+
+    font-size: 1.3em;
+    border: 2px solid #ffbb00;
+    border-radius: 50%;
   }
 
   &-name {
@@ -298,8 +304,6 @@ export default Vue.extend({
       margin-left: 0;
       margin-top: 0.2em;
     }
-
-    text-align: center;
   }
 }
 
@@ -327,7 +331,6 @@ export default Vue.extend({
   display: flex;
   justify-content: center;
   align-items: center;
-
   flex-direction: column;
 
   &-content {
@@ -343,7 +346,6 @@ export default Vue.extend({
   display: flex;
   justify-content: center;
   align-items: center;
-
   flex-direction: column;
 
   &-content {
@@ -369,7 +371,6 @@ export default Vue.extend({
   display: flex;
   justify-content: space-between;
   align-items: center;
-
   flex-direction: column;
 
   overflow: hidden;

src/components/ui/List.vue

@@ -2,8 +2,10 @@
   <div class="list">
     <Card :stationInfo="focusedStationInfo" :closeCard="closeCard" />
 
+    <!-- <div class="info">Ups! Brak stacji do wyświetlenia!</div> -->
+
     <div class="table-wrapper">
-      <table class="table">
+      <table class="table" v-if="stations.length > 0">
         <thead>
           <tr>
             <th>Stacja</th>
@@ -248,7 +250,7 @@ export default Vue.extend({
   font-size: calc(0.6rem + 0.4vw);
 
   @include smallScreen() {
-    font-size: 0.5rem;
+    font-size: 0.65rem;
   }
 
   thead th {

src/components/ui/Options.vue

@@ -12,7 +12,7 @@
 
     <transition name="slide">
       <keep-alive>
-        <ListFilter v-if="filtersOpen" />
+        <ListFilter v-if="filtersOpen" :exit="() => filtersOpen = !filtersOpen" />
       </keep-alive>
     </transition>
   </div>
@@ -45,15 +45,14 @@ export default Vue.extend({
 
 .slide-enter,
 .slide-leave-to {
-  transform: translateX(10px);
+  transform: translate(-40%, -50%);
   opacity: 0;
 }
 
 .options {
-  position: relative;
   font-size: calc(0.6rem + 0.9vw);
 
-  display: flex;
+  // display: flex;
 }
 
 button {

src/components/utils/ListFilter.vue

@@ -1,5 +1,7 @@
 <template>
   <div class="list-filter">
+    <div class="exit" @click="exitFilters">X</div>
+    <div class="list-filter-title">FILTRY</div>
     <ul class="grid">
       <li class="grid-row">
         <div class="grid-col" v-for="(el, i) in gridElements" :key="i">
@@ -275,6 +277,7 @@ export default Vue.extend({
       }
     }
   }),
+  props: ["exit"],
   methods: {
     ...mapActions(["setFilter", "resetFilters"]),
     handleChange(e: any) {
@@ -303,6 +306,9 @@ export default Vue.extend({
       this.twoWayOther = 0;
 
       this.resetFilters();
+    },
+    exitFilters() {
+      this.exit();
     }
   }
 });
@@ -313,28 +319,46 @@ export default Vue.extend({
 @import "../../styles/variables";
 
 .list-filter {
-  position: absolute;
+  position: fixed;
-  top: 100%;
+  top: 50%;
-  left: 0;
+  left: 50%;
-  padding: 0.3rem;
 
-  @include smallScreen() {
+  overflow: auto;
-    width: 100vw;
+  max-height: 90%;
-  }
 
+  padding: 0.4em;
+
+  background: rgba(black, 0.85);
   white-space: nowrap;
-
+  transform: translate(-50%, -50%);
   font-size: calc(0.6rem + 0.4vw);
 
   @include smallScreen() {
-    font-size: 0.65rem;
+    width: 100vw;
+    font-size: 0.75em;
   }
 }
 
+.exit {
+  position: absolute;
+  top: 0;
+  right: 0;
+
+  padding: 0.4rem;
+
+  font-size: calc(1rem + 0.4vw);
+
+  cursor: pointer;
+}
+
+.list-filter-title {
+  text-align: center;
+  padding: 0.3rem;
+  font-size: 1.6em;
+  font-weight: bold;
+}
+
 .grid {
-  background: rgba(black, 0.65);
-  padding: 0.5rem;
-
   &-row {
     display: flex;
     justify-content: center;

src/store/modules/store.ts

@@ -196,6 +196,7 @@ class Store extends VuexModule {
     public filterStations() {
         this.filteredStations = this.stations.filter(station => {
 
+
             if ((station.nonPublic || !station.reqLevel) && this.filters['nonPublic']) return false;
             if (!station.reqLevel) return true;