Zmieniono położenie filtrów

src/components/states/Error.vue

@@ -19,6 +19,8 @@ export default {
   justify-content: center;
   align-items: center;
 
+  min-height: 100vh;
+
   flex-direction: column;
 
   font-size: calc(1rem + 1.5vw);

src/components/states/Loading.vue

@@ -13,6 +13,8 @@ export default Vue.extend({});
   justify-content: center;
   align-items: center;
 
+  min-height: 100vh;
+
   font-size: calc(0.75rem + 1vw);
 
   color: #fdc62f;

src/components/ui/List.vue

@@ -2,8 +2,6 @@
   <div class="list">
     <Card :stationInfo="focusedStationInfo" :closeCard="closeCard" />
 
-    <Options />
-
     <div class="table-wrapper">
       <table class="table">
         <thead>
@@ -115,13 +113,11 @@ import Vue from "vue";
 import { mapGetters } from "vuex";
 
 import Card from "@/components/ui/Card.vue";
-import Options from "@/components/ui/Options.vue";
 
 export default Vue.extend({
   name: "List",
   components: {
-    Card,
-    Options
+    Card
   },
   data: () => ({
     focusedStationName: ""
@@ -238,7 +234,7 @@ ul {
 
 .list {
   display: flex;
-  flex-direction: column;
+  justify-content: center;
 }
 
 .default-station {
@@ -246,8 +242,13 @@ ul {
 }
 
 .table {
+  &-wrapper {
+    overflow: auto;
+  }
+
   display: block;
-  overflow-y: hidden;
+
+  max-height: 100vh;
 
   white-space: nowrap;
   border-collapse: collapse;
@@ -258,6 +259,7 @@ ul {
   thead th {
     padding: 0.8rem;
     background-color: #444;
+    min-width: 100px;
   }
 
   tr {

src/components/ui/Options.vue

@@ -1,7 +1,11 @@
 <template>
   <div class="options">
     <div class="option-buttons">
-      <button class="button-filters" @click="filtersOpen = !filtersOpen">FILTRY</button>
+      <button
+        class="button-filters"
+        :class="{'open': filtersOpen}"
+        @click="filtersOpen = !filtersOpen"
+      >FILTRY</button>
     </div>
 
     <div class="option-wrapper">
@@ -29,30 +33,57 @@ export default Vue.extend({
 
 
 <style lang="scss" scoped>
+@import "../../styles/variables.scss";
+@import "../../styles/responsive.scss";
+
 .options {
   font-size: calc(0.7rem + 0.5vw);
+
+  display: flex;
+  padding: 1rem;
+
+  @include smallScreen() {
+    flex-direction: column;
+    padding: 1rem 0;
+  }
 }
 
-button.button-filters {
+button {
   color: #e0e0e0;
-  font-size: 0.9em;
+  font-size: 1em;
+
+  background: #333;
+  border: none;
 
-  border: 2px solid #e0e0e0;
-  background: rgba(#e0e0e0, 0.2);
   outline: none;
 
-  border-radius: 0.5em;
-
   padding: 0.5em;
-  margin: 0.4em 0;
 
   cursor: pointer;
 
-  transition: background 0.4s, color 0.4s;
+  border-left: 3px solid white;
+  transition: all 0.3s;
+
+  @include smallScreen {
+    border-left: none;
+    border-top: 2px solid white;
+  }
+
+  &.open {
+    color: $accentCol;
+    border-radius: 1em 0 0 1em;
+    border: none;
+
+    @include smallScreen() {
+      border-radius: 1em 1em 0 0;
+    }
+
+    font-weight: bold;
+  }
 
   &:hover {
     color: #ffffff;
-    background: rgba(#e0e0e0, 0.4);
+    background: rgba(#e0e0e0, 0.1);
   }
 
   img {

src/components/utils/ListFilter.vue

@@ -1,61 +1,15 @@
 <template>
   <div class="list-filter">
-    <div class="filter-content">
-      <div class="content-row">
-        <div class="content-column">
-          <div class="column-title">Dostępność:</div>
+    <div class="filter-grid">
+      <div class="grid-row">
+        <div class="grid-column" v-for="(el, i) in gridElements" :key="i">
+          <div class="column-title">{{el.title}}</div>
 
-          <div class="content-item">
-            <input type="checkbox" id="is-default" checked @change="handleChange" />
-            <label for="is-default">W paczce z grą</label>
-          </div>
-
-          <div class="content-item">
-            <input type="checkbox" id="not-default" checked @change="handleChange" />
-            <label for="not-default">Poza paczką z grą</label>
-          </div>
-        </div>
-
-        <div class="content-column">
-          <div class="column-title">Sterowanie:</div>
-
-          <div class="content-item">
-            <input type="checkbox" id="control-SPK" checked @change="handleChange" />
-            <label for="control-SPK">SPK</label>
-          </div>
-
-          <div class="content-item">
-            <input type="checkbox" id="control-SCS" checked @change="handleChange" />
-            <label for="control-SCS">SCS</label>
-          </div>
-
-          <div class="content-item">
-            <input type="checkbox" id="control-hands" checked @change="handleChange" />
-            <label for="control-hands">ręczne</label>
-          </div>
-
-          <div class="content-item">
-            <input type="checkbox" id="control-levers" checked @change="handleChange" />
-            <label for="control-levers">mechaniczne</label>
-          </div>
-        </div>
-
-        <div class="content-column">
-          <div class="column-title">Sygnalizacja:</div>
-
-          <div class="content-item">
-            <input type="checkbox" id="signals-modern" checked @change="handleChange" />
-            <label for="signals-modern">współczesna</label>
-          </div>
-
-          <div class="content-item">
-            <input type="checkbox" id="signals-mixed" checked @change="handleChange" />
-            <label for="signals-mixed">mieszana</label>
-          </div>
-
-          <div class="content-item">
-            <input type="checkbox" id="signals-historic" checked @change="handleChange" />
-            <label for="signals-historic">kształtowa</label>
+          <div class="column-content">
+            <div class="grid-item" v-for="(item, i) in el.items" :key="i">
+              <input :type="el.type" :id="item.id" :name="item.name" checked @change="handleChange" />
+              <label :for="item.id">{{ item.content }}</label>
+            </div>
           </div>
         </div>
       </div>
@@ -64,21 +18,98 @@
 </template>
 
 <script lang="ts">
-import Vue from "vue";
+import { Vue, Component } from "vue-property-decorator";
 import { mapActions } from "vuex";
 
 export default Vue.extend({
   name: "list-filter",
-  data: () => ({}),
-  methods: {
-    ...mapActions(["addFilter", "removeFilter"]),
-    handleChange(e: any) {
-      // this.$store.commit(e.target.checked ? "removeFilter" : "addFilter", {
-      //   id: e.target.id
-      // });
+  data: () => ({
+    gridElements: {
+      access: {
+        title: "Dostępność",
+        type: "checkbox",
+        items: [
+          {
+            id: "is-default",
+            name: "default",
+            content: "w paczce z grą"
+          },
+          {
+            id: "not-default",
+            name: "notDefault",
+            content: "poza paczką z grą"
+          },
+          {
+            id: "non-public",
+            name: "nonPublic",
+            content: "niepubliczna"
+          }
+        ]
+      },
 
-      if (e.target.checked) this.removeFilter(e.target.id);
-      else this.addFilter(e.target.id);
+      control: {
+        title: "Sterowanie",
+        type: "checkbox",
+
+        items: [
+          {
+            id: "SPK",
+            name: "SPK",
+            content: "SPK"
+          },
+          {
+            id: "SCS",
+            name: "SCS",
+            content: "SCS"
+          },
+          {
+            id: "by-hand",
+            name: "ręczne",
+            content: "ręczne"
+          },
+          {
+            id: "levers",
+            name: "mechaniczne",
+            content: "mechaniczne"
+          }
+        ]
+      },
+
+      signals: {
+        title: "Sygnalizacja",
+        type: "checkbox",
+
+        items: [
+          {
+            id: "modern",
+            name: "współczesna",
+            content: "współczesna"
+          },
+          {
+            id: "semaphore",
+            name: "kształtowa",
+            content: "kształtowa"
+          },
+          {
+            id: "mixed",
+            name: "mieszana",
+            content: "mieszana"
+          },
+          {
+            id: "historic",
+            name: "historyczna",
+            content: "historyczna"
+          }
+        ]
+      }
+    }
+  }),
+  methods: {
+    ...mapActions(["addFilters", "removeFilters"]),
+    handleChange(e: any) {
+      if (e.target.checked) {
+        this.removeFilters([e.target.name]);
+      } else this.addFilters([e.target.name]);
     }
   }
 });
@@ -91,20 +122,19 @@ export default Vue.extend({
   display: flex;
 
   font-size: calc(0.6rem + 0.4vw);
-}
-
-.filter-content {
-  background: #333;
-  border-top-left-radius: 1rem;
-  border-top-right-radius: 1rem;
-  padding: 0.3rem;
 
   @include smallScreen() {
     width: 100%;
   }
 }
 
-.content {
+.filter-grid {
+  background: #333;
+  border-radius: 0 1rem 1rem 1rem;
+  padding: 0.3rem;
+}
+
+.grid {
   &-row {
     display: flex;
     justify-content: center;