From 42bb056e661eb95814eaac1bd55f20c67ed0e7f1 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Sun, 25 Sep 2022 23:30:37 +0200
Subject: [PATCH] =?UTF-8?q?Poprawki=20dost=C4=99pno=C5=9Bci=20searchbox?=
 =?UTF-8?q?=C3=B3w?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../StationsView/StationFilterCard.vue        |  4 +-
 src/mixins/keyMixin.ts                        |  2 +-
 src/styles/filters_options.scss               | 38 +++++++++++--------
 src/styles/search_box.scss                    |  3 --
 4 files changed, 26 insertions(+), 21 deletions(-)

diff --git a/src/components/StationsView/StationFilterCard.vue b/src/components/StationsView/StationFilterCard.vue
index a3fe9d3..1b4ae81 100644
--- a/src/components/StationsView/StationFilterCard.vue
+++ b/src/components/StationsView/StationFilterCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="filter-card" v-click-outside="closeCard">
+  <section class="filter-card" v-click-outside="closeCard" @keydown.esc="closeCard" >
     <div class="card_btn">
       <button class="btn--image" @click="toggleCard">
         <img class="button_icon" :src="getIcon('filter2')" alt="filter icon" />
@@ -8,7 +8,7 @@
     </div>
 
     <transition name="card-anim">
-      <div class="card" v-if="isVisible">
+      <div class="card" v-if="isVisible" >
         <div class="card_content">
           <div class="card_title flex">{{ $t('filters.title') }}</div>
 
diff --git a/src/mixins/keyMixin.ts b/src/mixins/keyMixin.ts
index dd1979f..773c6a3 100644
--- a/src/mixins/keyMixin.ts
+++ b/src/mixins/keyMixin.ts
@@ -19,7 +19,7 @@ export default defineComponent({
     onKeyDownFunction() {},
 
     handleKeyDown(e: KeyboardEvent) {
-      if (e.key.toLowerCase() == 'f' && !this.preventKeyDown) this.onKeyDownFunction();
+      if (e.key.toLowerCase() == 'f' && !this.preventKeyDown && !e.ctrlKey && !e.altKey) this.onKeyDownFunction();
     },
   },
 });
diff --git a/src/styles/filters_options.scss b/src/styles/filters_options.scss
index ff01048..4bd31e5 100644
--- a/src/styles/filters_options.scss
+++ b/src/styles/filters_options.scss
@@ -99,24 +99,32 @@ h1.option-title {
   }
 }
 
-.search_content > .search {
-  margin: 0.5em auto;
-}
+.search_content {
+  .search {
+    margin: 0.5em auto;
+  }
 
-.search_content > button {
-  display: flex;
-  justify-content: center;
-  margin: 0 auto;
-}
+  .search_actions {
+    display: flex;
+    margin: 1em 0 0.5em 0;
 
-.search_content > .search_actions {
-  display: flex;
-  margin: 1em 0 0.5em 0;
+    button {
+      margin: 0.25em 0.5em;
+      background-color: #424242;
+      color: white;
+    }
+  }
 
-  button {
-    margin: 0.25em 0.5em;
-    background-color: #424242;
-    color: white;
+  .search-box {
+    .search_input {
+    }
+
+    .search-exit {
+      position: absolute;
+      transform: translateY(-50%);
+      top: 50%;
+      right: 0;
+    }
   }
 }
 
diff --git a/src/styles/search_box.scss b/src/styles/search_box.scss
index 183a5a2..8254e1a 100644
--- a/src/styles/search_box.scss
+++ b/src/styles/search_box.scss
@@ -19,7 +19,6 @@
 
   &-input {
     border: none;
-    border-radius: 0.5em 0 0 0.5em;
     background-color: #424242;
 
     padding: 0.35em 0.5em;
@@ -28,8 +27,6 @@
 
   &-exit {
     background-color: #424242;
-    padding: 0 0.5em;
-    border-radius: 0 0.5em 0.5em 0;
 
     img {
       vertical-align: middle;