maverick/flex-template-web
1
0
Fork 0
mirror of https://github.com/kingomarnajjar/flex-template-web.git synced 2026-07-31 02:26:50 +10:00
Code Issues Projects Releases Packages Wiki Activity Actions

Login and Signup desktop layouts.

Browse source
This commit is contained in:
Vesa Luusua 2017-07-19 16:21:45 +03:00
parent d52e210dc9
commit cae03cc892
3 changed files with 47 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/components/TabNav/TabNav.css
View file

@ -33,6 +33,7 @@
@media (--viewportMedium) {
margin-top: 0;
margin-bottom: 0;
padding-bottom: 7px;
}
}

40
src/containers/AuthenticationPage/AuthenticationPage.css
View file

@ -1,23 +1,61 @@
@import '../../marketplaceFonts.css';
@import '../../marketplace.css';
.root {
/* PageLayout is using flex: AuthenticationPage's .root takes all available space */
flex-grow: 1;
/* AuthenticationPage's root uses flexbox */
display: flex;
@media (--desktopViewport) {
justify-content: center;
align-items: flex-start;
margin-top: 12.5vh;
margin-bottom: 12.5vh;
}
}
.content {
flex-grow: 1;
display: flex;
flex-direction: column;
flex: 1;
padding: 30px 24px 98px 24px;
background-color: var(--matterColorLight);
@media (--desktopViewport) {
flex-basis: 480px;
flex-grow: 0;
min-height: 573px;
padding: 60px 60px 48px 60px;
}
}
.tabs {
width: 200px;
}
.tabH2 {
/* Text works as main Heading (H1), but text style is dropped to H2 */
@media (--desktopViewport) {
@apply --marketplaceH2FontStyles;
}
}
.tab {
/* Text works as main Heading (H1), but text style is dropped to H2 */
composes: tabH2;
margin-top: 0;
margin-bottom: 0;
}
.form {
margin-top: 49px;
@media (--desktopViewport) {
margin-top: 38px;
}
}
.error {

12
src/containers/AuthenticationPage/AuthenticationPage.js
View file

@ -131,11 +131,13 @@ export const AuthenticationPageComponent = props => {
onManageDisableScrolling={onManageDisableScrolling}
/>
<div className={css.root}>
<TabNav className={css.tabs} tabs={tabs} />
{loginOrSignupError}
{isLogin
? <LoginForm className={css.form} onSubmit={submitLogin} inProgress={authInProgress} />
: <SignupForm className={css.form} onSubmit={submitSignup} inProgress={authInProgress} />}
<div className={css.content}>
<TabNav className={css.tabs} tabs={tabs} />
{loginOrSignupError}
{isLogin
? <LoginForm className={css.form} onSubmit={submitLogin} inProgress={authInProgress} />
: <SignupForm className={css.form} onSubmit={submitSignup} inProgress={authInProgress} />}
</div>
</div>
</PageLayout>
);