From e928e57494cb82770d66d2e6c4ff54b61f0c5ccf Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Thu, 24 Mar 2016 17:13:19 +0800 Subject: [PATCH] site: support responsive --- package.json | 1 + site/common/lib.js | 1 + site/common/styles/common.less | 4 +- site/common/styles/responsive.less | 155 +++++++++++++++++++++++++++ site/component/Header/index.jsx | 52 ++++++++- site/component/MainContent/index.jsx | 10 +- 6 files changed, 213 insertions(+), 10 deletions(-) create mode 100644 site/common/styles/responsive.less diff --git a/package.json b/package.json index 861b178cad..2095ca5395 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/site/common/lib.js b/site/common/lib.js index 4bb09aabff..cd2a387a59 100644 --- a/site/common/lib.js +++ b/site/common/lib.js @@ -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'; diff --git a/site/common/styles/common.less b/site/common/styles/common.less index fa5731698d..4f30604e45 100644 --- a/site/common/styles/common.less +++ b/site/common/styles/common.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; diff --git a/site/common/styles/responsive.less b/site/common/styles/responsive.less new file mode 100644 index 0000000000..92e65fabef --- /dev/null +++ b/site/common/styles/responsive.less @@ -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; + } +} \ No newline at end of file diff --git a/site/component/Header/index.jsx b/site/component/Header/index.jsx index e55630bb75..318d8aacbf 100644 --- a/site/component/Header/index.jsx +++ b/site/component/Header/index.jsx @@ -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 (