Poprawki responsywności selectboxów

src/components/Global/SelectBox.vue

@@ -131,6 +131,7 @@ export default defineComponent({
 
 .select-box {
   position: relative;
+  width: auto;
 }
 
 .arrow {

src/components/JournalView/JournalOptions.vue

@@ -1,260 +1,218 @@
-<template>
-  <div class="journal-options">
-    <div class="options_wrapper">
-      <div class="options_content">
-        <div class="content_select">
-          <select-box
-            :itemList="translatedSorterOptions"
-            :defaultItemIndex="0"
-            @selected="onSorterChange"
-            :prefix="$t('journal.sort-prefix')"
-          />
-        </div>
-
-        <div class="content_search">
-          <div class="search-box" v-for="(value, propName) in searchersValues" :key="propName">
-            <input
-              class="search-input"
-              :placeholder="$t(`journal.${propName}`)"
-              v-model="searchersValues[propName]"
-              @keydown.enter="onInputSearch"
-            />
-
-            <img class="search-exit" :src="getIcon('exit')" alt="exit-icon" @click="onInputClear(propName)" />
-          </div>
-          <!-- <div class="search-box">
-            <input
-              class="search-input"
-              v-model="searchedTrain"
-              :placeholder="$t('journal.search-train')"
-              @keydown.enter="search"
-            />
-
-            <img class="search-exit" :src="exitIcon" alt="exit-icon" @click="clearTrain" />
-          </div>
-
-          <div class="search-box">
-            <input
-              class="search-input"
-              v-model="searchedDriver"
-              :placeholder="$t('journal.search-driver')"
-              @keydown.enter="search"
-            />
-
-            <img class="search-exit" :src="exitIcon" alt="exit-icon" @click="clearDriver" />
-          </div> -->
-
-          <action-button class="search-button" @click="onInputSearch">
-            {{ $t('journal.search') }}
-          </action-button>
-        </div>
-      </div>
-
-      <div class="options_filters">
-        <button
-          v-for="filter in filters"
-          class="journal-filter-option btn--option"
-          :class="{ checked: journalFilterActive.id === filter.id }"
-          :id="filter.id"
-          @click="onFilterChange(filter)"
-        >
-          {{ $t(`journal.filter-${filter.id}`) }}
-        </button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, inject, JournalFilter, PropType } from 'vue';
-import imageMixin from '../../mixins/imageMixin';
-import ActionButton from '../Global/ActionButton.vue';
-import SelectBox from '../Global/SelectBox.vue';
-
-export default defineComponent({
-  components: { SelectBox, ActionButton },
-  emits: ['onSorterChange', 'onInputChange', 'onFilterChange'],
-  mixins: [imageMixin],
-
-  props: {
-    sorterOptionIds: {
-      type: Array as PropType<Array<string>>,
-      required: true,
-    },
-
-    filters: {
-      type: Array as PropType<JournalFilter[]>,
-      default: [],
-    },
-  },
-
-
-  setup() {
-    return {
-      searchersValues: inject('searchersValues') as {[key: string]: string},
-      sorterActive: inject('sorterActive') as { id: string | number; dir: number },
-      journalFilterActive: inject('journalFilterActive') as JournalFilter,
-    };
-  },
-
-  computed: {
-    translatedSorterOptions() {
-      return this.$props.sorterOptionIds.map((id) => ({
-        id,
-        value: this.$t(`journal.option-${id}`),
-      }));
-    },
-  },
-
-  methods: {
-    onSorterChange(item: { id: string | number; value: string }) {
-      this.sorterActive.id = item.id;
-      this.sorterActive.dir = -1;
-
-      this.$emit('onSorterChange');
-    },
-
-    onFilterChange(filter: JournalFilter) {
-      this.journalFilterActive = filter;
-      this.$emit('onFilterChange');
-    },
-
-    onInputSearch() {      
-      this.$emit('onInputChange');
-    },
-
-    onInputClear(id: any) {
-      this.searchersValues[id] = '';
-      this.onInputSearch();
-    },
-  },
-});
-</script>
-
-<style lang="scss" scoped>
-@import '../../styles/responsive';
-@import '../../styles/option.scss';
-
-.options {
-  &_wrapper {
-    display: flex;
-    flex-direction: column;
-  }
-
-  &_content {
-    display: flex;
-    flex-wrap: wrap;
-
-    .content_search,
-    .content_select {
-      display: flex;
-      align-items: center;
-      flex-wrap: wrap;
-
-      padding: 0.25em 0.25em 0 0;
-    }
-  }
-
-  &_filters {
-    display: flex;
-    flex-wrap: wrap;
-    margin: 0.5em 0 0 0;
-
-    .journal-filter-option {
-      margin: 0 0.25em 0 0;
-
-      &#abandoned {
-        color: salmon;
-      }
-
-      &#fulfilled {
-        color: lightgreen;
-      }
-
-      &#active {
-        color: lightblue;
-      }
-    }
-  }
-}
-
-.search {
-  &-box {
-    position: relative;
-
-    background: #333;
-    border-radius: 0.5em;
-    min-width: 200px;
-    margin-right: 0.25em;
-  }
-
-  &-input {
-    border: none;
-
-    min-width: 100%;
-    padding: 0.35em 0.5em;
-  }
-
-  &-exit {
-    position: absolute;
-    cursor: pointer;
-
-    top: 50%;
-    right: 10px;
-    transform: translateY(-50%);
-
-    width: 1em;
-  }
-}
-
-@include smallScreen() {
-  .journal-options {
-    width: 100%;
-  }
-  .options {
-    &_wrapper {
-      justify-content: center;
-      align-items: center;
-    }
-
-    &_content {
-      padding: 0 1em;
-
-      flex-direction: column;
-
-      .content_select {
-        margin: 0 auto;
-        padding: 0;
-      }
-
-      .content_search {
-        justify-content: center;
-      }
-    }
-
-    &_filters {
-      justify-content: center;
-
-      .journal-filter-option {
-        margin: 0.25em 0.25em;
-      }
-    }
-  }
-
-  .search {
-    &-box,
-    &-button {
-      margin: 0.5em 0 0 0;
-    }
-
-    &-box {
-      width: 100%;
-    }
-
-    &-button {
-      width: 80%;
-      max-width: 300px;
-    }
-  }
-}
-</style>
+<template>
+  <div class="journal-options">
+    <div class="options_wrapper">
+      <div class="options_content">
+        <div class="content_select">
+          <select-box
+            :itemList="translatedSorterOptions"
+            :defaultItemIndex="0"
+            @selected="onSorterChange"
+            :prefix="$t('journal.sort-prefix')"
+          />
+        </div>
+
+        <div class="content_search">
+          <div class="search-box" v-for="(value, propName) in searchersValues" :key="propName">
+            <input
+              class="search-input"
+              :placeholder="$t(`journal.${propName}`)"
+              v-model="searchersValues[propName]"
+              @keydown.enter="onInputSearch"
+            />
+
+            <button class="search-exit">
+              <img :src="getIcon('exit')" alt="exit-icon" @click="onInputClear(propName)" />
+            </button>
+          </div>
+          <!-- <div class="search-box">
+            <input
+              class="search-input"
+              v-model="searchedTrain"
+              :placeholder="$t('journal.search-train')"
+              @keydown.enter="search"
+            />
+
+            <img class="search-exit" :src="exitIcon" alt="exit-icon" @click="clearTrain" />
+          </div>
+
+          <div class="search-box">
+            <input
+              class="search-input"
+              v-model="searchedDriver"
+              :placeholder="$t('journal.search-driver')"
+              @keydown.enter="search"
+            />
+
+            <img class="search-exit" :src="exitIcon" alt="exit-icon" @click="clearDriver" />
+          </div> -->
+
+          <action-button class="search-button" @click="onInputSearch">
+            {{ $t('journal.search') }}
+          </action-button>
+        </div>
+      </div>
+
+      <div class="options_filters">
+        <button
+          v-for="filter in filters"
+          class="journal-filter-option btn--option"
+          :class="{ checked: journalFilterActive.id === filter.id }"
+          :id="filter.id"
+          @click="onFilterChange(filter)"
+        >
+          {{ $t(`journal.filter-${filter.id}`) }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, inject, JournalFilter, PropType } from 'vue';
+import imageMixin from '../../mixins/imageMixin';
+import ActionButton from '../Global/ActionButton.vue';
+import SelectBox from '../Global/SelectBox.vue';
+
+export default defineComponent({
+  components: { SelectBox, ActionButton },
+  emits: ['onSorterChange', 'onInputChange', 'onFilterChange'],
+  mixins: [imageMixin],
+
+  props: {
+    sorterOptionIds: {
+      type: Array as PropType<Array<string>>,
+      required: true,
+    },
+
+    filters: {
+      type: Array as PropType<JournalFilter[]>,
+      default: [],
+    },
+  },
+
+  setup() {
+    return {
+      searchersValues: inject('searchersValues') as { [key: string]: string },
+      sorterActive: inject('sorterActive') as { id: string | number; dir: number },
+      journalFilterActive: inject('journalFilterActive') as JournalFilter,
+    };
+  },
+
+  computed: {
+    translatedSorterOptions() {
+      return this.$props.sorterOptionIds.map((id) => ({
+        id,
+        value: this.$t(`journal.option-${id}`),
+      }));
+    },
+  },
+
+  methods: {
+    onSorterChange(item: { id: string | number; value: string }) {
+      this.sorterActive.id = item.id;
+      this.sorterActive.dir = -1;
+
+      this.$emit('onSorterChange');
+    },
+
+    onFilterChange(filter: JournalFilter) {
+      this.journalFilterActive = filter;
+      this.$emit('onFilterChange');
+    },
+
+    onInputSearch() {
+      this.$emit('onInputChange');
+    },
+
+    onInputClear(id: any) {
+      this.searchersValues[id] = '';
+      this.onInputSearch();
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/responsive';
+@import '../../styles/option.scss';
+@import '../../styles/search_box.scss';
+
+.options {
+  &_wrapper {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &_content {
+    display: flex;
+    flex-wrap: wrap;
+
+    .content_search,
+    .content_select {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+
+      padding: 0.25em 0.25em 0 0;
+    }
+  }
+
+  &_filters {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0.5em 0 0 0;
+
+    .journal-filter-option {
+      margin: 0 0.25em 0 0;
+
+      &#abandoned {
+        color: salmon;
+      }
+
+      &#fulfilled {
+        color: lightgreen;
+      }
+
+      &#active {
+        color: lightblue;
+      }
+    }
+  }
+}
+
+@include smallScreen() {
+  .journal-options {
+    width: 100%;
+  }
+
+  .options {
+    &_wrapper {
+      justify-content: center;
+      align-items: center;
+    }
+
+    &_content {
+      padding: 0 1em;
+
+      flex-direction: column;
+
+      .content_select {
+        margin: 0 auto;
+        padding: 0;
+      }
+
+      .content_search {
+        justify-content: center;
+      }
+    }
+
+    &_filters {
+      justify-content: center;
+
+      .journal-filter-option {
+        margin: 0.25em 0.25em;
+      }
+    }
+  }
+}
+</style>

src/components/TrainsView/TrainOptions.vue

@@ -15,13 +15,17 @@
           <div class="search-box">
             <input class="search-input" v-model="searchedTrain" :placeholder="$t('trains.search-train')" />
 
-            <img class="search-exit" :src="getIcon('exit')" alt="exit-icon" @click="() => (searchedTrain = '')" />
+            <button class="search-exit">
+              <img :src="getIcon('exit')" alt="exit-icon" @click="() => (searchedTrain = '')" />
+            </button>
           </div>
 
           <div class="search-box">
             <input class="search-input" v-model="searchedDriver" :placeholder="$t('trains.search-driver')" />
 
-            <img class="search-exit" :src="getIcon('exit')" alt="exit-icon" @click="() => (searchedDriver = '')" />
+            <button class="search-exit">
+              <img :src="getIcon('exit')" alt="exit-icon" @click="() => (searchedDriver = '')" />
+            </button>
           </div>
         </div>
       </div>
@@ -130,8 +134,8 @@ export default defineComponent({
 
     resetFilters() {
       this.filterList.forEach((f) => (f.isActive = true));
-      this.searchedDriver = "";
-      this.searchedTrain = "";
+      this.searchedDriver = '';
+      this.searchedTrain = '';
     },
   },
 });
@@ -139,10 +143,12 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 @import '../../styles/responsive';
+@import '../../styles/search_box.scss';
 
 .train-options {
   @include smallScreen() {
     width: 100%;
+    font-size: 1.25em;
   }
 }
 
@@ -166,34 +172,6 @@ export default defineComponent({
   }
 }
 
-.search {
-  &-box {
-    position: relative;
-
-    background: #333;
-    border-radius: 0.5em;
-    min-width: 200px;
-    margin-right: 0.25em;
-  }
-
-  &-input {
-    border: none;
-
-    min-width: 100%;
-    padding: 0.35em 0.5em;
-  }
-
-  &-exit {
-    position: absolute;
-    cursor: pointer;
-
-    top: 50%;
-    right: 10px;
-    transform: translateY(-50%);
-
-    width: 1em;
-  }
-}
 .filters {
   display: flex;
   flex-wrap: wrap;
@@ -227,6 +205,7 @@ export default defineComponent({
   .journal-options {
     width: 100%;
   }
+
   .options {
     &_wrapper {
       justify-content: center;
@@ -247,21 +226,5 @@ export default defineComponent({
       }
     }
   }
-
-  .search {
-    &-box,
-    &-button {
-      margin: 0.5em 0 0 0;
-    }
-
-    &-box {
-      width: 100%;
-    }
-
-    &-button {
-      width: 80%;
-      max-width: 300px;
-    }
-  }
 }
 </style>