responsived

This commit is contained in:
Mamalizz
2025-04-16 22:58:19 +03:30
parent abdc237a95
commit 58b13946fb
@@ -118,10 +118,16 @@ const clearFilters = () => {
<ProfilePageTitle title="خرید ها و سفارش های شما" icon="bi:cart" />
<div class="w-full flex flex-col gap-5">
<div class="w-full flex items-center justify-between px-5">
<div class="flex items-center justify-start gap-8">
<div class="flex items-center justify-start gap-3">
<span class="text-sm">ترتیب بر اساس</span>
<div
class="w-full flex flex-col-reverse lg:flex-row items-center justify-between lg:px-5 gap-5"
>
<div
class="max-lg:w-full flex items-center justify-start gap-8"
>
<div
class="flex flex-col lg:flex-row items-start lg:items-center justify-start gap-3 max-lg:w-full"
>
<span class="text-xs lg:text-sm">ترتیب بر اساس</span>
<Select
v-model="params.sort!"
triggerRootClass="!py-2.5"
@@ -132,7 +138,7 @@ const clearFilters = () => {
<SelectItem
v-for="(category, index) in sortFilters"
:key="index"
class="text-xs leading-none w-full rounded-sm py-5 flex items-center justify-between h-[25px] pr-[12px] relative select-none data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-slate-300 data-[highlighted]:text-black"
class="text-xs leading-none w-full rounded-sm py-4 lg:py-5 flex items-center justify-between h-[25px] pr-[12px] relative select-none data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-slate-300 data-[highlighted]:text-black"
:value="category.value"
>
<SelectItemIndicator
@@ -141,7 +147,7 @@ const clearFilters = () => {
<Icon name="bi:check" size="20" />
</SelectItemIndicator>
<SelectItemText
class="text-end font-iran-yekan-x text-sm"
class="text-end font-iran-yekan-x text-xs lg:text-sm"
>
{{ category.title }}
</SelectItemText>
@@ -150,8 +156,10 @@ const clearFilters = () => {
</template>
</Select>
</div>
<div class="flex items-center justify-start gap-3">
<span class="text-sm">وضعیت</span>
<div
class="flex flex-col lg:flex-row items-start lg:items-center justify-start gap-3 max-lg:w-full"
>
<span class="text-xs lg:text-sm">وضعیت</span>
<Select
v-model="params.status!"
triggerRootClass="!py-2.5"
@@ -164,7 +172,7 @@ const clearFilters = () => {
category, index
) in statusFilters"
:key="index"
class="text-xs leading-none w-full rounded-sm py-5 flex items-center justify-between h-[25px] pr-[12px] relative select-none data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-slate-300 data-[highlighted]:text-black"
class="text-xs leading-none w-full rounded-sm py-4 lg:py-5 flex items-center justify-between h-[25px] pr-[12px] relative select-none data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-slate-300 data-[highlighted]:text-black"
:value="category.value"
>
<SelectItemIndicator
@@ -173,7 +181,7 @@ const clearFilters = () => {
<Icon name="bi:check" size="20" />
</SelectItemIndicator>
<SelectItemText
class="text-end font-iran-yekan-x text-sm"
class="text-end font-iran-yekan-x text-xs lg:text-sm"
>
{{ category.title }}
</SelectItemText>
@@ -184,7 +192,10 @@ const clearFilters = () => {
</div>
</div>
<div class="flex-center gap-4">
<div
class="flex items-center lg:justify-center gap-4 max-lg:w-full"
:class="hasFilters ? 'justify-between' : 'justify-end'"
>
<Button
v-if="hasFilters"
end-icon="bi:x"
@@ -227,7 +238,7 @@ const clearFilters = () => {
? 'w-1/2'
: 'w-2/12'
"
class="px-6 py-5 text-sm font-normal"
class="px-6 py-5 text-xs lg:text-sm font-normal shrink-0 whitespace-pre"
>
{{ tableHead }}
</th>
@@ -246,7 +257,10 @@ const clearFilters = () => {
</template>
</Table>
<div v-if="data && paginationData && data.count > 10" class="w-full flex-center py-10">
<div
v-if="data && paginationData && data.count > 10"
class="w-full flex-center py-10"
>
<Pagination :items="paginationData" :total="data.count" />
</div>
</div>