mirror of
https://github.com/nocobase/nocobase
synced 2024-11-15 07:25:15 +00:00
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
This commit is contained in:
Katherine
GitHub
parent
ad563f37c6
commit
6badfd8983
@ -2,9 +2,7 @@
|
||||
"version": "1.4.0-alpha.8",
|
||||
"npmClient": "yarn",
|
||||
"useWorkspaces": true,
|
||||
"npmClientArgs": [
|
||||
"--ignore-engines"
|
||||
],
|
||||
"npmClientArgs": ["--ignore-engines"],
|
||||
"command": {
|
||||
"version": {
|
||||
"forcePublish": true,
|
||||
|
||||
@ -31,7 +31,11 @@ export const Details = withDynamicSchemaProps(
|
||||
);
|
||||
}
|
||||
|
||||
return <FormV2 {...props} />;
|
||||
return (
|
||||
<div className="nb-details">
|
||||
<FormV2 {...props} />
|
||||
</div>
|
||||
);
|
||||
},
|
||||
{ displayName: 'Details' },
|
||||
);
|
||||
|
||||
@ -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 />}
|
||||
|
||||
@ -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 }}>
|
||||
<DataSourceContext.Provider value={undefined}>
|
||||
<CollectionContext.Provider value={undefined}>{props.children}</CollectionContext.Provider>
|
||||
</DataSourceContext.Provider>
|
||||
</WorkbenchBlockContext.Provider>
|
||||
<div className="nb-action-penal-container">
|
||||
<WorkbenchBlockContext.Provider value={{ layout }}>
|
||||
<DataSourceContext.Provider value={undefined}>
|
||||
<CollectionContext.Provider value={undefined}>{props.children}</CollectionContext.Provider>
|
||||
</DataSourceContext.Provider>
|
||||
</WorkbenchBlockContext.Provider>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
{ displayName: 'WorkbenchBlock' },
|
||||
|
||||
@ -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`,
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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)',
|
||||
},
|
||||
|
||||
@ -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;
|
||||
}
|
||||
`,
|
||||
};
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user