From 97092686cfbcc69b29b1f038c18b17a98a25d8d5 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Wed, 1 Nov 2017 21:51:00 +0800
Subject: [PATCH] Responsive search form in Table List page

close #34
---
 src/routes/List/TableList.js   | 26 +++++++++++++-------------
 src/routes/List/TableList.less |  6 ++++++
 2 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/src/routes/List/TableList.js b/src/routes/List/TableList.js
index 8f385a7d..a465eee8 100644
--- a/src/routes/List/TableList.js
+++ b/src/routes/List/TableList.js
@@ -156,15 +156,15 @@ export default class TableList extends PureComponent {
     const { getFieldDecorator } = this.props.form;
     return (
       <Form onSubmit={this.handleSearch} layout="inline">
-        <Row gutter={48}>
-          <Col span={8}>
+        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
+          <Col md={8} sm={24}>
             <FormItem label="规则编号">
               {getFieldDecorator('no')(
                 <Input placeholder="请输入" />
               )}
             </FormItem>
           </Col>
-          <Col span={8}>
+          <Col md={8} sm={24}>
             <FormItem label="使用状态">
               {getFieldDecorator('status')(
                 <Select placeholder="请选择" style={{ width: '100%' }}>
@@ -174,7 +174,7 @@ export default class TableList extends PureComponent {
               )}
             </FormItem>
           </Col>
-          <Col span={8}>
+          <Col md={8} sm={24}>
             <span className={styles.sumbitButtons}>
               <Button type="primary" htmlType="submit">查询</Button>
               <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>重置</Button>
@@ -192,15 +192,15 @@ export default class TableList extends PureComponent {
     const { getFieldDecorator } = this.props.form;
     return (
       <Form onSubmit={this.handleSearch} layout="inline">
-        <Row gutter={48}>
-          <Col span={8}>
+        <Row gutter={{ md: 8, lg: 24, xl: 18 }}>
+          <Col md={8} sm={24}>
             <FormItem label="规则编号">
               {getFieldDecorator('no')(
                 <Input placeholder="请输入" />
               )}
             </FormItem>
           </Col>
-          <Col span={8}>
+          <Col md={8} sm={24}>
             <FormItem label="使用状态">
               {getFieldDecorator('status')(
                 <Select placeholder="请选择" style={{ width: '100%' }}>
@@ -210,7 +210,7 @@ export default class TableList extends PureComponent {
               )}
             </FormItem>
           </Col>
-          <Col span={8}>
+          <Col md={8} sm={24}>
             <FormItem label="调用次数">
               {getFieldDecorator('number')(
                 <InputNumber style={{ width: '100%' }} />
@@ -218,15 +218,15 @@ export default class TableList extends PureComponent {
             </FormItem>
           </Col>
         </Row>
-        <Row gutter={48}>
-          <Col span={8}>
+        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
+          <Col md={8} sm={24}>
             <FormItem label="更新日期">
               {getFieldDecorator('date')(
                 <DatePicker style={{ width: '100%' }} placeholder="请输入更新日期" />
               )}
             </FormItem>
           </Col>
-          <Col span={8}>
+          <Col md={8} sm={24}>
             <FormItem label="使用状态">
               {getFieldDecorator('status3')(
                 <Select placeholder="请选择" style={{ width: '100%' }}>
@@ -236,7 +236,7 @@ export default class TableList extends PureComponent {
               )}
             </FormItem>
           </Col>
-          <Col span={8}>
+          <Col md={8} sm={24}>
             <FormItem label="使用状态">
               {getFieldDecorator('status4')(
                 <Select placeholder="请选择" style={{ width: '100%' }}>
@@ -248,7 +248,7 @@ export default class TableList extends PureComponent {
           </Col>
         </Row>
         <div style={{ overflow: 'hidden' }}>
-          <span style={{ float: 'right' }}>
+          <span style={{ float: 'right', marginBottom: 24 }}>
             <Button type="primary" htmlType="submit">查询</Button>
             <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>重置</Button>
             <a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
diff --git a/src/routes/List/TableList.less b/src/routes/List/TableList.less
index a2445e36..db7c2c7b 100644
--- a/src/routes/List/TableList.less
+++ b/src/routes/List/TableList.less
@@ -16,6 +16,11 @@
       margin-bottom: 24px;
       margin-right: 0;
       display: flex;
+      > .ant-form-item-label {
+        width: auto;
+        line-height: 32px;
+        padding-right: 8px;
+      }
     }
     .ant-form-item-control-wrapper {
       flex: 1;
@@ -23,6 +28,7 @@
   }
   .sumbitButtons {
     white-space: nowrap;
+    margin-bottom: 24px;
   }
 }
 
-- 
GitLab