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

refactor: refine ui in mobile device

pull/887/head
Ryan Wang 2023-02-24 16:56:16 +08:00
parent 94903646f6
commit 31df8f969d
16 changed files with 45 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/components/src/components/card/Card.vue
View File

@ -54,6 +54,7 @@ defineProps<{
}
.card-body {
@apply overflow-x-auto;
padding: 12px 16px;
}

3
packages/components/src/components/space/Space.vue
View File

@ -33,7 +33,8 @@ const wrapperClasses = computed(() => {
<style lang="scss">
.space-wrapper {
@apply inline-flex
box-border;
box-border
flex-wrap;
&.space-direction-row {
@apply flex-row;

6
src/modules/contents/attachments/AttachmentList.vue
View File

@ -336,7 +336,7 @@ onMounted(() => {
<template #header>
<div class="block w-full bg-gray-50 px-4 py-3">
<div
class="relative flex flex-col items-start sm:flex-row sm:items-center"
class="relative flex flex-col flex-wrap items-start sm:flex-row sm:items-center"
>
<div
v-permission="['system:attachments:manage']"
@ -352,11 +352,11 @@ onMounted(() => {
<div class="flex w-full flex-1 items-center sm:w-auto">
<div
v-if="!selectedAttachments.size"
class="flex items-center gap-2"
class="flex w-full flex-wrap items-center gap-2 sm:w-auto"
>
<FormKit
id="keywordInput"
outer-class="!p-0"
outer-class="!p-0 w-full sm:w-auto"
placeholder="输入关键词搜索"
type="text"
name="keyword"

6
src/modules/contents/comments/CommentList.vue
View File

@ -313,7 +313,7 @@ function handleClearFilters() {
<template #header>
<div class="block w-full bg-gray-50 px-4 py-3">
<div
class="relative flex flex-col items-start sm:flex-row sm:items-center"
class="relative flex flex-col flex-wrap items-start sm:flex-row sm:items-center"
>
<div
v-permission="['system:comments:manage']"
@ -329,11 +329,11 @@ function handleClearFilters() {
<div class="flex w-full flex-1 items-center sm:w-auto">
<div
v-if="!selectedCommentNames.length"
class="flex items-center gap-2"
class="flex w-full flex-wrap items-center gap-2 sm:w-auto"
>
<FormKit
id="keywordInput"
outer-class="!p-0"
outer-class="!p-0 w-full sm:w-auto"
placeholder="输入关键词搜索"
type="text"
name="keyword"

6
src/modules/contents/pages/DeletedSinglePageList.vue
View File

@ -261,7 +261,7 @@ function handleClearKeyword() {
<template #header>
<div class="block w-full bg-gray-50 px-4 py-3">
<div
class="relative flex flex-col items-start sm:flex-row sm:items-center"
class="relative flex flex-col flex-wrap items-start sm:flex-row sm:items-center"
>
<div
v-permission="['system:singlepages:manage']"
@ -277,11 +277,11 @@ function handleClearKeyword() {
<div class="flex w-full flex-1 items-center sm:w-auto">
<div
v-if="!selectedPageNames.length"
class="flex items-center gap-2"
class="flex w-full flex-wrap items-center gap-2 sm:w-auto"
>
<FormKit
id="keywordInput"
outer-class="!p-0"
outer-class="!p-0 w-full sm:w-auto"
placeholder="输入关键词搜索"
type="text"
name="keyword"

6
src/modules/contents/pages/SinglePageList.vue
View File

@ -474,7 +474,7 @@ function handleClearFilters() {
<template #header>
<div class="block w-full bg-gray-50 px-4 py-3">
<div
class="relative flex flex-col items-start sm:flex-row sm:items-center"
class="relative flex flex-col flex-wrap items-start sm:flex-row sm:items-center"
>
<div
v-permission="['system:singlepages:manage']"
@ -490,11 +490,11 @@ function handleClearFilters() {
<div class="flex w-full flex-1 items-center sm:w-auto">
<div
v-if="!selectedPageNames.length"
class="flex items-center gap-2"
class="flex w-full flex-wrap items-center gap-2 sm:w-auto"
>
<FormKit
id="keywordInput"
outer-class="!p-0"
outer-class="!p-0 w-full sm:w-auto"
placeholder="输入关键词搜索"
type="text"
name="keyword"

1
src/modules/contents/pages/module.ts
View File

@ -29,7 +29,6 @@ export default definePlugin({
group: "content",
icon: markRaw(IconPages),
priority: 1,
mobile: true,
},
},
},

6
src/modules/contents/posts/DeletedPostList.vue
View File

@ -219,7 +219,7 @@ function handleClearKeyword() {
<template #header>
<div class="block w-full bg-gray-50 px-4 py-3">
<div
class="relative flex flex-col items-start sm:flex-row sm:items-center"
class="relative flex flex-col flex-wrap items-start sm:flex-row sm:items-center"
>
<div
v-permission="['system:posts:manage']"
@ -235,11 +235,11 @@ function handleClearKeyword() {
<div class="flex w-full flex-1 items-center sm:w-auto">
<div
v-if="!selectedPostNames.length"
class="flex items-center gap-2"
class="flex w-full flex-wrap items-center gap-2 sm:w-auto"
>
<FormKit
id="keywordInput"
outer-class="!p-0"
outer-class="!p-0 w-full sm:w-auto"
placeholder="输入关键词搜索"
type="text"
name="keyword"

6
src/modules/contents/posts/PostList.vue
View File

@ -460,7 +460,7 @@ watch(selectedPostNames, (newValue) => {
<template #header>
<div class="block w-full bg-gray-50 px-4 py-3">
<div
class="relative flex flex-col items-start sm:flex-row sm:items-center"
class="relative flex flex-col flex-wrap items-start sm:flex-row sm:items-center"
>
<div
v-permission="['system:posts:manage']"
@ -476,11 +476,11 @@ watch(selectedPostNames, (newValue) => {
<div class="flex w-full flex-1 items-center sm:w-auto">
<div
v-if="!selectedPostNames.length"
class="flex items-center gap-2"
class="flex w-full flex-wrap items-center gap-2 sm:w-auto"
>
<FormKit
id="keywordInput"
outer-class="!p-0"
outer-class="!p-0 w-full sm:w-auto"
placeholder="输入关键词搜索"
type="text"
name="keyword"

2
src/modules/contents/posts/categories/CategoryList.vue
View File

@ -102,7 +102,7 @@ const onEditingModalClose = () => {
<template #header>
<div class="block w-full bg-gray-50 px-4 py-3">
<div
class="relative flex flex-col items-start sm:flex-row sm:items-center"
class="relative flex flex-col flex-wrap items-start sm:flex-row sm:items-center"
>
<div class="flex w-full flex-1 sm:w-auto">
<span class="text-base font-medium">

6
src/modules/contents/posts/tags/TagList.vue
View File

@ -137,10 +137,8 @@ onMounted(async () => {
<VCard :body-class="['!p-0']">
<template #header>
<div class="block w-full bg-gray-50 px-4 py-3">
<div
class="relative flex flex-col items-start sm:flex-row sm:items-center"
>
<div class="flex w-full flex-1 sm:w-auto">
<div class="relative flex flex-wrap items-center justify-between">
<div>
<span class="text-base font-medium">
{{ tags?.length || 0 }} 个标签
</span>

28
src/modules/interface/menus/Menus.vue
View File

@ -217,7 +217,7 @@ const handleResetMenuItems = async () => {
</VPageHeader>
<div class="m-0 md:m-4">
<div class="flex flex-col gap-4 sm:flex-row">
<div class="w-96">
<div class="w-full sm:w-96">
<MenuList
ref="menuListRef"
v-model:selected-menu="selectedMenu"
@ -228,25 +228,21 @@ const handleResetMenuItems = async () => {
<VCard :body-class="['!p-0']">
<template #header>
<div class="block w-full bg-gray-50 px-4 py-3">
<div
class="relative flex flex-col items-start sm:flex-row sm:items-center"
>
<div class="flex w-full flex-1 sm:w-auto">
<div class="relative flex flex-wrap items-center justify-between">
<div>
<span class="text-base font-medium">
{{ selectedMenu?.spec.displayName }}
</span>
</div>
<div class="mt-4 flex sm:mt-0">
<VSpace>
<VButton
v-permission="['system:menus:manage']"
size="xs"
type="default"
@click="menuItemEditingModal = true"
>
新增
</VButton>
</VSpace>
<div>
<VButton
v-permission="['system:menus:manage']"
size="xs"
type="default"
@click="menuItemEditingModal = true"
>
新增
</VButton>
</div>
</div>
</div>

1
src/modules/system/actuator/module.ts
View File

@ -22,7 +22,6 @@ export default definePlugin({
group: "system",
icon: markRaw(IconTerminalBoxLine),
priority: 3,
mobile: true,
},
},
},

8
src/modules/system/plugins/PluginList.vue
View File

@ -173,12 +173,14 @@ const { data, isLoading, isFetching, refetch } = useQuery<Plugin[]>({
<template #header>
<div class="block w-full bg-gray-50 px-4 py-3">
<div
class="relative flex flex-col items-start sm:flex-row sm:items-center"
class="relative flex flex-col flex-wrap items-start sm:flex-row sm:items-center"
>
<div class="flex w-full flex-1 items-center gap-2 sm:w-auto">
<div
class="flex w-full flex-1 flex-wrap items-center gap-2 sm:w-auto"
>
<FormKit
id="keywordInput"
outer-class="!p-0"
outer-class="!p-0 w-full sm:w-auto"
placeholder="输入关键词搜索"
type="text"
name="keyword"

2
src/modules/system/roles/RoleList.vue
View File

@ -175,7 +175,7 @@ const handleDelete = async (role: Role) => {
<template #header>
<div class="block w-full bg-gray-50 px-4 py-3">
<div
class="relative flex flex-col items-start sm:flex-row sm:items-center"
class="relative flex flex-col flex-wrap items-start sm:flex-row sm:items-center"
>
<div class="flex w-full flex-1 sm:w-auto">
<FormKit

6
src/modules/system/users/UserList.vue
View File

@ -344,7 +344,7 @@ const hasFilters = computed(() => {
<template #header>
<div class="block w-full bg-gray-50 px-4 py-3">
<div
class="relative flex flex-col items-start sm:flex-row sm:items-center"
class="relative flex flex-col flex-wrap items-start sm:flex-row sm:items-center"
>
<div
v-permission="['system:users:manage']"
@ -360,11 +360,11 @@ const hasFilters = computed(() => {
<div class="flex w-full flex-1 items-center sm:w-auto">
<div
v-if="!selectedUserNames.length"
class="flex items-center gap-2"
class="flex w-full flex-wrap items-center gap-2 sm:w-auto"
>
<FormKit
id="keywordInput"
outer-class="!p-0"
outer-class="!p-0 w-full sm:w-auto"
:model-value="keyword"
name="keyword"
placeholder="输入关键词搜索"