Skip to content

GitLab

P
pro-blocks
You need to sign in or sign up before continuing.
Commit d81f5b62 authored by Andreas Cederström's avatar Andreas Cederström Committed by ddcat1115
Browse files
Options

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
parent 03e3a2dd
Hide whitespace changes
Inline Side-by-side
Showing with 93 additions and 85 deletions
src/components/Login/index.js
View file @ d81f5b62
......@@ -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
View file @ d81f5b62
@import "~antd/lib/style/themes/default.less";
.main {
width: 368px;
margin: 0 auto;
.login {
.tabs {
padding: 0 2px;
......
src/index.less
View file @ d81f5b62
......@@ -4,6 +4,10 @@ body,
height: 100%;
}
:global(.ant-layout) {
min-height: 100%;
}
canvas {
display: block;
}
......
src/layouts/BasicLayout.js
View file @ d81f5b62
......@@ -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>
);
......
src/layouts/UserLayout.js
View file @ d81f5b62
......@@ -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>
);
......
src/layouts/UserLayout.less
View file @ d81f5b62
@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;
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment