From 9dc54a126468bc4be8259997d48f51bb1311c9ab Mon Sep 17 00:00:00 2001
From: alanzheng <313407040@qq.com>
Date: Sat, 19 Feb 2022 14:44:50 +0800
Subject: [PATCH 1/4] feat(SearchBar): Show price range next to the filter

---
 components/rmrk/Gallery/Search/SearchBar.vue | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/components/rmrk/Gallery/Search/SearchBar.vue b/components/rmrk/Gallery/Search/SearchBar.vue
index c3ad7f046a..013be4489f 100644
--- a/components/rmrk/Gallery/Search/SearchBar.vue
+++ b/components/rmrk/Gallery/Search/SearchBar.vue
@@ -122,11 +122,11 @@
         ticks
         @change="sliderChange">
       </b-slider>
-      <span v-if="sliderDirty"
-        >Prices ranging from {{ this.query.priceMin / 1000000000000 }} to
-        {{ this.query.priceMax / 1000000000000 }}</span
-      >
     </b-collapse>
+    <span v-if="query.priceMin !== undefined && query.priceMax !== undefined">
+      Prices ranging from {{ this.query.priceMin / 1000000000000 }} to
+      {{ this.query.priceMax / 1000000000000 }}
+    </span>
   </div>
 </template>
 
@@ -187,7 +187,6 @@ export default class SearchBar extends mixins(
   private highlightPos = 0
   private rangeSlider = [0, 5]
   private inputDirty = false
-  private sliderDirty = false
 
   public mounted(): void {
     this.getSearchHistory()
@@ -477,9 +476,6 @@ export default class SearchBar extends mixins(
 
   @Debounce(50)
   private sliderChange([min, max]: [number, number]): void {
-    if (!this.sliderDirty) {
-      this.sliderDirty = true
-    }
     this.sliderChangeMin(min * 1000000000000)
     this.sliderChangeMax(max * 1000000000000)
     const priceMin = String(min)
@@ -490,6 +486,7 @@ export default class SearchBar extends mixins(
   @Emit('update:priceMin')
   @Debounce(50)
   private sliderChangeMin(min: number): void {
+    console.log(this.query.priceMin)
     this.query.priceMin = min
   }
 

From f19a4e3072c5d28c2d6c87a34f445b872b694526 Mon Sep 17 00:00:00 2001
From: alanzheng <313407040@qq.com>
Date: Sat, 19 Feb 2022 15:28:05 +0800
Subject: [PATCH 2/4] fix(SearchBar): remove console.log

---
 components/rmrk/Gallery/Search/SearchBar.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/components/rmrk/Gallery/Search/SearchBar.vue b/components/rmrk/Gallery/Search/SearchBar.vue
index 013be4489f..9587424250 100644
--- a/components/rmrk/Gallery/Search/SearchBar.vue
+++ b/components/rmrk/Gallery/Search/SearchBar.vue
@@ -486,7 +486,6 @@ export default class SearchBar extends mixins(
   @Emit('update:priceMin')
   @Debounce(50)
   private sliderChangeMin(min: number): void {
-    console.log(this.query.priceMin)
     this.query.priceMin = min
   }
 

From d9d21d7b506c4d0c9a097b72b3fa547e34d70bc1 Mon Sep 17 00:00:00 2001
From: zhengow <313407040@qq.com>
Date: Sun, 20 Feb 2022 01:29:49 +0800
Subject: [PATCH 3/4] fix(SearchBar): adjust the text position

---
 components/rmrk/Gallery/Search/SearchBar.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/rmrk/Gallery/Search/SearchBar.vue b/components/rmrk/Gallery/Search/SearchBar.vue
index 384df5d83d..f6c8f833f6 100644
--- a/components/rmrk/Gallery/Search/SearchBar.vue
+++ b/components/rmrk/Gallery/Search/SearchBar.vue
@@ -81,9 +81,6 @@
             </div>
           </template>
         </b-autocomplete>
-        <div v-if="searchQuery" class="mt-3 ml-4">
-          <span>Showing results for {{ searchQuery }}</span>
-        </div>
       </b-field>
       <b-field
         expanded
@@ -99,6 +96,9 @@
         <slot />
       </b-field>
     </div>
+    <div v-if="searchQuery" class="mb-3">
+      <span>Showing results for {{ searchQuery }}</span>
+    </div>
     <b-collapse
       aria-id="sortAndFilter"
       animation="opacitySlide"

From 93c38bdf4e73748fd8ea418d2c1c3d27b8587e4f Mon Sep 17 00:00:00 2001
From: zhengow <313407040@qq.com>
Date: Sun, 20 Feb 2022 03:10:46 +0800
Subject: [PATCH 4/4] fix(SearchBar): adjust text position

---
 components/rmrk/Gallery/Search/SearchBar.vue | 24 ++++++++++++++------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/components/rmrk/Gallery/Search/SearchBar.vue b/components/rmrk/Gallery/Search/SearchBar.vue
index f6c8f833f6..01a66f8e2a 100644
--- a/components/rmrk/Gallery/Search/SearchBar.vue
+++ b/components/rmrk/Gallery/Search/SearchBar.vue
@@ -81,6 +81,15 @@
             </div>
           </template>
         </b-autocomplete>
+        <div
+          v-if="searchQuery"
+          :class="{ 'ml-4': true, 'is-size-4': isVisible || !sliderDirty }">
+          <div>Showing results for {{ searchQuery }}</div>
+          <div v-if="!isVisible && sliderDirty" class="is-size-7">
+            Prices ranging from {{ this.query.priceMin / 1000000000000 }} to
+            {{ this.query.priceMax / 1000000000000 }}
+          </div>
+        </div>
       </b-field>
       <b-field
         expanded
@@ -96,9 +105,6 @@
         <slot />
       </b-field>
     </div>
-    <div v-if="searchQuery" class="mb-3">
-      <span>Showing results for {{ searchQuery }}</span>
-    </div>
     <b-collapse
       aria-id="sortAndFilter"
       animation="opacitySlide"
@@ -123,11 +129,11 @@
         ticks
         @change="sliderChange">
       </b-slider>
+      <span v-if="sliderDirty"
+        >Prices ranging from {{ this.query.priceMin / 1000000000000 }} to
+        {{ this.query.priceMax / 1000000000000 }}</span
+      >
     </b-collapse>
-    <span v-if="query.priceMin !== undefined && query.priceMax !== undefined">
-      Prices ranging from {{ this.query.priceMin / 1000000000000 }} to
-      {{ this.query.priceMax / 1000000000000 }}
-    </span>
   </div>
 </template>
 
@@ -189,6 +195,7 @@ export default class SearchBar extends mixins(
   private highlightPos = 0
   private rangeSlider = [0, 5]
   private inputDirty = false
+  private sliderDirty = false
 
   public mounted(): void {
     this.getSearchHistory()
@@ -478,6 +485,9 @@ export default class SearchBar extends mixins(
 
   @Debounce(50)
   private sliderChange([min, max]: [number, number]): void {
+    if (!this.sliderDirty) {
+      this.sliderDirty = true
+    }
     this.sliderChangeMin(min * 1000000000000)
     this.sliderChangeMax(max * 1000000000000)
     const priceMin = String(min)