Commit 7c0550f1 authored by jim's avatar jim

responsive support for user information interface

parent 3d66a584
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>
......
......@@ -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;
......
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>
......
@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;
}
}
......@@ -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}
>
......
......@@ -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;
}
}
}
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>
);
......
@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%;
}
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment