embarklabs
/
embark
mirror of https://github.com/embarklabs/embark.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat(components/LoginLayout): introduce new layout for login view

This commit is contained in:
Pascal Precht 2018-10-10 16:57:08 +02:00
parent ef2a88336b
commit cef60b56e8
No known key found for this signature in database
GPG Key ID: 0EE28D8D6FD85D7D
2 changed files with 72 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
embark-ui/src/components/LoginLayout.css Normal file
View File

@ -0,0 +1,54 @@
.login-layout {
display: flex;
align-items: center;
justify-content: center;
}
.login-layout-container {
width: 80%;
max-width: 900px;
display: flex;
flex-direction: column;
}
.login-layout-container-section {
flex: 1;
padding: 0.8em;
background: #20a8d8;
align-items: center;
justify-content: center;
order: 1;
}
.login-layout-container-section:first-child {
background: white;
padding: 3em;
order: 2;
}
.logo {
display: block;
margin: 0 auto;
max-height: 40px;
}
@media only screen and (min-width: 700px) {
.login-layout-container {
flex-direction: row;
}
.login-layout-container-section {
padding: 3em;
}
.login-layout-container-section:first-child {
order: 1;
}
.logo {
max-height: 180px;
margin-top: 3em;
}
}

18
embark-ui/src/components/LoginLayout.js Normal file
View File

@ -0,0 +1,18 @@
import React from 'react';
import logo from '../images/logo.png';
import './LoginLayout.css';
const LoginLayout = ({children}) => (
<div className="app login-layout">
<div className="login-layout-container">
<div className="login-layout-container-section">
{children}
</div>
<div className="login-layout-container-section">
<img src={logo} className="logo" alt="Embark Logo"/>
</div>
</div>
</div>
);
export default LoginLayout;