From 6badfd8983b801e8c6b3603d50e2aa5406aa9d92 Mon Sep 17 00:00:00 2001 From: Katherine Date: Tue, 12 Nov 2024 15:05:00 +0800 Subject: [PATCH] style: optimize mobile styling for reduced field spacing and a more compact display (#5605) * style: mobile style improve * style: action penal style improve * style: style improve * style: style improve * style: style improve * style: style improve * style: style improve * style: style improve * style: style improve * style: style improve * style: style improve --- lerna.json | 4 +- .../schema-component/antd/details/Details.tsx | 6 ++- .../src/client/WorkbenchAction.tsx | 6 +-- .../src/client/WorkbenchBlock.tsx | 15 ++++--- .../src/client/block/CardItem.tsx | 1 + .../MobileTabBar.Item/MobileTabBar.Item.tsx | 1 + .../mobile-layout/mobile-tab-bar/styles.ts | 1 + .../plugin-mobile/src/client/mobile/styles.ts | 40 ++++++++++++++++++- 8 files changed, 60 insertions(+), 14 deletions(-) diff --git a/lerna.json b/lerna.json index fc878b4016..1f1a034e4d 100644 --- a/lerna.json +++ b/lerna.json @@ -2,9 +2,7 @@ "version": "1.4.0-alpha.8", "npmClient": "yarn", "useWorkspaces": true, - "npmClientArgs": [ - "--ignore-engines" - ], + "npmClientArgs": ["--ignore-engines"], "command": { "version": { "forcePublish": true, diff --git a/packages/core/client/src/schema-component/antd/details/Details.tsx b/packages/core/client/src/schema-component/antd/details/Details.tsx index a691c04524..ed329b49de 100644 --- a/packages/core/client/src/schema-component/antd/details/Details.tsx +++ b/packages/core/client/src/schema-component/antd/details/Details.tsx @@ -31,7 +31,11 @@ export const Details = withDynamicSchemaProps( ); } - return ; + return ( +
+ +
+ ); }, { displayName: 'Details' }, ); diff --git a/packages/plugins/@nocobase/plugin-block-workbench/src/client/WorkbenchAction.tsx b/packages/plugins/@nocobase/plugin-block-workbench/src/client/WorkbenchAction.tsx index db76743c3f..0b5b5f8994 100644 --- a/packages/plugins/@nocobase/plugin-block-workbench/src/client/WorkbenchAction.tsx +++ b/packages/plugins/@nocobase/plugin-block-workbench/src/client/WorkbenchAction.tsx @@ -42,18 +42,18 @@ function Button() {
{fieldSchema.title}
) : ( - {fieldSchema.title} + {fieldSchema.title} ); } export const WorkbenchAction = withDynamicSchemaProps((props) => { const { className, ...others } = props; - const { styles, cx } = useStyles(); + const { styles, cx } = useStyles() as any; const fieldSchema = useFieldSchema(); const Component = useComponent(props?.targetComponent) || Action; return ( } diff --git a/packages/plugins/@nocobase/plugin-block-workbench/src/client/WorkbenchBlock.tsx b/packages/plugins/@nocobase/plugin-block-workbench/src/client/WorkbenchBlock.tsx index cf8af52542..4c1af2781e 100644 --- a/packages/plugins/@nocobase/plugin-block-workbench/src/client/WorkbenchBlock.tsx +++ b/packages/plugins/@nocobase/plugin-block-workbench/src/client/WorkbenchBlock.tsx @@ -89,9 +89,10 @@ const InternalIcons = () => { .ant-list-item-meta-title { overflow: hidden; text-overflow: ellipsis; + font-size: 14px; } .ant-list-item-meta-title button { - font-size: 16px; + font-size: 14px; overflow: hidden; text-overflow: ellipsis; width: 100%; @@ -121,11 +122,13 @@ export const WorkbenchBlock: any = withDynamicSchemaProps( const { layout = 'grid' } = fieldSchema['x-component-props'] || {}; return ( - - - {props.children} - - +
+ + + {props.children} + + +
); }, { displayName: 'WorkbenchBlock' }, diff --git a/packages/plugins/@nocobase/plugin-data-visualization/src/client/block/CardItem.tsx b/packages/plugins/@nocobase/plugin-data-visualization/src/client/block/CardItem.tsx index df09cd5788..c741507912 100644 --- a/packages/plugins/@nocobase/plugin-data-visualization/src/client/block/CardItem.tsx +++ b/packages/plugins/@nocobase/plugin-data-visualization/src/client/block/CardItem.tsx @@ -15,6 +15,7 @@ export const ChartCardItem = withDynamicSchemaProps( const { token } = useToken(); return ( = (props) => { className={classnames('adm-tab-bar-item-title', { ['adm-tab-bar-item-title-with-icon']: icon, })} + style={{ fontSize: '12px' }} > {title} diff --git a/packages/plugins/@nocobase/plugin-mobile/src/client/mobile-layout/mobile-tab-bar/styles.ts b/packages/plugins/@nocobase/plugin-mobile/src/client/mobile-layout/mobile-tab-bar/styles.ts index 8ea9531cbb..13a7084e16 100644 --- a/packages/plugins/@nocobase/plugin-mobile/src/client/mobile-layout/mobile-tab-bar/styles.ts +++ b/packages/plugins/@nocobase/plugin-mobile/src/client/mobile-layout/mobile-tab-bar/styles.ts @@ -18,6 +18,7 @@ export const useStyles = createStyles(() => ({ right: 0, height: NavigationBarHeight, boxSizing: 'border-box', + padding: '2px 0px', borderTop: '1px solid var(--adm-color-border)', backgroundColor: 'var(--adm-color-background)', }, diff --git a/packages/plugins/@nocobase/plugin-mobile/src/client/mobile/styles.ts b/packages/plugins/@nocobase/plugin-mobile/src/client/mobile/styles.ts index 409b42d894..8dd35714bd 100644 --- a/packages/plugins/@nocobase/plugin-mobile/src/client/mobile/styles.ts +++ b/packages/plugins/@nocobase/plugin-mobile/src/client/mobile/styles.ts @@ -18,7 +18,42 @@ export const useStyles = createStyles(({ token, css }) => { & ::-webkit-scrollbar { display: none; } - + .nb-details .ant-formily-item-feedback-layout-loose { + margin-bottom: 5px; + } + .nb-details .ant-formily-item-layout-vertical .ant-formily-item-label { + margin-bottom: -8px; + } + .ant-card .ant-card-body { + padding-bottom: 10px; + padding-top: 10px; + } + .ant-pagination-simple { + margin-top: 0px !important; + } + .nb-action-penal-container { + margin-top: -10px; + margin-bottom: -10px; + } + .nb-action-penal-container + button[aria-label*='schema-initializer-WorkbenchBlock.ActionBar-workbench:configureActions'] { + margin-bottom: 10px; + } + .nb-action-panel { + padding-top: 10px; + } + .nb-action-panel .ant-avatar-circle { + width: 48px !important; + height: 48px !important; + line-height: 48px !important; + } + .nb-chart-block .ant-card .ant-card-body { + padding-bottom: 0px; + padding-top: 0px; + } + .nb-chart-block .noco-card-item { + margin-bottom: -13px; + } .ant-table-thead button[aria-label*='schema-initializer-TableV2-table:configureColumns'] > span:last-child { display: none !important; } @@ -76,6 +111,9 @@ export const useStyles = createStyles(({ token, css }) => { width: 100% !important; max-width: 100% !important; } + .mobile-page-header .adm-tabs-tab { + font-size: 14px; + } `, }; });