Dodano sortowanie wg uwag eksploatacyjnych; poprawiono pomniejsze błędy

src/components/TrainsView/TrainOptions.vue

@@ -1,6 +1,33 @@
 <template>
   <div class="train-options">
     <div class="options_wrapper">
+      <div class="options_content">
+        <div class="content_select">
+          <select-box
+            :itemList="translatedSorterOptions"
+            :defaultItemIndex="0"
+            @selected="changeSorter"
+            :prefix="$t('trains.sorter-prefix')"
+          />
+        </div>
+
+        <div class="content_search">
+          <div class="search-box">
+            <input class="search-input" v-model="searchedTrain" :placeholder="$t('trains.search-train')" />
+
+            <img class="search-exit" :src="exitIcon" alt="exit-icon" @click="() => (searchedTrain = '')" />
+          </div>
+
+          <div class="search-box">
+            <input class="search-input" v-model="searchedDriver" :placeholder="$t('trains.search-driver')" />
+
+            <img class="search-exit" :src="exitIcon" alt="exit-icon" @click="() => (searchedDriver = '')" />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- <div class="options_wrapper">
       <select-box
         :title="$t('trains.option-distance')"
         :itemList="translatedSorterOptions"
@@ -8,7 +35,9 @@
         :prefix="$t('trains.sorter-prefix')"
         @selected="changeSorter"
       />
+    </div>
 
+    <div class="options_wrapper">
       <div class="search-box">
         <input class="search-input" v-model="searchedTrain" :placeholder="$t('trains.search-train')" />
 
@@ -20,7 +49,7 @@
 
         <img class="search-exit" :src="exitIcon" alt="exit-icon" @click="() => (searchedDriver = '')" />
       </div>
-    </div>
+    </div> -->
   </div>
 </template>
 
@@ -45,6 +74,10 @@ export default defineComponent({
         id: 'distance',
         value: 'kilometraż',
       },
+      {
+        id: 'comments',
+        value: 'komentarze',
+      },
       {
         id: 'progress',
         value: 'przebyta trasa',
@@ -99,25 +132,43 @@ export default defineComponent({
     width: 100%;
   }
 }
+.options {
+  &_wrapper {
+    display: flex;
+    flex-wrap: wrap;
 
-.options_wrapper {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
+    @include smallScreen() {
+      justify-content: center;
+    }
+  }
 
-  margin-bottom: 0.5em;
-
-  @include smallScreen() {
-    justify-content: center;
+  &_content {
+    display: flex;
     flex-direction: column;
+    align-items: flex-start;
+
+    .content_search,
+    .content_select {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+    }
+
+    @include smallScreen() {
+      padding: 0 1em;
+
+      .content_select {
+        margin: 0 auto;
+      }
+
+      .content_search {
+        justify-content: center;
+      }
+    }
   }
 }
 
-.select-box {
-  margin: 0.5em 0;
-}
-
-.search {
+.content_search .search {
   &-box {
     position: relative;
 
@@ -125,17 +176,18 @@ export default defineComponent({
     border-radius: 0.5em;
     min-width: 200px;
 
-    margin: 0.5em 0 0.5em 0.5em;
+    margin: 0.5em 0.5em 0.5em 0;
 
     @include smallScreen() {
-      width: 85%;
+      width: 100%;
+      margin: 0.5em auto;
     }
   }
 
   &-input {
     border: none;
 
-    min-width: 85%;
+    min-width: 100%;
     padding: 0.35em 0.5em;
   }