Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs(Layouts): fix vertical alignment on LoginPage #3623

Merged
merged 2 commits into from
May 26, 2019
Merged

docs(Layouts): fix vertical alignment on LoginPage #3623

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6994892
login page vertical alignment issue fixed #3620
ashvini-maurya May 25, 2019
7531127
Update LoginLayout.js
layershifter May 26, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 25 additions & 40 deletions docs/src/layouts/LoginLayout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,47 +2,32 @@ import React from 'react'
import { Button, Form, Grid, Header, Image, Message, Segment } from 'semantic-ui-react'

const LoginForm = () => (
<div className='login-form'>
{/*
Heads up! The styles below are necessary for the correct render of this example.
You can do same with CSS, the main idea is that all the elements up to the `Grid`
below must have a height of 100%.
*/}
<style>{`
body > div,
body > div > div,
body > div > div > div.login-form {
height: 100%;
}
`}
</style>
<Grid textAlign='center' style={{ height: '100%' }} verticalAlign='middle'>
<Grid.Column style={{ maxWidth: 450 }}>
<Header as='h2' color='teal' textAlign='center'>
<Image src='/logo.png' /> Log-in to your account
</Header>
<Form size='large'>
<Segment stacked>
<Form.Input fluid icon='user' iconPosition='left' placeholder='E-mail address' />
<Form.Input
fluid
icon='lock'
iconPosition='left'
placeholder='Password'
type='password'
/>
<Grid textAlign='center' style={{ height: '100vh' }} verticalAlign='middle'>
<Grid.Column style={{ maxWidth: 450 }}>
<Header as='h2' color='teal' textAlign='center'>
<Image src='/logo.png' /> Log-in to your account
</Header>
<Form size='large'>
<Segment stacked>
<Form.Input fluid icon='user' iconPosition='left' placeholder='E-mail address' />
<Form.Input
fluid
icon='lock'
iconPosition='left'
placeholder='Password'
type='password'
/>

<Button color='teal' fluid size='large'>
Login
</Button>
</Segment>
</Form>
<Message>
New to us? <a href='#'>Sign Up</a>
</Message>
</Grid.Column>
</Grid>
</div>
<Button color='teal' fluid size='large'>
Login
</Button>
</Segment>
</Form>
<Message>
New to us? <a href='#'>Sign Up</a>
</Message>
</Grid.Column>
</Grid>
)

export default LoginForm