change version slector position (#4799)

site/theme/static/header.less

@@ -62,12 +62,17 @@
   box-shadow: none;
 }
 
-.lang {
+.lang,
+.version {
   float: right;
   margin-top: 29px;
   margin-left: 12px;
 }
 
+.version {
+  width: 68px;
+}
+
 #nav {
   border: 0;
   float: right;

site/theme/static/responsive.less

@@ -9,7 +9,7 @@
   cursor: pointer;
 }
 
-@media only screen and (min-width: 320px) and (max-width: 1200px) {
+@media only screen and (min-width: 320px) and (max-width: 1280px) {
   #search-box {
     display: none;
   }
@@ -33,10 +33,6 @@
 }
 
 @media only screen and (min-width: 320px) and (max-width: 1024px) {
-  #search-box {
-    display: none;
-  }
-
   a#logo {
     width: 150px;
     margin-left: auto;
@@ -104,12 +100,27 @@
     border-color: @text-color;
   }
 
+  div.version {
+    display: block;
+    margin: 29px auto 16px;
+    & > .ant-select-selection {
+      color: @text-color;
+      &:not(:hover) {
+        border-color: @text-color;
+      }
+    }
+  }
+
   .popover-menu {
     width: 300px;
     button.lang {
       margin: 16px auto;
       float: none;
     }
+    div.version {
+      margin: 32px auto 16px;
+      float: none;
+    }
     .ant-popover-inner {
       overflow: hidden;
       &-content {

site/theme/template/Home/index.jsx

@@ -60,6 +60,12 @@ function getStyle() {
       color: rgba(0, 0, 0, 0.65);
       border-color: rgba(0, 0, 0, 0.65);
     }
+    .home-nav-white .version > .ant-select-selection {
+      color: rgba(0, 0, 0, 0.65);
+    }
+    .home-nav-white .version > .ant-select-selection:not(:hover) {
+      border-color: rgba(0, 0, 0, 0.65);
+    }
     .nav-phone-icon:before {
       background: #eee;
       box-shadow: 0 7px 0 0 #eee, 0 14px 0 0 #eee;
@@ -69,9 +75,10 @@ function getStyle() {
       box-shadow: 0 7px 0 0 #777, 0 14px 0 0 #777;
     }
     .lang,
+    .version > .ant-select-selection,
     #nav a {
       color: #eee;
-      transition: color 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
+      transition: all 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
     }
     #search-box {
       border-left-color: rgba(235, 237, 238, .5);

site/theme/template/Layout/Footer.jsx

@@ -1,10 +1,6 @@
 import React from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl';
-import { Select, Modal, Icon } from 'antd';
-import { version as antdVersion } from '../../../../package.json';
-import * as utils from '../utils';
-
-const Option = Select.Option;
+import { Modal, Icon } from 'antd';
 
 function isLocalStorageNameSupported() {
   const testKey = 'test';
@@ -60,18 +56,7 @@ class Footer extends React.Component {
     });
   }
 
-  handleVersionChange = (url) => {
-    const currentUrl = window.location.href;
-    const currentPathname = window.location.pathname;
-    window.location.href = currentUrl.replace(window.location.origin, url)
-      .replace(currentPathname, utils.getLocalizedPathname(currentPathname));
-  }
-
   render() {
-    const { themeConfig } = this.props;
-    const docVersions = { ...themeConfig.docVersions, [antdVersion]: antdVersion };
-    const options = Object.keys(docVersions)
-            .map(version => <Option value={docVersions[version]} key={version}>{version}</Option>);
     return (
       <footer id="footer">
         <ul>
@@ -147,17 +132,6 @@ class Footer extends React.Component {
           <li>
             <div>©2016 <FormattedMessage id="app.footer.author" /></div>
             <div>Built with <a href="https://github.com/benjycui/bisheng">BiSheng</a></div>
-            <div style={{ marginTop: 10 }}>
-              <FormattedMessage id="app.footer.version" />
-              <Select
-                size="small"
-                dropdownMatchSelectWidth={false}
-                defaultValue={antdVersion}
-                onChange={this.handleVersionChange}
-              >
-                {options}
-              </Select>
-            </div>
           </li>
         </ul>
       </footer>

site/theme/template/Layout/Header.jsx

@@ -4,6 +4,7 @@ import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
 import { Select, Menu, Row, Col, Icon, Button, Popover } from 'antd';
 import * as utils from '../utils';
+import { version as antdVersion } from '../../../../package.json';
 
 const Option = Select.Option;
 
@@ -76,9 +77,19 @@ export default class Header extends React.Component {
     }
   }
 
+  handleVersionChange = (url) => {
+    const currentUrl = window.location.href;
+    const currentPathname = window.location.pathname;
+    window.location.href = currentUrl.replace(window.location.origin, url)
+      .replace(currentPathname, utils.getLocalizedPathname(currentPathname));
+  }
+
   render() {
     const { inputValue, menuMode, menuVisible } = this.state;
-    const { location, picked, isFirstScreen } = this.props;
+    const { location, picked, isFirstScreen, themeConfig } = this.props;
+    const docVersions = { ...themeConfig.docVersions, [antdVersion]: antdVersion };
+    const versionOptions = Object.keys(docVersions)
+            .map(version => <Option value={docVersions[version]} key={version}>{version}</Option>);
     const components = picked.components;
     const module = location.pathname.replace(/(^\/|\/$)/g, '').split('/').slice(0, -1).join('/');
     let activeMenuItem = module || 'home';
@@ -112,6 +123,16 @@ export default class Header extends React.Component {
       <Button className="lang" type="ghost" size="small" onClick={this.handleLangChange} key="lang">
         <FormattedMessage id="app.header.lang" />
       </Button>,
+      <Select
+        key="version"
+        className="version"
+        size="small"
+        dropdownMatchSelectWidth={false}
+        defaultValue={antdVersion}
+        onChange={this.handleVersionChange}
+      >
+        {versionOptions}
+      </Select>,
       <Menu mode={menuMode} selectedKeys={[activeMenuItem]} id="nav" key="nav">
         <Menu.Item key="home">
           <Link to={utils.getLocalizedPathname('/', isZhCN)}>
@@ -164,13 +185,13 @@ export default class Header extends React.Component {
           />
         </Popover> : null}
         <Row>
-          <Col lg={4} md={6} sm={24} xs={24}>
+          <Col lg={4} md={5} sm={24} xs={24}>
             <Link to={utils.getLocalizedPathname('/', isZhCN)} id="logo">
               <img alt="logo" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg" />
               <span>Ant Design</span>
             </Link>
           </Col>
-          <Col lg={20} md={18} sm={0} xs={0}>
+          <Col lg={20} md={19} sm={0} xs={0}>
             <div id="search-box">
               <Select
                 combobox