move background on login page to correct position on large screens (a…

…nt-design#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
kexbar · Jan 17, 2018 · d81f5b6 · d81f5b6
1 parent 03e3a2d
commit d81f5b6
Show file tree

Hide file tree

Showing 6 changed files with 93 additions and 85 deletions.
diff --git a/src/components/Login/index.js b/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 ? (

diff --git a/src/components/Login/index.less b/src/components/Login/index.less
@@ -1,8 +1,6 @@
 @import "~antd/lib/style/themes/default.less";
 
-.main {
-  width: 368px;
-  margin: 0 auto;
+.login {
 
   .tabs {
     padding: 0 2px;

diff --git a/src/index.less b/src/index.less
@@ -4,6 +4,10 @@ body,
   height: 100%;
 }
 
+:global(.ant-layout) {
+  min-height: 100%;
+}
+
 canvas {
   display: block;
 }

diff --git a/src/layouts/BasicLayout.js b/src/layouts/BasicLayout.js
@@ -177,55 +177,53 @@ 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 =>
-                    <Redirect key={item.from} exact from={item.from} to={item.to} />
-                  )
-                }
-                {
-                  getRoutes(match.path, routerData).map(item =>
-                    (
-                      <AuthorizedRoute
-                        key={item.key}
-                        path={item.path}
-                        component={item.component}
-                        exact={item.exact}
-                        authority={item.authority}
-                        redirectPath="/exception/403"
-                      />
-                    )
+            <Switch>
+              {
+                redirectData.map(item =>
+                  <Redirect key={item.from} exact from={item.from} to={item.to} />
+                )
+              }
+              {
+                getRoutes(match.path, routerData).map(item =>
+                  (
+                    <AuthorizedRoute
+                      key={item.key}
+                      path={item.path}
+                      component={item.component}
+                      exact={item.exact}
+                      authority={item.authority}
+                      redirectPath="/exception/403"
+                    />
                   )
-                }
-                <Redirect exact from="/" to={bashRedirect} />
-                <Route render={NotFound} />
-              </Switch>
-            </div>
-            <GlobalFooter
-              links={[{
-                key: 'Pro 首页',
-                title: 'Pro 首页',
-                href: 'http://pro.ant.design',
-                blankTarget: true,
-              }, {
-                key: 'github',
-                title: <Icon type="github" />,
-                href: 'https://github.com/ant-design/ant-design-pro',
-                blankTarget: true,
-              }, {
-                key: 'Ant Design',
-                title: 'Ant Design',
-                href: 'http://ant.design',
-                blankTarget: true,
-              }]}
-              copyright={
-                <div>
-                  Copyright <Icon type="copyright" /> 2018 蚂蚁金服体验技术部出品
-                </div>
+                )
               }
-            />
+              <Redirect exact from="/" to={bashRedirect} />
+              <Route render={NotFound} />
+            </Switch>
           </Content>
+          <GlobalFooter
+            links={[{
+              key: 'Pro 首页',
+              title: 'Pro 首页',
+              href: 'http://pro.ant.design',
+              blankTarget: true,
+            }, {
+              key: 'github',
+              title: <Icon type="github" />,
+              href: 'https://github.com/ant-design/ant-design-pro',
+              blankTarget: true,
+            }, {
+              key: 'Ant Design',
+              title: 'Ant Design',
+              href: 'http://ant.design',
+              blankTarget: true,
+            }]}
+            copyright={
+              <div>
+                Copyright <Icon type="copyright" /> 2018 蚂蚁金服体验技术部出品
+              </div>
+            }
+          />
         </Layout>
       </Layout>
     );

diff --git a/src/layouts/UserLayout.js b/src/layouts/UserLayout.js
@@ -38,29 +38,31 @@ class UserLayout extends React.PureComponent {
     return (
       <DocumentTitle title={this.getPageTitle()}>
         <div className={styles.container}>
-          <div className={styles.top}>
-            <div className={styles.header}>
-              <Link to="/">
-                <img alt="logo" className={styles.logo} src={logo} />
-                <span className={styles.title}>Ant Design</span>
-              </Link>
+          <div className={styles.content}>
+            <div className={styles.top}>
+              <div className={styles.header}>
+                <Link to="/">
+                  <img alt="logo" className={styles.logo} src={logo} />
+                  <span className={styles.title}>Ant Design</span>
+                </Link>
+              </div>
+              <div className={styles.desc}>Ant Design 是西湖区最具影响力的 Web 设计规范</div>
             </div>
-            <div className={styles.desc}>Ant Design 是西湖区最具影响力的 Web 设计规范</div>
+            <Switch>
+              {getRoutes(match.path, routerData).map(item =>
+                (
+                  <Route
+                    key={item.key}
+                    path={item.path}
+                    component={item.component}
+                    exact={item.exact}
+                  />
+                )
+              )}
+              <Redirect exact from="/user" to="/user/login" />
+            </Switch>
           </div>
-          <Switch>
-            {getRoutes(match.path, routerData).map(item =>
-              (
-                <Route
-                  key={item.key}
-                  path={item.path}
-                  component={item.component}
-                  exact={item.exact}
-                />
-              )
-            )}
-            <Redirect exact from="/user" to="/user/login" />
-          </Switch>
-          <GlobalFooter className={styles.footer} links={links} copyright={copyright} />
+          <GlobalFooter links={links} copyright={copyright} />
         </div>
       </DocumentTitle>
     );

diff --git a/src/layouts/UserLayout.less b/src/layouts/UserLayout.less
@@ -1,15 +1,27 @@
 @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%;
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: 100%;
-  padding: 110px 0 144px 0;
-  position: relative;
+}
+
+.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 110px;
+    background-size: 100%;
+  }
+
+  .content {
+    padding: 112px 0 24px 0;
+  }
 }
 
 .top {
@@ -45,9 +57,3 @@
   margin-top: 12px;
   margin-bottom: 40px;
 }
-
-.footer {
-  position: absolute;
-  width: 100%;
-  bottom: 0;
-}