Sutty/trabajo-afectivo
5
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

fix layout issues at login page

Browse source 
new stucture:
  .fullscreen > .fullscreen-center > .fullscreen-content
This commit is contained in:
Felix Niklas 2014-12-18 12:25:49 +01:00
parent d7dd63ae4a
commit 61a791e837
4 changed files with 129 additions and 87 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

99
app/assets/javascripts/app/views/login.jst.eco
View file

@ -1,59 +1,60 @@
<div class="login"> <div class="login fullscreen">
<div class="flex vertical centered"> <div class="fullscreen-center">
<p><%- @T( 'Login with %s', @C( 'fqdn' ) ) %></p> <div class="fullscreen-body">
<p><%- @T( 'Login with %s', @C( 'fqdn' ) ) %></p>
<div class="hero-unit"> <div class="hero-unit">
<img class="company-logo" src="<%= @logoUrl %>" alt="<%= @C( 'product_name' ) %>"> <img class="company-logo" src="<%= @logoUrl %>" alt="<%= @C( 'product_name' ) %>">
<form id="login"> <form id="login">
<div class="form-group"> <div class="form-group">
<label for="username"><%- @Ti( 'Username / email' ) %></label> <label for="username"><%- @Ti( 'Username / email' ) %></label>
<input id="username" name="username" type="text" class="form-control" value="<%= @item.username %>" autocapitalize="off" /> <input id="username" name="username" type="text" class="form-control" value="<%= @item.username %>" autocapitalize="off" />
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="password"><%- @Ti( 'Password' ) %></label> <label for="password"><%- @Ti( 'Password' ) %></label>
<input id="password" name="password" type="password" class="form-control"/> <input id="password" name="password" type="password" class="form-control"/>
</div> </div>
<div class="form-group"> <div class="form-group">
<!-- <!--
<label for="remember_me"><%- @Ti( 'Remember me' ) %></label> <label for="remember_me"><%- @Ti( 'Remember me' ) %></label>
<input id="remember_me" name="remember_me" value="1" type="checkbox"/> <input id="remember_me" name="remember_me" value="1" type="checkbox"/>
--> -->
<label><input name="remember_me" value="1" type="checkbox"/> <%- @T( 'Remember me' ) %></label> <label><input name="remember_me" value="1" type="checkbox"/> <%- @T( 'Remember me' ) %></label>
</div> </div>
<div class="form-controls"> <div class="form-controls">
<button class="btn btn--primary" type="submit"><%- @T( 'Sign in' ) %></button> <button class="btn btn--primary" type="submit"><%- @T( 'Sign in' ) %></button>
<% if @C('user_lost_password'): %> <% if @C('user_lost_password'): %>
<a href="#reset_password" class="subtle-link standalone pull-right"><%- @T( 'Forgot password?' ) %></a> <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 %> <% end %>
</div> </form>
</div>
<% if !_.isEmpty( @auth_providers ): %> <p>
<div class="separator"> <%- @T( "You're already registered with your email adress if you've been in touch with our support team.") %><br>
<span class="separator-text"><%- @T( 'or sign in using' ) %></span> <% if @C('user_lost_password'): %>
</div> <%- @T( "You can request your password") %> <a href="#reset_password"><%- @T( "here") %></a>.
<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 %> <% end %>
</form> </p>
</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>
<% if @C('user_create_account'): %> <% if @C('user_create_account'): %>
<hr> <hr>
@ -61,8 +62,8 @@
<a href="#signup"><%- @T( 'Register as a new customer' ) %></a> <a href="#signup"><%- @T( 'Register as a new customer' ) %></a>
</p> </p>
<% end %> <% end %>
</div>
</div> </div>
<div class="poweredBy"> <div class="poweredBy">
<img class="logo" src="<%= @C('image_path') + '/' + 'logo.svg' %>"> <img class="logo" src="<%= @C('image_path') + '/' + 'logo.svg' %>">
<%- @T("Powered by") %> <%- @T("Powered by") %>

34
app/assets/javascripts/app/views/password/reset.jst.eco
View file

@ -1,18 +1,20 @@
<div class="fullHeight vertical center justified reset_password fit"> <div class="reset_password fullscreen">
<div class="hero-unit"> <div class="fullscreen-center">
<% if @sent: %> <div class="hero-unit fullscreen-body">
<h2><%- @T('We\'ve sent password reset instructions to your email address.') %><small></small></h2> <% if @sent: %>
<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> <h2><%- @T('We\'ve sent password reset instructions to your email address.') %><small></small></h2>
<a href="#" class="subtle retry">&raquo; <%- @T('again') %> &laquo;</a> <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>
<% else: %> <a href="#" class="subtle retry">&raquo; <%- @T('again') %> &laquo;</a>
<h2><%- @T( 'Forgot your password?' ) %><small></small></h2> <% else: %>
<form class="form-password"> <h2><%- @T( 'Forgot your password?' ) %><small></small></h2>
<div class="form-password-item"></div> <form class="form-password">
<div class="form-controls"> <div class="form-password-item"></div>
<a class="subtle-link standalone pull-left cancel" href="#/"><%- @T( 'Cancel & Go Back' ) %></a> <div class="form-controls">
<button class="btn btn--primary submit pull-right"><%- @T( 'Submit' ) %></button> <a class="subtle-link standalone pull-left cancel" href="#/"><%- @T( 'Cancel & Go Back' ) %></a>
</div> <button class="btn btn--primary submit pull-right"><%- @T( 'Submit' ) %></button>
</form> </div>
<% end %> </form>
<% end %>
</div>
</div> </div>
</div> </div>

8
app/assets/javascripts/app/views/signup.jst.eco
View file

@ -1,11 +1,13 @@
<div class="fullHeight vertical center justified signup fit"> <div class="signup fullscreen">
<div class="hero-unit"> <div class="fullscreen-center">
<h1><%- @T( 'Join' ) %> <%= @C( 'product_name' ) %></h1> <div class="hero-unit fullscreen-body">
<h1><%- @T( 'Join' ) %> <%= @C( 'product_name' ) %></h1>
<form> <form>
<div class="form-controls"> <div class="form-controls">
<a class="subtle-link standalone pull-left" href="#/"><%- @T( 'Cancel & Go Back' ) %></a> <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> <button class="btn btn--primary submit pull-right"><%- @T( 'Create my account' ) %></button>
</div> </div>
</form> </form>
</div>
</div> </div>
</div> </div>

75
app/assets/stylesheets/zammad.css.scss
View file

@ -822,13 +822,12 @@ textarea,
margin-bottom: 5px; margin-bottom: 5px;
} }
.login,
.getstarted, .getstarted,
.reset_password, .reset_password,
.signup, .signup,
.darkBackground { .darkBackground,
.login {
padding: 10px; padding: 10px;
height: auto;
background: hsl(234,10%,19%); background: hsl(234,10%,19%);
} }
@ -841,13 +840,37 @@ textarea,
} }
.login { .login {
@extend .fit; padding: 24px 24px 97px;
@extend .vertical; color: hsl(212,8%,40%);
@extend .center;
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 { .login .hero-unit {
width: 430px; width: 430px;
margin: 0 0 28px;
} }
.login .company-logo { .login .company-logo {
@ -858,32 +881,31 @@ textarea,
} }
.login p { .login p {
margin: 10px 0; margin: 0 auto 22px;
max-width: 400px; max-width: 400px;
color: hsl(212,8%,40%);
text-align: center; text-align: center;
} }
.login hr { .login hr {
margin: 10px 0; margin: 0 auto 22px;
border-top-color: rgba(255,255,255,.15); border-top-color: rgba(255,255,255,.15);
width: 100%; width: 100%;
max-width: 400px; max-width: 400px;
} }
.login p a { .login p a {
color: hsl(229,2%,51%);
text-decoration: underline; text-decoration: underline;
} }
.poweredBy { .poweredBy {
@extend .horizontal; @extend .centered;
@extend .center;
color: hsl(233,7%,26%); color: hsl(233,7%,26%);
padding: 20px 0 10px; margin: auto 0 34px -16px;
margin-top: auto;
margin-left: -14px;
cursor: default; cursor: default;
position: absolute;
bottom: 0;
left: 0;
right: 0;
.logo { .logo {
height: 40px; 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 { .subtle-link {
color: rgba(0,0,0,.32); color: rgba(0,0,0,.32);
text-decoration: underline; text-decoration: underline;
@ -1720,6 +1760,7 @@ form {
} }
.form-controls { .form-controls {
@extend .clearfix;
margin-top: 10px; margin-top: 10px;
} }
@ -4801,10 +4842,6 @@ label + .wizard-buttonList {
flex: 1; flex: 1;
} }
.fullHeight {
min-height: 100%;
}
.relative { .relative {
position: relative; position: relative;
} }