responsived

This commit is contained in:
Mamalizz
2025-04-16 22:58:24 +03:30
parent 58b13946fb
commit 23f1696236
+27 -13
View File
@@ -99,10 +99,16 @@ const clearFilters = () => {
<ProfilePageTitle title="تیکت های شما" icon="bi:ticket" />
<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"
@@ -113,7 +119,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
@@ -122,7 +128,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 lg:text-sm"
>
{{ category.title }}
</SelectItemText>
@@ -131,8 +137,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"
@@ -145,7 +153,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
@@ -154,7 +162,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>
@@ -165,7 +173,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"
@@ -208,7 +219,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>
@@ -227,7 +238,10 @@ const clearFilters = () => {
</template>
</Table>
<div v-if="data && paginationData && data.count > 7" class="w-full flex-center py-10">
<div
v-if="data && paginationData && data.count > 7"
class="w-full flex-center py-10"
>
<Pagination :items="paginationData" :total="data?.count" />
</div>
</div>