mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 02:59:58 +08:00
site: support responsive
This commit is contained in:
Benjy Cui
parent
b5d9e24114
commit
e928e57494
@ -91,6 +91,7 @@
|
||||
"dora": "^0.3.1",
|
||||
"dora-plugin-hmr": "^0.5.0",
|
||||
"dora-plugin-webpack": "^0.6.2",
|
||||
"enquire.js": "^2.1.1",
|
||||
"es3ify-loader": "^0.1.0",
|
||||
"eslint": "^2.2.0",
|
||||
"eslint-config-airbnb": "^6.0.1",
|
||||
|
||||
@ -13,3 +13,4 @@ import './styles/preview-img.less';
|
||||
import './styles/mock-browser.less';
|
||||
import './styles/colors.less';
|
||||
import './styles/motion.less';
|
||||
import './styles/responsive.less';
|
||||
|
||||
@ -43,7 +43,7 @@ a {
|
||||
border-left: 1px solid #e9e9e9;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
.aside-container {
|
||||
padding-bottom: 50px;
|
||||
|
||||
&.ant-menu-inline .ant-menu-submenu-title h4,
|
||||
@ -57,7 +57,7 @@ a {
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar .chinese {
|
||||
.aside-container .chinese {
|
||||
font-size: 12px;
|
||||
margin-left: 6px;
|
||||
font-weight: normal;
|
||||
|
||||
155
site/common/styles/responsive.less
Normal file
155
site/common/styles/responsive.less
Normal file
@ -0,0 +1,155 @@
|
||||
@media only screen and (min-width: 320px) and (max-width: 1024px) {
|
||||
.code-boxes-col-2-1, .code-boxes-col-1-1 {
|
||||
float: none;
|
||||
width: 100%;
|
||||
padding: 0!important;
|
||||
}
|
||||
#search-box {
|
||||
display: none;
|
||||
}
|
||||
.preview-image-boxes {
|
||||
margin: 0!important;
|
||||
float: none;
|
||||
width: 100%;
|
||||
}
|
||||
.preview-image-box {
|
||||
padding-left: 0;
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 320px) and (max-width: 767px) {
|
||||
#list,
|
||||
#search-box {
|
||||
display: none;
|
||||
}
|
||||
|
||||
a#logo {
|
||||
width: 144px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
float: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.banner-entry {
|
||||
position: relative;
|
||||
top: 30px;
|
||||
left: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nav {
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: #fff;
|
||||
line-height: 60px;
|
||||
margin-right: 0;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
box-shadow: 10px 0 12px rgba(0,0,0,0.1);
|
||||
transform: translateX(-100%);
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.nav.nav-show {
|
||||
animation: moveLeft .2s ease-in forwards;
|
||||
}
|
||||
|
||||
.nav.nav-hide {
|
||||
animation: moveLeftOut .2s ease-in forwards;
|
||||
}
|
||||
|
||||
ul#nav, ul#nav li {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.toc {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-phone-icon {
|
||||
display: block;
|
||||
width: 16px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
left: 30px;
|
||||
top: 32px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nav-phone-icon:before {
|
||||
content: "";
|
||||
display: block;
|
||||
border-radius: 2px;
|
||||
width: 16px;
|
||||
height: 2px;
|
||||
background: #777;
|
||||
box-shadow: 0 6px 0 0 #777, 0 12px 0 0 #777;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.main {
|
||||
height: calc(100% - 86px);
|
||||
}
|
||||
|
||||
.aside-container {
|
||||
float: none;
|
||||
width: auto;
|
||||
padding-bottom: 30px;
|
||||
border-bottom: 1px solid #e9e9e9;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.main-container {
|
||||
margin-left: 0;
|
||||
.markdown > * {
|
||||
width: 100%!important;
|
||||
}
|
||||
}
|
||||
|
||||
.main-wrapper {
|
||||
width: 100%;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.main-container {
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
footer ul li {
|
||||
float: none;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes moveLeft {
|
||||
0% {
|
||||
transform: translateX(-100%);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0px);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes moveLeftOut {
|
||||
0% {
|
||||
transform: translateX(0px);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-100%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@ -1,12 +1,47 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router';
|
||||
import { Select, Menu, Row, Col } from '../../../';
|
||||
import enquire from 'enquire.js';
|
||||
import { Select, Menu, Row, Col, Icon } from '../../../';
|
||||
const Option = Select.Option;
|
||||
|
||||
import './index.less';
|
||||
|
||||
import componentsList from '../../../_data/react-components';
|
||||
export default class Header extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
menuVisible: false,
|
||||
menuMode: 'horizontal',
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
document.addEventListener('click', () => {
|
||||
this.setState({
|
||||
menuVisible: false,
|
||||
});
|
||||
});
|
||||
|
||||
enquire.register('only screen and (min-width: 320px) and (max-width: 767px)', {
|
||||
match: () => {
|
||||
this.setState({ menuMode: 'inline' });
|
||||
},
|
||||
unmatch: () => {
|
||||
this.setState({ menuMode: 'horizontal' });
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
handleMenuIconClick(e) {
|
||||
e.stopPropagation();
|
||||
e.nativeEvent.stopImmediatePropagation();
|
||||
this.setState({
|
||||
menuVisible: true,
|
||||
});
|
||||
}
|
||||
|
||||
handleSearch(value) {
|
||||
this.props.history.push({ pathname: value });
|
||||
}
|
||||
@ -27,16 +62,25 @@ export default class Header extends React.Component {
|
||||
);
|
||||
});
|
||||
|
||||
const menuStyle = {
|
||||
display: this.state.menuVisible ? 'block' : '',
|
||||
};
|
||||
|
||||
return (
|
||||
<header id="header" className="clearfix">
|
||||
<Row>
|
||||
<Col span="4">
|
||||
<Col lg={4} md={6} sm={7} xs={24}>
|
||||
<Icon
|
||||
className="nav-phone-icon"
|
||||
onClick={this.handleMenuIconClick.bind(this)}
|
||||
type="menu" />
|
||||
<Link to="/" id="logo">
|
||||
<img src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg" />
|
||||
<span>Ant Design</span>
|
||||
</Link>
|
||||
</Col>
|
||||
<Col span="20">
|
||||
<Col className={`nav ${this.state.menuVisible ? 'nav-show' : 'nav-hide'}`}
|
||||
lg={20} md={18} sm={17} xs={0} style={menuStyle}>
|
||||
<div id="search-box">
|
||||
<Select combobox
|
||||
dropdownClassName="component-select"
|
||||
@ -46,7 +90,7 @@ export default class Header extends React.Component {
|
||||
{options}
|
||||
</Select>
|
||||
</div>
|
||||
<Menu mode="horizontal" selectedKeys={[activeMenuItem]} id="nav">
|
||||
<Menu mode={this.state.menuMode} selectedKeys={[activeMenuItem]} id="nav">
|
||||
<Menu.Item key="home">
|
||||
<Link to="/">
|
||||
首页
|
||||
|
||||
@ -135,20 +135,22 @@ export default class MainContent extends React.Component {
|
||||
return (
|
||||
<div className="main-wrapper">
|
||||
<Row>
|
||||
<Col span="4">
|
||||
<Menu className="sidebar" mode="inline"
|
||||
<Col lg={4} md={6} sm={24} xs={24}>
|
||||
<Menu className="aside-container" mode="inline"
|
||||
defaultOpenKeys={Object.keys(this.props.menuItems)}
|
||||
selectedKeys={[activeMenuItem]}>
|
||||
{ menuItems }
|
||||
</Menu>
|
||||
</Col>
|
||||
<Col span="20" className="main-container">
|
||||
<Col lg={20} md={18} sm={24} xs={24} className="main-container">
|
||||
{ this.props.children }
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row>
|
||||
<Col span="20" offset="4">
|
||||
<Col lg={{ span: 20, offset: 4 }}
|
||||
md={{ span: 18, offset: 6 }}
|
||||
sm={24} xs={24}>
|
||||
<section className="prev-next-nav">
|
||||
{
|
||||
!!prev ?
|
||||
|
||||
Loading…
Reference in New Issue
Block a user