move background on login page to correct position on large screens (#665)

* move background on login page to correct position on large screens

* promote antd layout and content - tweak mobile styles

* simplify width in login and register page

src/components/Login/index.js

@@ -89,7 +89,7 @@ class Login extends Component {
       }
     });
     return (
-      <div className={classNames(className, styles.main)}>
+      <div className={classNames(className, styles.login)}>
         <Form onSubmit={this.handleSubmit}>
           {
             tabs.length ? (

src/components/Login/index.less

 @import "~antd/lib/style/themes/default.less";
 
-.main {
-  width: 368px;
-  margin: 0 auto;
+.login {
 
   .tabs {
     padding: 0 2px;

src/index.less

@@ -4,6 +4,10 @@ body,
   height: 100%;
 }
 
+:global(.ant-layout) {
+  min-height: 100%;
+}
+
 canvas {
   display: block;
 }

src/layouts/BasicLayout.js

@@ -177,7 +177,6 @@ class BasicLayout extends React.PureComponent {
             onNoticeVisibleChange={this.handleNoticeVisibleChange}
           />
           <Content style={{ margin: '24px 24px 0', height: '100%' }}>
-            <div style={{ minHeight: 'calc(100vh - 260px)' }}>
             <Switch>
               {
                 redirectData.map(item =>
@@ -201,7 +200,7 @@ class BasicLayout extends React.PureComponent {
               <Redirect exact from="/" to={bashRedirect} />
               <Route render={NotFound} />
             </Switch>
-            </div>
+          </Content>
           <GlobalFooter
             links={[{
               key: 'Pro 首页',
@@ -225,7 +224,6 @@ class BasicLayout extends React.PureComponent {
               </div>
             }
           />
-          </Content>
         </Layout>
       </Layout>
     );

src/layouts/UserLayout.js

@@ -38,6 +38,7 @@ class UserLayout extends React.PureComponent {
     return (
       <DocumentTitle title={this.getPageTitle()}>
         <div className={styles.container}>
+          <div className={styles.content}>
             <div className={styles.top}>
               <div className={styles.header}>
                 <Link to="/">
@@ -60,7 +61,8 @@ class UserLayout extends React.PureComponent {
               )}
               <Redirect exact from="/user" to="/user/login" />
             </Switch>
-          <GlobalFooter className={styles.footer} links={links} copyright={copyright} />
+          </div>
+          <GlobalFooter links={links} copyright={copyright} />
         </div>
       </DocumentTitle>
     );

src/layouts/UserLayout.less

 @import "~antd/lib/style/themes/default.less";
 
 .container {
-  background: #f0f2f5;
-  background-image: url('https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg');
-  width: 100%;
+  display: flex;
+  flex-direction: column;
   min-height: 100%;
+}
+
+.content {
+  padding: 32px 0;
+  flex: 1;
+}
+
+@media (min-width: @screen-md-min) {
+  .container {
+    background-image: url('https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg');
     background-repeat: no-repeat;
-  background-position: center;
+    background-position: center 110px;
     background-size: 100%;
-  padding: 110px 0 144px 0;
-  position: relative;
+  }
+
+  .content {
+    padding: 112px 0 24px 0;
+  }
 }
 
 .top {
@@ -45,9 +57,3 @@
   margin-top: 12px;
   margin-bottom: 40px;
 }
-
-.footer {
-  position: absolute;
-  width: 100%;
-  bottom: 0;
-}