[Optimize][Web]Optimize some web layouts to make them more user-frien…

…dly when displayed on small screens (DataLinkDC#3749) Co-authored-by: zackyoungh <[email protected]>
aiwenmo · Aug 27, 2024 · e376841 · e376841
1 parent 7d7a64b
commit e376841
Show file tree

Hide file tree

Showing 8 changed files with 17 additions and 7 deletions.
diff --git a/dinky-web/src/global.less b/dinky-web/src/global.less
@@ -697,3 +697,7 @@ span .mtkb {
     border-radius: 50%;
   }
 }
+
+.ant-page-header-breadcrumb {
+  padding-left: 25px;
+}
diff --git a/dinky-web/src/pages/DevOps/JobDetail/JobOverview/components/JobDesc.tsx b/dinky-web/src/pages/DevOps/JobDetail/JobOverview/components/JobDesc.tsx
@@ -75,7 +75,7 @@ const JobDesc = (props: JobProps) => {
   return (
     <>
       <ProCard>
-        <Descriptions bordered size='small' column={5}>
+        <Descriptions bordered size='small' column={{ xs: 1, sm: 2, md: 3, lg: 3, xl: 4, xxl: 5 }}>
           <Descriptions.Item label={l('global.table.status')}>
             <StatusTag status={jobDetail?.instance?.status} />
           </Descriptions.Item>

diff --git a/dinky-web/src/pages/DevOps/JobList/components/Overview/index.tsx b/dinky-web/src/pages/DevOps/JobList/components/Overview/index.tsx
@@ -47,7 +47,7 @@ const JobOverview = (props: any) => {
 
   return (
     <Row gutter={[16, 8]}>
-      <Col span={5}>
+      <Col span={5} xs={24} xxl={7}>
         <ProCard colSpan={'20%'} boxShadow={true}>
           <StatisticsCard
             title={l('devops.joblist.status.all')}
@@ -70,7 +70,7 @@ const JobOverview = (props: any) => {
           />
         </ProCard>
       </Col>
-      <Col span={19}>
+      <Col span={19} xs={24} xxl={17}>
         <ProCard layout='center' boxShadow={true}>
           <StatisticsCard
             title={l('devops.joblist.status.running')}

diff --git a/dinky-web/src/pages/RegCenter/Alert/AlertGroup/index.tsx b/dinky-web/src/pages/RegCenter/Alert/AlertGroup/index.tsx
@@ -256,6 +256,7 @@ const AlertGroupTableList: React.FC = (props: any) => {
           headerTitle={l('rc.ag.management')}
           toolBarRender={renderToolBar()}
           dataSource={renderDataSource}
+          grid={{ xs: 1, sm: 2, md: 3, lg: 3, xl: 4, xxl: 5 }}
         />
 
         <AlertGroupForm

diff --git a/dinky-web/src/pages/RegCenter/Alert/AlertInstance/components/AlertInstanceList/index.tsx b/dinky-web/src/pages/RegCenter/Alert/AlertInstance/components/AlertInstanceList/index.tsx
@@ -262,6 +262,7 @@ const AlertInstanceList: React.FC = () => {
         headerTitle={l('rc.ai.management')}
         toolBarRender={renderToolBar()}
         dataSource={renderDataSource}
+        grid={{ xs: 1, sm: 2, md: 3, lg: 4, xl: 5, xxl: 5 }}
       />
 
       {/* added */}

diff --git a/dinky-web/src/pages/RegCenter/Cluster/Configuration/components/ConfigurationList/index.tsx b/dinky-web/src/pages/RegCenter/Cluster/Configuration/components/ConfigurationList/index.tsx
@@ -301,6 +301,7 @@ export default () => {
         actionRef={actionRef}
         headerTitle={l('rc.cc.management')}
         toolBarRender={toolBarRender}
+        grid={{ xs: 1, sm: 1, md: 2, lg: 2, xl: 3, xxl: 4 }}
         dataSource={renderData(clusterConfigState.configList)}
       />
 

diff --git a/dinky-web/src/pages/RegCenter/Cluster/Instance/components/InstanceList/index.tsx b/dinky-web/src/pages/RegCenter/Cluster/Instance/components/InstanceList/index.tsx
@@ -34,7 +34,7 @@ import {
   handleRemoveById,
   updateDataByParam
 } from '@/services/BusinessCrud';
-import { PROTABLE_OPTIONS_PUBLIC, PRO_LIST_CARD_OPTIONS } from '@/services/constants';
+import { PRO_LIST_CARD_OPTIONS, PROTABLE_OPTIONS_PUBLIC } from '@/services/constants';
 import { API_CONSTANTS } from '@/services/endpoints';
 import { PermissionConstants } from '@/types/Public/constants';
 import { Cluster } from '@/types/RegCenter/data.d';
@@ -319,8 +319,10 @@ export default () => {
           }
         >
           <Card
-            headStyle={{ minHeight: '10px' }}
-            bodyStyle={{ width: '100%', padding: '10px 4px' }}
+            styles={{
+              header: { minHeight: '10px' },
+              body: { width: '100%', padding: '10px 4px' }
+            }}
             className={'card-list-item'}
             key={item.id}
             hoverable
@@ -351,7 +353,7 @@ export default () => {
         toolBarRender={toolBarRender}
         {...PROTABLE_OPTIONS_PUBLIC}
         {...(PRO_LIST_CARD_OPTIONS as any)}
-        grid={{ gutter: 24, column: 4 }}
+        grid={{ gutter: 24, xs: 1, sm: 2, md: 2, lg: 3, xl: 3, xxl: 4 }}
         pagination={{ size: 'small', defaultPageSize: 12, hideOnSinglePage: true }}
         dataSource={data}
         loading={loading}

diff --git a/dinky-web/src/pages/RegCenter/DataSource/components/DataSourceList/index.tsx b/dinky-web/src/pages/RegCenter/DataSource/components/DataSourceList/index.tsx
@@ -295,6 +295,7 @@ const DataSourceTable: React.FC<connect & StateType> = (props) => {
         headerTitle={l('rc.ds.management')}
         toolBarRender={renderToolBar}
         dataSource={renderDataSource}
+        grid={{ xs: 1, sm: 2, md: 2, lg: 3, xl: 3, xxl: 4 }}
       />
 
       {/* added */}