fix layout issues at login page
new stucture: .fullscreen > .fullscreen-center > .fullscreen-content
This commit is contained in:
Felix Niklas
parent
d7dd63ae4a
commit
61a791e837
4 changed files with 129 additions and 87 deletions
|
|
@ -1,59 +1,60 @@
|
|||
<div class="login">
|
||||
<div class="flex vertical centered">
|
||||
<p><%- @T( 'Login with %s', @C( 'fqdn' ) ) %></p>
|
||||
<div class="login fullscreen">
|
||||
<div class="fullscreen-center">
|
||||
<div class="fullscreen-body">
|
||||
<p><%- @T( 'Login with %s', @C( 'fqdn' ) ) %></p>
|
||||
|
||||
<div class="hero-unit">
|
||||
<img class="company-logo" src="<%= @logoUrl %>" alt="<%= @C( 'product_name' ) %>">
|
||||
<form id="login">
|
||||
<div class="form-group">
|
||||
<label for="username"><%- @Ti( 'Username / email' ) %></label>
|
||||
<input id="username" name="username" type="text" class="form-control" value="<%= @item.username %>" autocapitalize="off" />
|
||||
</div>
|
||||
<div class="hero-unit">
|
||||
<img class="company-logo" src="<%= @logoUrl %>" alt="<%= @C( 'product_name' ) %>">
|
||||
<form id="login">
|
||||
<div class="form-group">
|
||||
<label for="username"><%- @Ti( 'Username / email' ) %></label>
|
||||
<input id="username" name="username" type="text" class="form-control" value="<%= @item.username %>" autocapitalize="off" />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="password"><%- @Ti( 'Password' ) %></label>
|
||||
<input id="password" name="password" type="password" class="form-control"/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="password"><%- @Ti( 'Password' ) %></label>
|
||||
<input id="password" name="password" type="password" class="form-control"/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<!--
|
||||
<label for="remember_me"><%- @Ti( 'Remember me' ) %></label>
|
||||
<input id="remember_me" name="remember_me" value="1" type="checkbox"/>
|
||||
-->
|
||||
<label><input name="remember_me" value="1" type="checkbox"/> <%- @T( 'Remember me' ) %></label>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<!--
|
||||
<label for="remember_me"><%- @Ti( 'Remember me' ) %></label>
|
||||
<input id="remember_me" name="remember_me" value="1" type="checkbox"/>
|
||||
-->
|
||||
<label><input name="remember_me" value="1" type="checkbox"/> <%- @T( 'Remember me' ) %></label>
|
||||
</div>
|
||||
|
||||
<div class="form-controls">
|
||||
<button class="btn btn--primary" type="submit"><%- @T( 'Sign in' ) %></button>
|
||||
<div class="form-controls">
|
||||
<button class="btn btn--primary" type="submit"><%- @T( 'Sign in' ) %></button>
|
||||
|
||||
<% if @C('user_lost_password'): %>
|
||||
<a href="#reset_password" class="subtle-link standalone pull-right"><%- @T( 'Forgot password?' ) %></a>
|
||||
<% if @C('user_lost_password'): %>
|
||||
<a href="#reset_password" class="subtle-link standalone pull-right"><%- @T( 'Forgot password?' ) %></a>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<% if !_.isEmpty( @auth_providers ): %>
|
||||
<div class="separator">
|
||||
<span class="separator-text"><%- @T( 'or sign in using' ) %></span>
|
||||
</div>
|
||||
|
||||
<div class="auth_providers horizontal stretch">
|
||||
<% for auth_provider in @auth_providers: %>
|
||||
<a class="auth_provider <%= auth_provider.class %>" href="<%= auth_provider.url %>">
|
||||
<span class="<%= auth_provider.class %> provider_icon"></span>
|
||||
<span class="provider_name flex"><%- @T( auth_provider.name ) %></span>
|
||||
</a>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<% if !_.isEmpty( @auth_providers ): %>
|
||||
<div class="separator">
|
||||
<span class="separator-text"><%- @T( 'or sign in using' ) %></span>
|
||||
</div>
|
||||
|
||||
<div class="auth_providers horizontal stretch">
|
||||
<% for auth_provider in @auth_providers: %>
|
||||
<a class="auth_provider <%= auth_provider.class %>" href="<%= auth_provider.url %>">
|
||||
<span class="<%= auth_provider.class %> provider_icon"></span>
|
||||
<span class="provider_name flex"><%- @T( auth_provider.name ) %></span>
|
||||
</a>
|
||||
<% end %>
|
||||
</div>
|
||||
<p>
|
||||
<%- @T( "You're already registered with your email adress if you've been in touch with our support team.") %><br>
|
||||
<% if @C('user_lost_password'): %>
|
||||
<%- @T( "You can request your password") %> <a href="#reset_password"><%- @T( "here") %></a>.
|
||||
<% end %>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
<%- @T( "You're already registered with your email adress if you've been in touch with our support team.") %><br>
|
||||
<% if @C('user_lost_password'): %>
|
||||
<%- @T( "You can request your password") %> <a href="#reset_password"><%- @T( "here") %></a>.
|
||||
<% end %>
|
||||
</p>
|
||||
</p>
|
||||
|
||||
<% if @C('user_create_account'): %>
|
||||
<hr>
|
||||
|
|
@ -61,8 +62,8 @@
|
|||
<a href="#signup"><%- @T( 'Register as a new customer' ) %></a>
|
||||
</p>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="poweredBy">
|
||||
<img class="logo" src="<%= @C('image_path') + '/' + 'logo.svg' %>">
|
||||
<%- @T("Powered by") %>
|
||||
|
|
|
|||
|
|
@ -1,18 +1,20 @@
|
|||
<div class="fullHeight vertical center justified reset_password fit">
|
||||
<div class="hero-unit">
|
||||
<% if @sent: %>
|
||||
<h2><%- @T('We\'ve sent password reset instructions to your email address.') %><small></small></h2>
|
||||
<p><%- @T('If you don\'t receive instructions within a minute or two, check your email\'s spam and junk filters, or try resending your request.') %></p>
|
||||
<a href="#" class="subtle retry">» <%- @T('again') %> «</a>
|
||||
<% else: %>
|
||||
<h2><%- @T( 'Forgot your password?' ) %><small></small></h2>
|
||||
<form class="form-password">
|
||||
<div class="form-password-item"></div>
|
||||
<div class="form-controls">
|
||||
<a class="subtle-link standalone pull-left cancel" href="#/"><%- @T( 'Cancel & Go Back' ) %></a>
|
||||
<button class="btn btn--primary submit pull-right"><%- @T( 'Submit' ) %></button>
|
||||
</div>
|
||||
</form>
|
||||
<% end %>
|
||||
<div class="reset_password fullscreen">
|
||||
<div class="fullscreen-center">
|
||||
<div class="hero-unit fullscreen-body">
|
||||
<% if @sent: %>
|
||||
<h2><%- @T('We\'ve sent password reset instructions to your email address.') %><small></small></h2>
|
||||
<p><%- @T('If you don\'t receive instructions within a minute or two, check your email\'s spam and junk filters, or try resending your request.') %></p>
|
||||
<a href="#" class="subtle retry">» <%- @T('again') %> «</a>
|
||||
<% else: %>
|
||||
<h2><%- @T( 'Forgot your password?' ) %><small></small></h2>
|
||||
<form class="form-password">
|
||||
<div class="form-password-item"></div>
|
||||
<div class="form-controls">
|
||||
<a class="subtle-link standalone pull-left cancel" href="#/"><%- @T( 'Cancel & Go Back' ) %></a>
|
||||
<button class="btn btn--primary submit pull-right"><%- @T( 'Submit' ) %></button>
|
||||
</div>
|
||||
</form>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,13 @@
|
|||
<div class="fullHeight vertical center justified signup fit">
|
||||
<div class="hero-unit">
|
||||
<h1><%- @T( 'Join' ) %> <%= @C( 'product_name' ) %></h1>
|
||||
<div class="signup fullscreen">
|
||||
<div class="fullscreen-center">
|
||||
<div class="hero-unit fullscreen-body">
|
||||
<h1><%- @T( 'Join' ) %> <%= @C( 'product_name' ) %></h1>
|
||||
<form>
|
||||
<div class="form-controls">
|
||||
<a class="subtle-link standalone pull-left" href="#/"><%- @T( 'Cancel & Go Back' ) %></a>
|
||||
<button class="btn btn--primary submit pull-right"><%- @T( 'Create my account' ) %></button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -822,13 +822,12 @@ textarea,
|
|||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.login,
|
||||
.getstarted,
|
||||
.reset_password,
|
||||
.signup,
|
||||
.darkBackground {
|
||||
.darkBackground,
|
||||
.login {
|
||||
padding: 10px;
|
||||
height: auto;
|
||||
background: hsl(234,10%,19%);
|
||||
}
|
||||
|
||||
|
|
@ -841,13 +840,37 @@ textarea,
|
|||
}
|
||||
|
||||
.login {
|
||||
@extend .fit;
|
||||
@extend .vertical;
|
||||
@extend .center;
|
||||
padding: 24px 24px 97px;
|
||||
color: hsl(212,8%,40%);
|
||||
|
||||
a {
|
||||
color: hsl(229,2%,51%);
|
||||
}
|
||||
|
||||
&.login--fancy {
|
||||
color: hsla(0,0%,100%,.7);
|
||||
background:
|
||||
radial-gradient(circle at 49.06% 50.5%, #a36f71, transparent 74%),
|
||||
radial-gradient(circle at 6.95% 9.56%, #745479, transparent 100%),
|
||||
radial-gradient(circle at 2.58% 98.57%, #392e3e, transparent 51%),
|
||||
radial-gradient(circle at 82.11% 97.15%, #5c404e, transparent 100%),
|
||||
radial-gradient(circle at 50% 50%, #8b6b76, #8b6b76 100%);
|
||||
|
||||
a {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.hero-unit {
|
||||
box-shadow:
|
||||
0 8px 17px 0 rgba(0, 0, 0, 0.1),
|
||||
0 6px 20px 0 rgba(0, 0, 0, 0.09);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login .hero-unit {
|
||||
width: 430px;
|
||||
margin: 0 0 28px;
|
||||
}
|
||||
|
||||
.login .company-logo {
|
||||
|
|
@ -858,32 +881,31 @@ textarea,
|
|||
}
|
||||
|
||||
.login p {
|
||||
margin: 10px 0;
|
||||
margin: 0 auto 22px;
|
||||
max-width: 400px;
|
||||
color: hsl(212,8%,40%);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.login hr {
|
||||
margin: 10px 0;
|
||||
margin: 0 auto 22px;
|
||||
border-top-color: rgba(255,255,255,.15);
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.login p a {
|
||||
color: hsl(229,2%,51%);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.poweredBy {
|
||||
@extend .horizontal;
|
||||
@extend .center;
|
||||
@extend .centered;
|
||||
color: hsl(233,7%,26%);
|
||||
padding: 20px 0 10px;
|
||||
margin-top: auto;
|
||||
margin-left: -14px;
|
||||
margin: auto 0 34px -16px;
|
||||
cursor: default;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
.logo {
|
||||
height: 40px;
|
||||
|
|
@ -897,6 +919,24 @@ textarea,
|
|||
}
|
||||
}
|
||||
|
||||
.fullscreen {
|
||||
@extend .fit;
|
||||
display: table;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.fullscreen-center {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.fullscreen-body {
|
||||
text-align: left;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.subtle-link {
|
||||
color: rgba(0,0,0,.32);
|
||||
text-decoration: underline;
|
||||
|
|
@ -1720,6 +1760,7 @@ form {
|
|||
}
|
||||
|
||||
.form-controls {
|
||||
@extend .clearfix;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
|
|
@ -4801,10 +4842,6 @@ label + .wizard-buttonList {
|
|||
flex: 1;
|
||||
}
|
||||
|
||||
.fullHeight {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.relative {
|
||||
position: relative;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue