From c5658df39ce44220137474a95a8037cbc4323439 Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Mon, 12 May 2025 18:55:16 +0330
Subject: [PATCH] responsived filter products

---
 .../global/products/FilterProducts.vue        | 32 +++++++++----------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/frontend/components/global/products/FilterProducts.vue b/frontend/components/global/products/FilterProducts.vue
index f570ca7..a957cfe 100644
--- a/frontend/components/global/products/FilterProducts.vue
+++ b/frontend/components/global/products/FilterProducts.vue
@@ -124,12 +124,12 @@ watch(
 
 <template>
     <div class="size-full flex flex-col gap-14 justify-between">
-        <div class="w-full flex flex-col gap-10">
+        <div class="w-full flex flex-col gap-8 lg:gap-10">
             <div class="flex flex-col items-center w-full gap-5">
-                <div class="flex items-center justify-start gap-2 text-lg w-full">
+                <div class="flex items-center justify-start gap-2 max-lg:text-sm w-full">
                     <Icon
                         name="ci:filter-list"
-                        size="24"
+                        class="text-xl"
                     />
                     ترتیب بر اساس
                 </div>
@@ -139,7 +139,7 @@ watch(
                         :key="index"
                         @click="params.sort = sort.value"
                         :class="params.sort == sort.value ? 'bg-black text-white' : 'bg-slate-100'"
-                        class="py-1 px-3 cursor-pointer text-nowrap transition-all rounded-md text-sm"
+                        class="py-1 px-3 cursor-pointer text-nowrap transition-all rounded-md text-xs lg:text-sm"
                     >
                         {{ sort.title }}
                     </button>
@@ -147,10 +147,10 @@ watch(
             </div>
 
             <div class="flex flex-col w-full gap-5">
-                <div class="flex items-center justify-start gap-2 text-lg w-full">
+                <div class="flex items-center justify-start gap-2 max-lg:text-sm w-full">
                     <Icon
                         name="ci:grid"
-                        size="24"
+                        class="text-xl"
                     />
                     دسته بندی
                 </div>
@@ -161,10 +161,10 @@ watch(
             </div>
 
             <div class="flex flex-col w-full gap-5">
-                <div class="flex items-center justify-start gap-2 text-lg w-full">
+                <div class="flex items-center justify-start gap-2 max-lg:text-sm w-full">
                     <Icon
                         name="ci:scan-box"
-                        size="24"
+                        class="text-xl"
                     />
                     محدوده قیمت
                 </div>
@@ -186,15 +186,15 @@ watch(
                     />
                 </SliderRoot>
                 <div class="flex items-center justify-between">
-                    <div class="flex-center gap-2">
-                        <span class="text-sm text-black">حداقل</span>
-                        <span class="text-sm text-black">
+                    <div class="flex-center gap-2 text-xs lg:text-sm">
+                        <span class="text-black">حداقل</span>
+                        <span class="text-black">
                             {{ sliderValue[0].toLocaleString() }}
                         </span>
                     </div>
-                    <div class="flex-center gap-2">
-                        <span class="text-sm text-black">حداکثر</span>
-                        <span class="text-sm text-black">
+                    <div class="flex-center gap-2 text-xs lg:text-sm">
+                        <span class="text-black">حداکثر</span>
+                        <span class="text-black">
                             {{ sliderValue[1].toLocaleString() }}
                         </span>
                     </div>
@@ -202,13 +202,13 @@ watch(
             </div>
 
             <div class="flex items-center justify-between w-full gap-5">
-                <span class="text-black">فقط کالاهای تخفیف دار</span>
+                <span class="text-black max-lg:text-sm">فقط کالاهای تخفیف دار</span>
 
                 <Switch v-model="has_discount" />
             </div>
 
             <div class="flex items-center justify-between w-full gap-5">
-                <span class="text-black">فقط کالاهای موجود</span>
+                <span class="text-black max-lg:text-sm">فقط کالاهای موجود</span>
 
                 <Switch v-model="in_stock" />
             </div>