Responsywność i ułożenie opcji filtrów

src/components/JournalView/JournalDispatchersList.vue

@@ -125,7 +125,7 @@ li.sticky {
 }
 
 .journal_day {
-  margin: 1em 0;
+  margin-bottom: 1em;
   padding: 0.5em;
   font-weight: bold;
 

src/components/JournalView/JournalOptions.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="journal-options">
+  <div class="filters-options">
     <div class="bg" v-if="showOptions" @click="showOptions = false"></div>
 
     <button class="btn--image" @click="showOptions = !showOptions">
@@ -10,7 +10,7 @@
     <transition name="options-anim">
       <div class="options_wrapper" v-if="showOptions">
         <div class="options_content">
-          <h1>{{ $t('options.sort-title') }}</h1>
+          <h1 class="option-title">{{ $t('options.sort-title') }}</h1>
 
           <div class="options_sorters">
             <div v-for="opt in translatedSorterOptions">
@@ -20,7 +20,7 @@
             </div>
           </div>
 
-          <h1 v-if="filters.length != 0">{{ $t('options.filter-title') }}</h1>
+          <h1 class="option-title" v-if="filters.length != 0">{{ $t('options.filter-title') }}</h1>
           <div class="options_filters">
             <button
               v-for="filter in filters"
@@ -33,7 +33,7 @@
             </button>
           </div>
 
-          <h1>{{ $t('options.search-title') }}</h1>
+          <h1 class="option-title">{{ $t('options.search-title') }}</h1>
           <div class="search_content">
             <div class="search" v-for="(_, propName) in searchersValues" :key="propName">
               <label v-if="propName == 'search-date'" for="date">{{ $t('options.search-date') }}</label>
@@ -167,160 +167,5 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/responsive.scss';
+@import '../../styles/filters_options.scss';
-@import '../../styles/search_box.scss';
-@import '../../styles/variables.scss';
-
-.options-anim {
-  &-enter-from,
-  &-leave-to {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-
-  &-enter-active,
-  &-leave-active {
-    transition: all 150ms ease;
-  }
-}
-
-.bg {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-
-  z-index: 10;
-}
-
-.journal-options {
-  position: relative;
-}
-
-.options_wrapper {
-  position: absolute;
-
-  background-color: #111111ee;
-  box-shadow: 0 0 10px 2px #111;
-
-  width: 100%;
-  max-width: 500px;
-
-  padding: 1em;
-
-  z-index: 100;
-}
-
-h1 {
-  position: relative;
-  font-size: 1.1em;
-  margin: 0.7em 0 0.25em 0;
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: -4px;
-
-    width: 50%;
-    height: 2px;
-    background-color: white;
-    border-radius: 2px;
-  }
-}
-
-.options_sorters {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-
-  padding: 0.25em 0.25em 0 0;
-}
-
-.options_filters {
-  display: flex;
-  flex-wrap: wrap;
-  margin: 0.5em 0 0 0;
-}
-
-.sort-option,
-.filter-option {
-  margin: 0 0.25em 0 0;
-}
-
-.sort-option[data-selected='true'] {
-  color: $accentCol;
-  font-weight: bold;
-}
-
-.filter-option {
-  &#abandoned {
-    color: salmon;
-  }
-
-  &#fulfilled {
-    color: lightgreen;
-  }
-
-  &#active {
-    color: lightblue;
-  }
-}
-
-.search_content > .search {
-  margin: 0.5em auto;
-}
-
-.search_content > button {
-  display: flex;
-  justify-content: center;
-  margin: 0 auto;
-}
-
-.search_content > .search_actions {
-  display: flex;
-  margin: 1em 0 0.5em 0;
-
-  button {
-    margin: 0.25em 0.5em;
-  }
-}
-
-.data-status {
-  display: flex;
-  justify-content: center;
-  font-size: 1.1em;
-
-  height: 1.5em;
-}
-
-@include smallScreen() {
-  h1 {
-    text-align: center;
-
-    &::before {
-      width: 75%;
-      left: 50%;
-      transform: translateX(-50%);
-    }
-  }
-
-  .options_wrapper {
-    max-width: 100%;
-  }
-
-  .btn--image {
-    margin: 0 auto;
-  }
-
-  .filter-option,
-  .sort-option {
-    margin: 0.25em 0.25em;
-  }
-
-  .options_filters,
-  .options_sorters {
-    justify-content: center;
-  }
-}
 </style>

src/components/TrainsView/TrainOptions.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="train-options">
+  <div class="filters-options">
     <div class="bg" v-if="showOptions" @click="showOptions = false"></div>
 
-    <button class="btn--open" @click="showOptions = !showOptions">
+    <button class="btn--image" @click="showOptions = !showOptions">
       <img :src="getIcon('filter2')" alt="Open filters" />
       {{ $t('options.filters') }}
     </button>
@@ -10,7 +10,7 @@
     <transition name="options-anim">
       <div class="options_wrapper" v-if="showOptions">
         <div class="options_content">
-          <h1>{{ $t('options.sort-title') }}</h1>
+          <h1 class="option-title">{{ $t('options.sort-title') }}</h1>
           <div class="options_sorters">
             <div v-for="opt in translatedSorterOptions">
               <button class="sort-option" :data-selected="opt.id == sorterActive.id" @click="onSorterChange(opt)">
@@ -19,7 +19,7 @@
             </div>
           </div>
 
-          <h1 v-if="trainFilterList.length != 0">{{ $t('options.filter-title') }}</h1>
+          <h1 class="option-title" v-if="trainFilterList.length != 0">{{ $t('options.filter-title') }}</h1>
           <div class="options_filters">
             <div class="filter-option" v-for="filter in trainFilterList">
               <button class="btn--option" :data-disabled="!filter.isActive" @click="onFilterChange(filter)">
@@ -35,8 +35,9 @@
               <button @click="resetAllFilters">{{ $t('options.filter-reset') }}</button>
             </div>
           </div>
-          <h1>{{ $t('options.search-title') }}</h1>
+
-          <div class="content_search">
+          <h1 class="option-title">{{ $t('options.search-title') }}</h1>
+          <div class="search_content">
             <div class="search-box">
               <input class="search-input" :placeholder="$t(`options.search-train`)" v-model="searchedTrain" />
               <button class="search-exit">
@@ -134,119 +135,18 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/responsive.scss';
+@import '../../styles/filters_options.scss';
-@import '../../styles/search_box.scss';
-@import '../../styles/variables.scss';
 
-.options-anim {
+.search_content > div {
-  &-enter-from,
-  &-leave-to {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-
-  &-enter-active,
-  &-leave-active {
-    transition: all 150ms ease;
-  }
-}
-
-.bg {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-
-  z-index: 10;
-}
-
-.journal-options {
-  position: relative;
-
-  margin-bottom: 0.5em;
-}
-
-.options_wrapper {
-  position: absolute;
-
-  background-color: #111111ee;
-  box-shadow: 0 0 10px 2px #111;
-
-  width: 100%;
-  max-width: 500px;
-
-  padding: 1em;
-
-  z-index: 100;
-}
-
-.btn--open {
-  display: flex;
-
-  padding: 0.4em 1em;
-  font-weight: bold;
-  font-size: 1em;
-
-  border-radius: 0.75em 0.75em 0 0;
-
-  img {
-    height: 1.3em;
-    margin-right: 0.5em;
-  }
-}
-
-h1 {
-  position: relative;
-  font-size: 1.1em;
-  margin: 0.7em 0 0.25em 0;
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: -4px;
-
-    width: 50%;
-    height: 2px;
-    background-color: white;
-    border-radius: 2px;
-  }
-}
-
-.options_sorters {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-
-  padding: 0.25em 0.25em 0 0;
-}
-
-.content_search > div {
   margin: 0.5em auto;
 }
 
-.content_search > button {
+.search_content > button {
   display: flex;
   justify-content: center;
   margin: 0 auto;
 }
 
-.options_filters {
-  display: flex;
-  flex-wrap: wrap;
-  margin: 0.5em 0 0 0;
-}
-
-.sort-option,
-.filter-option {
-  margin: 0.25em 0.25em 0.25em 0;
-}
-
-.sort-option[data-selected='true'] {
-  color: $accentCol;
-  font-weight: bold;
-}
-
 .filter-option {
   button {
     color: white;
@@ -257,29 +157,4 @@ h1 {
     }
   }
 }
-
-@include smallScreen() {
-  h1 {
-    text-align: center;
-
-    &::before {
-      width: 75%;
-      left: 50%;
-      transform: translateX(-50%);
-    }
-  }
-
-  .options_wrapper {
-    max-width: 100%;
-  }
-
-  .btn--open {
-    margin: 0 auto;
-  }
-
-  .options_filters,
-  .options_sorters {
-    justify-content: center;
-  }
-}
 </style>

src/styles/JournalSection.scss

@@ -68,7 +68,7 @@
 }
 
 @include smallScreen() {
-  .journal_wrapper {
+  .list_wrapper {
     font-size: 1.25em;
   }
 
@@ -79,7 +79,7 @@
 }
 
 @media (orientation: landscape) {
-  .journal_wrapper {
+  .list_wrapper {
     font-size: 1em;
   }
 }

src/styles/filters_options.scss

@@ -0,0 +1,149 @@
+@import './responsive.scss';
+@import 'variables.scss';
+@import 'search_box.scss';
+
+h1.option-title {
+  position: relative;
+  font-size: 1.1em;
+  margin: 0.7em 0 0.25em 0;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: -4px;
+
+    width: 50%;
+    height: 2px;
+    background-color: white;
+    border-radius: 2px;
+  }
+}
+
+.options-anim {
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+
+  &-enter-active,
+  &-leave-active {
+    transition: all 150ms ease;
+  }
+}
+
+.bg {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+
+  z-index: 10;
+}
+
+.filters-options {
+  position: relative;
+  margin-bottom: 0.5em;
+}
+
+.options_wrapper {
+  position: absolute;
+
+  background-color: #111111ee;
+  box-shadow: 0 0 15px 5px #000000b3;
+
+  width: 100%;
+  max-width: 500px;
+
+  padding: 1em;
+
+  z-index: 100;
+}
+
+.options_sorters {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+
+  padding: 0.25em 0.25em 0 0;
+}
+
+.options_filters {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0.5em 0 0 0;
+}
+
+.sort-option,
+.filter-option {
+  margin: 0.25em 0.25em 0.25em 0;
+}
+
+.sort-option[data-selected='true'] {
+  color: $accentCol;
+  font-weight: bold;
+}
+
+.filter-option {
+  &#abandoned {
+    color: salmon;
+  }
+
+  &#fulfilled {
+    color: lightgreen;
+  }
+
+  &#active {
+    color: lightblue;
+  }
+}
+
+.search_content > .search {
+  margin: 0.5em auto;
+}
+
+.search_content > button {
+  display: flex;
+  justify-content: center;
+  margin: 0 auto;
+}
+
+.search_content > .search_actions {
+  display: flex;
+  margin: 1em 0 0.5em 0;
+
+  button {
+    margin: 0.25em 0.5em;
+  }
+}
+
+@include smallScreen() {
+  .filters-options {
+    font-size: 1.2em;
+  }
+
+  h1 {
+    text-align: center;
+
+    &::before {
+      width: 75%;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
+
+  .options_wrapper {
+    max-width: 100%;
+  }
+
+  .filter-option,
+  .sort-option {
+    margin: 0.25em 0.25em;
+  }
+
+  .options_filters,
+  .options_sorters {
+    justify-content: center;
+  }
+}

src/views/TrainsView.vue

@@ -1,9 +1,7 @@
 <template>
   <section class="trains-view">
-    <div class="wrapper">
+    <div class="trains_wrapper">
-      <div class="options-bar">
+      <TrainOptions :sorter-option-ids="['distance', 'progress', 'delay', 'mass', 'speed', 'length']" />
-        <TrainOptions :sorter-option-ids="['distance', 'progress', 'delay', 'mass', 'speed', 'length']" />
-      </div>
 
       <TrainTable :trains="computedTrains" />
     </div>
@@ -93,7 +91,7 @@ export default defineComponent({
   position: relative;
 }
 
-.wrapper {
+.trains_wrapper {
   margin: 1rem auto;
   max-width: 1350px;
 }