responsive support for user information interface

src/routes/Userinfo/BaseView.js

@@ -1,5 +1,7 @@
 import React, { Component, Fragment } from 'react';
 import { Form, Input, Upload, Select, Button } from 'antd';
+import Debounce from 'lodash-decorators/debounce';
+import Bind from 'lodash-decorators/bind';
 import styles from './BaseView.less';
 import GeographicView from './GeographicView';
 import PhoneView from './PhoneView';
@@ -46,8 +48,16 @@ const validatorPhone = (rule, value, callback) => {
 
 @Form.create()
 export default class BaseView extends Component {
+  state = {
+    md: false,
+  };
   componentDidMount() {
     this.setBaseInfo();
+    this.resize();
+    window.addEventListener('resize', this.resize);
+  }
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.resize);
   }
   setBaseInfo = () => {
     const { currentUser } = this.props;
@@ -65,10 +75,29 @@ export default class BaseView extends Component {
       'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png';
     return url;
   }
+  getViewDom = (ref) => {
+    this.view = ref;
+  };
+  @Bind()
+  @Debounce(200)
+  resize() {
+    if (this.view.offsetWidth > 696) {
+      this.setState({
+        md: false,
+      });
+      return;
+    }
+    this.setState({
+      md: true,
+    });
+  }
   render() {
     const { getFieldDecorator } = this.props.form;
     return (
-      <div className={styles.baseView}>
+      <div
+        className={`${styles.baseView} ${this.state.md ? styles.md : ''}`}
+        ref={this.getViewDom}
+      >
         <div className={styles.left}>
           <Form layout="vertical" onSubmit={this.handleSubmit} hideRequiredMark>
             <FormItem label="邮箱">
@@ -98,7 +127,7 @@ export default class BaseView extends Component {
                   { required: true, message: 'Please input your country!' },
                 ],
               })(
-                <Select style={{ width: 220 }}>
+                <Select style={{ maxWidth: 220 }}>
                   <Option value="China">中国</Option>
                   <Option value="USA">美国</Option>
                   <Option value="France">法国</Option>

src/routes/Userinfo/BaseView.less

@@ -2,8 +2,18 @@
 
 .baseView {
   display: flex;
+  &.md {
+    flex-direction: column-reverse;
+    .right {
+      padding: 20px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+  }
   .left {
-    width: 448px;
+    max-width: 448px;
+    min-width: 224px;
   }
   .right {
     flex: 1;

src/routes/Userinfo/GeographicView.js

@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
 import { Select, Spin } from 'antd';
 import { connect } from 'dva';
+import styles from './GeographicView.less';
 
 const { Option } = Select;
 
@@ -17,7 +18,7 @@ const nullSlectItem = {
     isLoading,
   };
 })
-export default class ProvinceSelect extends PureComponent {
+export default class GeographicView extends PureComponent {
   componentDidMount = () => {
     this.props.dispatch({
       type: 'geographic/fetchProvince',
@@ -78,22 +79,22 @@ export default class ProvinceSelect extends PureComponent {
   render() {
     const { province, city } = this.conversionObject();
     return (
-      <Spin spinning={this.props.isLoading}>
+      <Spin spinning={this.props.isLoading} wrapperClassName={styles.row}>
         <Select
+          className={styles.item}
           value={province}
           labelInValue
           showSearch
           onSelect={this.selectProvinceItem}
-          style={{ width: 220, marginRight: 8 }}
         >
           {this.getProvinceOption()}
         </Select>
         <Select
+          className={styles.item}
           value={city}
           labelInValue
           showSearch
           onSelect={this.selectCityItem}
-          style={{ width: 220 }}
         >
           {this.getCityOption()}
         </Select>

src/routes/Userinfo/GeographicView.less

@@ -0,0 +1,17 @@
+@import '~antd/lib/style/themes/default.less';
+
+.row {
+  .item {
+    width: 220px;
+  }
+  .item:first-child {
+    margin-right: 8px;
+  }
+}
+
+@media screen and (max-width: @screen-sm) {
+  .item:first-child {
+    margin: 0;
+    margin-bottom: 8px;
+  }
+}

src/routes/Userinfo/Info.js

@@ -48,7 +48,7 @@ export default class Info extends PureComponent {
       <div className={styles.main}>
         <div className={styles.leftmenu}>
           <Menu
-            mode="inline"
+            mode={window.innerWidth < 769 ? 'horizontal' : 'inline'}
             selectedKeys={[this.state.selectKey]}
             onClick={this.selectKey}
           >

src/routes/Userinfo/Info.less

@@ -7,6 +7,7 @@
   display: flex;
   padding-top: 16px;
   padding-bottom: 16px;
+  overflow: auto;
   .leftmenu {
     width: 224px;
     border-right: 1px solid #e8e8e8;
@@ -69,3 +70,16 @@
     color: red;
   }
 }
+
+@media screen and (max-width: @screen-md) {
+  .main {
+    flex-direction: column;
+    .leftmenu {
+      width: 100%;
+      border: none;
+    }
+    .right {
+      padding: 40px;
+    }
+  }
+}

src/routes/Userinfo/PhoneView.js

@@ -1,5 +1,6 @@
 import React, { Fragment, PureComponent } from 'react';
 import { Input } from 'antd';
+import styles from './PhoneView.less';
 
 class PhoneView extends PureComponent {
   render() {
@@ -11,18 +12,18 @@ class PhoneView extends PureComponent {
     return (
       <Fragment>
         <Input
+          className={styles.area_code}
           value={values[0]}
           onChange={(e) => {
             onChange(`${e.target.value}-${values[1]}`);
           }}
-          style={{ width: 128, marginRight: 8 }}
         />
         <Input
+          className={styles.phone_number}
           onChange={(e) => {
             onChange(`${values[0]}-${e.target.value}`);
           }}
           value={values[1]}
-          style={{ width: 312 }}
         />
       </Fragment>
     );

src/routes/Userinfo/PhoneView.less

@@ -0,0 +1,20 @@
+@import '~antd/lib/style/themes/default.less';
+
+.area_code {
+  width: 128px;
+  margin-right: 8px;
+}
+.phone_number {
+  width: 312px;
+}
+
+@media screen and (max-width: @screen-sm) {
+  .area_code {
+    width: 100%;
+    margin: 0;
+    margin-bottom: 8px;
+  }
+  .phone_number {
+    width: 100%;
+  }
+}