github
/
halo
mirror of https://github.com/halo-dev/halo
1
0
Fork 0
Code Issues Releases Wiki Activity

feat: improve the styles of the data list filter area on the mobile devices (#4587) 

#### What type of PR is this?

/area console
/kind improvement
/milestone 2.10.x

#### What this PR does / why we need it:

改进移动设备上数据列表过滤器区域的样式。

before:

<img width="429" alt="image" src="https://github.com/halo-dev/halo/assets/21301288/c0341b19-0ef5-4e26-94b7-71c52def6578">

after:

<img width="429" alt="image" src="https://github.com/halo-dev/halo/assets/21301288/b2d0f07b-d94d-48d4-86b9-fd2953d141fa">


#### Which issue(s) this PR fixes:

Ref https://github.com/halo-dev/halo/issues/2699

#### Does this PR introduce a user-facing change?

```release-note
改进 Console 端在移动设备上数据列表过滤器区域的样式。
```
pull/4615/head
Ryan Wang 2023-09-15 00:14:14 +08:00 committed by GitHub
parent e13563bad0
commit 83cb088df8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 480 additions and 512 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
console/src/components/input/SearchInput.vue
View File

@ -35,7 +35,7 @@ function onKeywordChange() {
<template> <template>
<FormKit <FormKit
:id="id" :id="id"
outer-class="!p-0" outer-class="!p-0 w-full sm:w-auto"
:placeholder="placeholder || $t('core.common.placeholder.search')" :placeholder="placeholder || $t('core.common.placeholder.search')"
type="text" type="text"
name="keyword" name="keyword"

16
console/src/modules/contents/attachments/AttachmentList.vue
View File

@ -293,11 +293,11 @@ onMounted(() => {
<template #header> <template #header>
<div class="block w-full bg-gray-50 px-4 py-3"> <div class="block w-full bg-gray-50 px-4 py-3">
<div <div
class="relative flex flex-col items-start sm:flex-row sm:items-center" class="relative flex flex-col flex-wrap items-start gap-4 sm:flex-row sm:items-center"
> >
<div <div
v-permission="['system:attachments:manage']" v-permission="['system:attachments:manage']"
class="mr-4 hidden items-center sm:flex" class="hidden items-center sm:flex"
> >
<input <input
v-model="checkedAll" v-model="checkedAll"
@ -336,17 +336,14 @@ onMounted(() => {
</VDropdown> </VDropdown>
</VSpace> </VSpace>
</div> </div>
<div class="mt-4 flex sm:mt-0"> <VSpace spacing="lg" class="flex-wrap">
<VSpace spacing="lg">
<FilterCleanButton <FilterCleanButton
v-if="hasFilters" v-if="hasFilters"
@click="handleClearFilters" @click="handleClearFilters"
/> />
<FilterDropdown <FilterDropdown
v-model="selectedPolicy" v-model="selectedPolicy"
:label=" :label="$t('core.attachment.filters.storage_policy.label')"
$t('core.attachment.filters.storage_policy.label')
"
:items="[ :items="[
{ {
label: t('core.common.filters.item_labels.all'), label: t('core.common.filters.item_labels.all'),
@ -389,9 +386,7 @@ onMounted(() => {
value: 'size,desc', value: 'size,desc',
}, },
{ {
label: t( label: t('core.attachment.filters.sort.items.size_asc'),
'core.attachment.filters.sort.items.size_asc'
),
value: 'size,asc', value: 'size,asc',
}, },
]" ]"
@ -426,7 +421,6 @@ onMounted(() => {
</VSpace> </VSpace>
</div> </div>
</div> </div>
</div>
</template> </template>
<div :style="`${viewType === 'list' ? 'padding:12px 16px 0' : ''}`"> <div :style="`${viewType === 'list' ? 'padding:12px 16px 0' : ''}`">

16
console/src/modules/contents/comments/CommentList.vue
View File

@ -228,11 +228,11 @@ const handleApproveInBatch = async () => {
<template #header> <template #header>
<div class="block w-full bg-gray-50 px-4 py-3"> <div class="block w-full bg-gray-50 px-4 py-3">
<div <div
class="relative flex flex-col items-start sm:flex-row sm:items-center" class="relative flex flex-col flex-wrap items-start gap-4 sm:flex-row sm:items-center"
> >
<div <div
v-permission="['system:comments:manage']" v-permission="['system:comments:manage']"
class="mr-4 hidden items-center sm:flex" class="hidden items-center sm:flex"
> >
<input <input
v-model="checkAll" v-model="checkAll"
@ -259,8 +259,7 @@ const handleApproveInBatch = async () => {
</VButton> </VButton>
</VSpace> </VSpace>
</div> </div>
<div class="mt-4 flex sm:mt-0"> <VSpace spacing="lg" class="flex-wrap">
<VSpace spacing="lg">
<FilterCleanButton <FilterCleanButton
v-if="hasFilters" v-if="hasFilters"
@click="handleClearFilters" @click="handleClearFilters"
@ -314,9 +313,7 @@ const handleApproveInBatch = async () => {
value: 'replyCount,desc', value: 'replyCount,desc',
}, },
{ {
label: t( label: t('core.comment.filters.sort.items.reply_count_asc'),
'core.comment.filters.sort.items.reply_count_asc'
),
value: 'replyCount,asc', value: 'replyCount,asc',
}, },
{ {
@ -326,9 +323,7 @@ const handleApproveInBatch = async () => {
value: 'creationTimestamp,desc', value: 'creationTimestamp,desc',
}, },
{ {
label: t( label: t('core.comment.filters.sort.items.create_time_asc'),
'core.comment.filters.sort.items.create_time_asc'
),
value: 'creationTimestamp,asc', value: 'creationTimestamp,asc',
}, },
]" ]"
@ -348,7 +343,6 @@ const handleApproveInBatch = async () => {
</VSpace> </VSpace>
</div> </div>
</div> </div>
</div>
</template> </template>
<VLoading v-if="isLoading" /> <VLoading v-if="isLoading" />
<Transition v-else-if="!comments?.length" appear name="fade"> <Transition v-else-if="!comments?.length" appear name="fade">

8
console/src/modules/contents/pages/DeletedSinglePageList.vue
View File

@ -233,11 +233,11 @@ watch(
<template #header> <template #header>
<div class="block w-full bg-gray-50 px-4 py-3"> <div class="block w-full bg-gray-50 px-4 py-3">
<div <div
class="relative flex flex-col items-start sm:flex-row sm:items-center" class="relative flex flex-col flex-wrap items-start gap-4 sm:flex-row sm:items-center"
> >
<div <div
v-permission="['system:singlepages:manage']" v-permission="['system:singlepages:manage']"
class="mr-4 hidden items-center sm:flex" class="hidden items-center sm:flex"
> >
<input <input
v-model="checkedAll" v-model="checkedAll"
@ -257,8 +257,7 @@ watch(
</VButton> </VButton>
</VSpace> </VSpace>
</div> </div>
<div class="mt-4 flex sm:mt-0"> <VSpace spacing="lg" class="flex-wrap">
<VSpace spacing="lg">
<div class="flex flex-row gap-2"> <div class="flex flex-row gap-2">
<div <div
class="group cursor-pointer rounded p-1 hover:bg-gray-200" class="group cursor-pointer rounded p-1 hover:bg-gray-200"
@ -273,7 +272,6 @@ watch(
</VSpace> </VSpace>
</div> </div>
</div> </div>
</div>
</template> </template>
<VLoading v-if="isLoading" /> <VLoading v-if="isLoading" />
<Transition v-else-if="!singlePages?.length" appear name="fade"> <Transition v-else-if="!singlePages?.length" appear name="fade">

12
console/src/modules/contents/pages/SinglePageList.vue
View File

@ -317,11 +317,11 @@ watch(selectedPageNames, (newValue) => {
<template #header> <template #header>
<div class="block w-full bg-gray-50 px-4 py-3"> <div class="block w-full bg-gray-50 px-4 py-3">
<div <div
class="relative flex flex-col items-start sm:flex-row sm:items-center" class="relative flex flex-col flex-wrap items-start gap-4 sm:flex-row sm:items-center"
> >
<div <div
v-permission="['system:singlepages:manage']" v-permission="['system:singlepages:manage']"
class="mr-4 hidden items-center sm:flex" class="hidden items-center sm:flex"
> >
<input <input
v-model="checkedAll" v-model="checkedAll"
@ -338,8 +338,7 @@ watch(selectedPageNames, (newValue) => {
</VButton> </VButton>
</VSpace> </VSpace>
</div> </div>
<div class="mt-4 flex sm:mt-0"> <VSpace spacing="lg" class="flex-wrap">
<VSpace spacing="lg">
<FilterCleanButton <FilterCleanButton
v-if="hasFilters" v-if="hasFilters"
@click="handleClearFilters" @click="handleClearFilters"
@ -392,9 +391,7 @@ watch(selectedPageNames, (newValue) => {
label: t('core.common.filters.item_labels.default'), label: t('core.common.filters.item_labels.default'),
}, },
{ {
label: t( label: t('core.page.filters.sort.items.publish_time_desc'),
'core.page.filters.sort.items.publish_time_desc'
),
value: 'publishTime,desc', value: 'publishTime,desc',
}, },
{ {
@ -426,7 +423,6 @@ watch(selectedPageNames, (newValue) => {
</VSpace> </VSpace>
</div> </div>
</div> </div>
</div>
</template> </template>
<VLoading v-if="isLoading" /> <VLoading v-if="isLoading" />
<Transition v-else-if="!singlePages?.length" appear name="fade"> <Transition v-else-if="!singlePages?.length" appear name="fade">

8
console/src/modules/contents/posts/DeletedPostList.vue
View File

@ -225,11 +225,11 @@ watch(
<template #header> <template #header>
<div class="block w-full bg-gray-50 px-4 py-3"> <div class="block w-full bg-gray-50 px-4 py-3">
<div <div
class="relative flex flex-col items-start sm:flex-row sm:items-center" class="relative flex flex-col flex-wrap items-start gap-4 sm:flex-row sm:items-center"
> >
<div <div
v-permission="['system:posts:manage']" v-permission="['system:posts:manage']"
class="mr-4 hidden items-center sm:flex" class="hidden items-center sm:flex"
> >
<input <input
v-model="checkedAll" v-model="checkedAll"
@ -249,8 +249,7 @@ watch(
</VButton> </VButton>
</VSpace> </VSpace>
</div> </div>
<div class="mt-4 flex sm:mt-0"> <VSpace spacing="lg" class="flex-wrap">
<VSpace spacing="lg">
<div class="flex flex-row gap-2"> <div class="flex flex-row gap-2">
<div <div
class="group cursor-pointer rounded p-1 hover:bg-gray-200" class="group cursor-pointer rounded p-1 hover:bg-gray-200"
@ -265,7 +264,6 @@ watch(
</VSpace> </VSpace>
</div> </div>
</div> </div>
</div>
</template> </template>
<VLoading v-if="isLoading" /> <VLoading v-if="isLoading" />

12
console/src/modules/contents/posts/PostList.vue
View File

@ -323,11 +323,11 @@ watch(selectedPostNames, (newValue) => {
<template #header> <template #header>
<div class="block w-full bg-gray-50 px-4 py-3"> <div class="block w-full bg-gray-50 px-4 py-3">
<div <div
class="relative flex flex-col items-start sm:flex-row sm:items-center" class="relative flex flex-col flex-wrap items-start gap-4 sm:flex-row sm:items-center"
> >
<div <div
v-permission="['system:posts:manage']" v-permission="['system:posts:manage']"
class="mr-4 hidden items-center sm:flex" class="hidden items-center sm:flex"
> >
<input <input
v-model="checkedAll" v-model="checkedAll"
@ -344,8 +344,7 @@ watch(selectedPostNames, (newValue) => {
</VButton> </VButton>
</VSpace> </VSpace>
</div> </div>
<div class="mt-4 flex sm:mt-0"> <VSpace spacing="lg" class="flex-wrap">
<VSpace spacing="lg">
<FilterCleanButton <FilterCleanButton
v-if="hasFilters" v-if="hasFilters"
@click="handleClearFilters" @click="handleClearFilters"
@ -406,9 +405,7 @@ watch(selectedPostNames, (newValue) => {
label: t('core.common.filters.item_labels.default'), label: t('core.common.filters.item_labels.default'),
}, },
{ {
label: t( label: t('core.post.filters.sort.items.publish_time_desc'),
'core.post.filters.sort.items.publish_time_desc'
),
value: 'publishTime,desc', value: 'publishTime,desc',
}, },
{ {
@ -440,7 +437,6 @@ watch(selectedPostNames, (newValue) => {
</VSpace> </VSpace>
</div> </div>
</div> </div>
</div>
</template> </template>
<VLoading v-if="isLoading" /> <VLoading v-if="isLoading" />
<Transition v-else-if="!posts?.length" appear name="fade"> <Transition v-else-if="!posts?.length" appear name="fade">

16
console/src/modules/system/plugins/PluginList.vue
View File

@ -159,11 +159,11 @@ onMounted(() => {
<template #header> <template #header>
<div class="block w-full bg-gray-50 px-4 py-3"> <div class="block w-full bg-gray-50 px-4 py-3">
<div <div
class="relative flex flex-col items-start sm:flex-row sm:items-center" class="relative flex flex-col flex-wrap items-start gap-4 sm:flex-row sm:items-center"
> >
<div <div
v-permission="['system:posts:manage']" v-permission="['system:posts:manage']"
class="mr-4 hidden items-center sm:flex" class="hidden items-center sm:flex"
> >
<input <input
v-model="checkedAll" v-model="checkedAll"
@ -206,8 +206,7 @@ onMounted(() => {
</VDropdown> </VDropdown>
</VSpace> </VSpace>
</div> </div>
<div class="mt-4 flex sm:mt-0"> <VSpace spacing="lg" class="flex-wrap">
<VSpace spacing="lg">
<FilterCleanButton <FilterCleanButton
v-if="hasFilters" v-if="hasFilters"
@click="handleClearFilters" @click="handleClearFilters"
@ -237,15 +236,11 @@ onMounted(() => {
label: t('core.common.filters.item_labels.default'), label: t('core.common.filters.item_labels.default'),
}, },
{ {
label: t( label: t('core.plugin.filters.sort.items.create_time_desc'),
'core.plugin.filters.sort.items.create_time_desc'
),
value: 'creationTimestamp,desc', value: 'creationTimestamp,desc',
}, },
{ {
label: t( label: t('core.plugin.filters.sort.items.create_time_asc'),
'core.plugin.filters.sort.items.create_time_asc'
),
value: 'creationTimestamp,asc', value: 'creationTimestamp,asc',
}, },
]" ]"
@ -265,7 +260,6 @@ onMounted(() => {
</VSpace> </VSpace>
</div> </div>
</div> </div>
</div>
</template> </template>
<VLoading v-if="isLoading" /> <VLoading v-if="isLoading" />

8
console/src/modules/system/users/UserList.vue
View File

@ -291,11 +291,11 @@ onMounted(() => {
<template #header> <template #header>
<div class="block w-full bg-gray-50 px-4 py-3"> <div class="block w-full bg-gray-50 px-4 py-3">
<div <div
class="relative flex flex-col items-start sm:flex-row sm:items-center" class="relative flex flex-col flex-wrap items-start gap-4 sm:flex-row sm:items-center"
> >
<div <div
v-permission="['system:users:manage']" v-permission="['system:users:manage']"
class="mr-4 hidden items-center sm:flex" class="hidden items-center sm:flex"
> >
<input <input
v-model="checkedAll" v-model="checkedAll"
@ -312,8 +312,7 @@ onMounted(() => {
</VButton> </VButton>
</VSpace> </VSpace>
</div> </div>
<div class="mt-4 flex sm:mt-0"> <VSpace spacing="lg" class="flex-wrap">
<VSpace spacing="lg">
<FilterCleanButton <FilterCleanButton
v-if="hasFilters" v-if="hasFilters"
@click="handleClearFilters" @click="handleClearFilters"
@ -370,7 +369,6 @@ onMounted(() => {
</VSpace> </VSpace>
</div> </div>
</div> </div>
</div>
</template> </template>
<VLoading v-if="isLoading" /> <VLoading v-if="isLoading" />