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

@@ -2,9 +2,7 @@
   "version": "1.4.0-alpha.8",
   "npmClient": "yarn",
   "useWorkspaces": true,
-  "npmClientArgs": [
+  "npmClientArgs": ["--ignore-engines"],
-    "--ignore-engines"
-  ],
   "command": {
     "version": {
       "forcePublish": true,

packages/core/client/src/schema-component/antd/details/Details.tsx

@@ -31,7 +31,11 @@ export const Details = withDynamicSchemaProps(
       );
     }
 
-    return <FormV2 {...props} />;
+    return (
+      <div className="nb-details">
+        <FormV2 {...props} />
+      </div>
+    );
   },
   { displayName: 'Details' },
 );

packages/plugins/@nocobase/plugin-block-workbench/src/client/WorkbenchAction.tsx

@@ -42,18 +42,18 @@ function Button() {
       <div className={cx(styles.title)}>{fieldSchema.title}</div>
     </div>
   ) : (
-    <a>{fieldSchema.title}</a>
+    <span>{fieldSchema.title}</span>
   );
 }
 
 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 (
     <Component
-      className={cx(className, styles.action)}
+      className={cx(className, styles.action, 'nb-action-panel')}
       {...others}
       icon={null}
       title={<Button />}

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 (
-      <WorkbenchBlockContext.Provider value={{ layout }}>
+      <div className="nb-action-penal-container">
-        <DataSourceContext.Provider value={undefined}>
+        <WorkbenchBlockContext.Provider value={{ layout }}>
-          <CollectionContext.Provider value={undefined}>{props.children}</CollectionContext.Provider>
+          <DataSourceContext.Provider value={undefined}>
-        </DataSourceContext.Provider>
+            <CollectionContext.Provider value={undefined}>{props.children}</CollectionContext.Provider>
-      </WorkbenchBlockContext.Provider>
+          </DataSourceContext.Provider>
+        </WorkbenchBlockContext.Provider>
+      </div>
     );
   },
   { displayName: 'WorkbenchBlock' },

packages/plugins/@nocobase/plugin-data-visualization/src/client/block/CardItem.tsx

@@ -15,6 +15,7 @@ export const ChartCardItem = withDynamicSchemaProps(
     const { token } = useToken();
     return (
       <CardItem
+        className="nb-chart-block"
         name="charts"
         bodyStyle={{
           padding: `${token.paddingLG}px ${token.paddingLG}px 0`,

packages/plugins/@nocobase/plugin-mobile/src/client/mobile-layout/mobile-tab-bar/MobileTabBar.Item/MobileTabBar.Item.tsx

@@ -54,6 +54,7 @@ export const MobileTabBarItem: FC<MobileTabBarItemProps> = (props) => {
         className={classnames('adm-tab-bar-item-title', {
           ['adm-tab-bar-item-title-with-icon']: icon,
         })}
+        style={{ fontSize: '12px' }}
       >
         {title}
       </span>

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)',
   },

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;
+      }
     `,
   };
 });