change lang-button pos & improve footer responsive

site/theme/static/footer.less

@@ -68,7 +68,7 @@ footer {
         color: #fff;
       }
     }
-    .build-tool {
+    .translate-button {
       text-align: left;
       width: 200px;
       margin: 0 auto;

site/theme/static/header.less

@@ -36,12 +36,13 @@
   text-decoration: none;
 
   img {
-    height: 32px;
+    height: 28px;
+    margin-right: 16px;
   }
   span {
     float: right;
     font-size: 14px;
-    font-family: 'Raleway', 'Hiragino Sans GB', sans-serif;
+    font-family: 'PingFang SC', 'Raleway', 'Hiragino Sans GB', sans-serif;
     height: @header-height;
     line-height: @header-height;
     text-transform: uppercase;
@@ -79,21 +80,11 @@
   box-shadow: none;
 }
 
-.header-lang-button,
 .version {
   float: right;
   margin-top: 20px;
-  margin-left: 10px;
-}
-
-.header-lang-button {
-  color: @site-text-color;
-  border-color: @border-color-base;
-  margin-right: 40px;
-}
-
-.version {
   margin-left: 16px;
+  margin-right: 40px;
 }
 
 #nav {

site/theme/static/responsive.less

@@ -114,13 +114,6 @@
     }
   }
 
-  button.lang {
-    display: block;
-    margin: 29px auto 16px;
-    color: @site-text-color;
-    border-color: @site-text-color;
-  }
-
   div.version {
     display: block;
     margin: 29px auto 16px;
@@ -134,10 +127,6 @@
 
   .popover-menu {
     width: 300px;
-    button.lang {
-      margin: 16px auto;
-      float: none;
-    }
     div.version {
       margin: 16px auto;
       float: none;
@@ -148,8 +137,7 @@
         padding: 0;
         .ant-select {
           width: 60%;
-          margin-left: 10%;
-          display: inline-block;
+          display: block;
         }
         .ant-btn {
           margin: 16px 10% 0 0;
@@ -222,20 +210,32 @@
     margin: 0;
   }
 
-  footer {
-    border-top: 1px solid #e9e9e9;
+  #footer {
     text-align: center;
-    ul {
-      padding: 0;
-      > li {
-        float: none;
+    .footer-wrap {
+      padding: 40px;
+    }
+    .footer-center {
+      text-align: center;
+    }
+    h2 {
+      margin-top: 16px;
+    }
+    .bottom-bar {
+      text-align: center;
+      .translate-button {
         width: auto;
-        > h2 .anticon {
-          display: none;
-        }
+        text-align: center;
+        margin-bottom: 16px;
       }
     }
   }
+
+  .prev-next-nav {
+    margin-left: 16px;
+    width: ~"calc(100% - 32px)";
+  }
+
   .drawer {
     .ant-menu-inline .ant-menu-item:after,
     .ant-menu-vertical .ant-menu-item:after {

site/theme/template/Layout/Footer.jsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl';
-import { Modal, message, Row, Col } from 'antd';
-import { Link } from 'bisheng/router';
-import { isLocalStorageNameSupported, loadScript } from '../utils';
+import { Modal, message, Row, Col, Button } from 'antd';
+import { isLocalStorageNameSupported, loadScript, getLocalizedPathname, isZhCN } from '../utils';
 import ColorPicker from '../Color/ColorPicker';
 
 class Footer extends React.Component {
@@ -83,6 +82,21 @@ class Footer extends React.Component {
     });
   }
 
+  handleLangChange = () => {
+    const { pathname } = this.props.location;
+    const currentProtocol = `${window.location.protocol}//`;
+    const currentHref = window.location.href.substr(currentProtocol.length);
+
+    if (isLocalStorageNameSupported()) {
+      localStorage.setItem('locale', isZhCN(pathname) ? 'en-US' : 'zh-CN');
+    }
+
+    window.location.href = currentProtocol + currentHref.replace(
+      window.location.pathname,
+      getLocalizedPathname(pathname, !isZhCN(pathname)),
+    );
+  }
+
   render() {
     return (
       <footer id="footer" className="dark">
@@ -245,11 +259,10 @@ class Footer extends React.Component {
         </div>
         <Row className="bottom-bar">
           <Col lg={6} sm={24}>
-            <div className="build-tool">
-              Built with&nbsp;
-              <a target="_blank" rel="noopener noreferrer" href="https://github.com/benjycui/bisheng">
-                BiSheng
-              </a>
+            <div className="translate-button">
+              <Button ghost size="small" onClick={this.handleLangChange}>
+                <FormattedMessage id="app.header.lang" />
+              </Button>
             </div>
           </Col>
           <Col lg={18} sm={24}>
@@ -275,10 +288,6 @@ class Footer extends React.Component {
             </span>
             <span style={{ marginRight: 12 }}>ICP 证浙 B2-2-100257</span>
             <span style={{ marginRight: 12 }}>Copyright © <FormattedMessage id="app.footer.company" /></span>
-            &nbsp;
-            <Link to="/docs/resource/work-with-us">
-              <FormattedMessage id="app.footer.work_with_us" />
-            </Link>
           </Col>
         </Row>
       </footer>

site/theme/template/Layout/Header.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { Link } from 'bisheng/router';
 import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
-import { Select, Menu, Row, Col, Icon, Button, Popover, AutoComplete, Input, Badge } from 'antd';
+import { Select, Menu, Row, Col, Icon, Popover, AutoComplete, Input, Badge } from 'antd';
 import * as utils from '../utils';
 import { version as antdVersion } from '../../../../package.json';
 
@@ -89,21 +89,6 @@ export default class Header extends React.Component {
       optionValue.indexOf(value.toLowerCase()) > -1;
   }
 
-  handleLangChange = () => {
-    const { pathname } = this.props.location;
-    const currentProtocol = `${window.location.protocol}//`;
-    const currentHref = window.location.href.substr(currentProtocol.length);
-
-    if (utils.isLocalStorageNameSupported()) {
-      localStorage.setItem('locale', utils.isZhCN(pathname) ? 'en-US' : 'zh-CN');
-    }
-
-    window.location.href = currentProtocol + currentHref.replace(
-      window.location.pathname,
-      utils.getLocalizedPathname(pathname, !utils.isZhCN(pathname)),
-    );
-  }
-
   handleVersionChange = (url) => {
     const currentUrl = window.location.href;
     const currentPathname = window.location.pathname;
@@ -155,9 +140,6 @@ export default class Header extends React.Component {
     });
 
     const menu = [
-      <Button className="header-lang-button" ghost size="small" onClick={this.handleLangChange} key="lang">
-        <FormattedMessage id="app.header.lang" />
-      </Button>,
       <Select
         key="version"
         className="version"
@@ -234,7 +216,8 @@ export default class Header extends React.Component {
         <Row>
           <Col xxl={4} xl={5} lg={5} md={8} sm={24} xs={24}>
             <Link to={utils.getLocalizedPathname('/', isZhCN)} id="logo">
-              <img alt="logo" src="https://gw.alipayobjects.com/zos/rmsportal/wvWaxYOwGvgnVQxkoxpU.svg" />
+              <img alt="logo" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" />
+              <span>ANT DESIGN</span>
             </Link>
           </Col>
           <Col xxl={20} xl={19} lg={19} md={16} sm={0} xs={0}>

site/theme/zh-CN.js

@@ -13,7 +13,7 @@ module.exports = {
     'app.header.menu.resource': '资源',
     'app.header.menu.mobile': '移动版',
     'app.header.menu.pro': 'PRO',
-    'app.header.lang': 'EN',
+    'app.header.lang': 'English',
     'app.content.edit-page': '在 Github 上编辑此页！',
     'app.content.edit-demo': '在 Github 上编辑此示例！',
     'app.component.examples': '代码演示',