responsived
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user