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

style login, signup and getting_started

Browse source
This commit is contained in:
Felix Niklas 2014-07-04 12:20:39 +02:00
parent 1f578fbef0
commit 5df05d7b5d
8 changed files with 172 additions and 88 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/assets/javascripts/app/controllers/getting_started.js.coffee
View file

@ -1,5 +1,5 @@
class Index extends App.ControllerContent
className: 'getstarted fit vertical center justified'
className: 'getstarted fit'
events:
'submit form': 'submit',
@ -144,6 +144,8 @@ class Index extends App.ControllerContent
@el.find('.master_user').addClass('hide')
@el.find('.agent_user').removeClass('hide')
@el.find('.tabs .tab.active').removeClass('active')
@el.find('.tabs .invite_agents').addClass('active')
# @el.find('.master_user').fadeOut('slow', =>
# @el.find('.agent_user').fadeIn()
# )

4
app/assets/javascripts/app/controllers/login.js.coffee
View file

@ -1,5 +1,5 @@
class Index extends App.ControllerContent
className: 'login fit vertical center justified'
className: 'login fit'
events:
'submit #login': 'login'
@ -113,7 +113,7 @@ class Index extends App.ControllerContent
# login shake
@delay(
=> @shake( @el.find('#login') ),
=> @shake( @el.find('.hero-unit') ),
600
)

4
app/assets/javascripts/app/controllers/signup.js.coffee
View file

@ -1,5 +1,5 @@
class Index extends App.ControllerContent
className: 'container signup'
className: 'signup fit'
events:
'submit form': 'submit'
@ -30,7 +30,7 @@ class Index extends App.ControllerContent
@html App.view('signup')()
new App.ControllerForm(
el: @el.find('#form-signup')
el: @el.find('form')
model: App.User
required: 'signup'
autofocus: true

41
app/assets/javascripts/app/views/getting_started.jst.eco
View file

@ -1,22 +1,23 @@
<div class="hero-unit">
<h1><%- @T( 'Getting started!' ) %><small></small></h1>
<ol class="horizontal tabs progress-tabs tabs-condensed">
<li class="tab contain-text active"><%- @T( 'Create Admin' ) %></li>
<li class="tab contain-text"><%- @T( 'Invite Agents' ) %></li>
<li class="tab contain-text"><%- @T( 'Configure Channels' ) %></li>
</ol>
<% if @master_user: %>
<div class="master_user hero-left">
<h2><%- @T( 'Create Admin' ) %></h2>
<form class="form-stacked" id="form-master">
<button type="submit" class="btn btn-primary submit"><%- @T( 'Next...' ) %></button>
</form>
</div>
<% end %>
<div class="agent_user hero-left hide">
<h2><%- @T( 'Invite Agents' ) %></h2>
<form class="form-stacked" id="form-agent">
<button type="submit" class="btn btn-primary submit"><%- @T( 'Send invitation' ) %></button>
</form>
<div class="fullHeight vertical center justified">
<div class="hero-unit">
<ol class="horizontal tabs progress-tabs tabs-condensed">
<li class="create_admin tab contain-text active"><%- @T( 'Create Admin' ) %></li>
<li class="invite_agents tab contain-text"><%- @T( 'Invite Agents' ) %></li>
<li class="configure_channels tab contain-text"><%- @T( 'Configure Channels' ) %></li>
</ol>
<% if @master_user: %>
<div class="master_user hero-left">
<form class="form-stacked clearfix" id="form-master">
<button type="submit" class="btn btn-primary submit pull-right"><%- @T( 'Next Step' ) %></button>
</form>
</div>
<% end %>
<div class="agent_user hero-left hide">
<form class="form-stacked clearfix" id="form-agent">
<div class="form-controls">
<button type="submit" class="btn btn-primary submit pull-right"><%- @T( 'Send Invitation' ) %></button>
</div>
</form>
</div>
</div>
</div>

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

@ -1,46 +1,56 @@
<p>Login with zeughaus.znuny.com:</p> <!-- how do you pass @T a parameter? @T( 'Login with %s', zeughaus.znuny.com )? -->
<div class="fullHeight vertical center justified">
<p>Login with zeughaus.znuny.com:</p> <!-- how do you pass @T a parameter? @T( 'Login with %s', zeughaus.znuny.com )? -->
<div class="hero-unit">
<form id="login">
<label for="username"><%- @Ti( 'Username / email' ) %></label>
<input id="username" name="username" type="text" class="form-control" value="<%= @item.username %>" autocapitalize="off" />
<div class="hero-unit">
<img class="logo" src="http://znuny.com/assets/logo_small.png" 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>
<label for="password"><%- @Ti( 'Password' ) %></label>
<input id="password" name="password" type="password" class="form-control"/>
<div class="form-group">
<label for="password"><%- @Ti( 'Password' ) %></label>
<input id="password" name="password" type="password" class="form-control"/>
</div>
<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>
<div>
<% if @C('user_lost_password'): %>
<span class="small">&middot;</span>
<a href="#reset_password" class="small"><%- @T( 'Forgot password?' ) %></a>
<% end %>
<% if @C('user_lost_password'): %>
<a href="#reset_password" class="subtle-link standalone pull-right"><%- @T( 'Forgot password?' ) %></a>
<% end %>
</div>
</form>
</div>
<p>
<%- @T( "You're already registered with your E-Mail adress if you've been in touch with our support team.") %><br>
<%- @T( "You can request your password") %> <a href="#"><%- @T( "here") %></a>.
</p>
<% if @C('user_create_account'): %>
<hr>
<p>
<a href="#signup"><%- @T( 'Register as a new customer' ) %></a>
</p>
<% end %>
<% if !_.isEmpty( @auth_providers ): %>
<hr>
<div class="col-12">
<p>--- <%- @T( 'or' ) %> ---</p>
</div>
</form>
<div class="col-12">
<p><%- @T( 'Sign in using' ) %></p>
<ul>
<% for auth_provider in @auth_providers: %>
<li><a href="<%= auth_provider.url %>"><%- @T( auth_provider.name ) %></a></li>
<% end %>
</ul>
</div>
<% end %>
</div>
<% if !_.isEmpty( @auth_providers ): %>
<div class="col-12">
<p>--- <%- @T( 'or' ) %> ---</p>
</div>
<div class="col-12">
<p><%- @T( 'Sign in using' ) %></p>
<ul>
<% for auth_provider in @auth_providers: %>
<li><a href="<%= auth_provider.url %>"><%- @T( auth_provider.name ) %></a></li>
<% end %>
</ul>
</div>
<% end %>
<% if @C('user_create_account'): %>
<div class="col-12">
<p>--- <%- @T( 'or' ) %> ---</p>
</div>
<div class="col-12">
<p><%- @T( 'New to %s join today!', @C( 'product_name' ) ) %></p>
<p><a href="#signup" class="btn btn-default"><%- @T( 'Sign up' ) %></a>
</div>
<% end %>

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

@ -1,8 +1,11 @@
<div class="hero-unit">
<h1><%- @T( 'Join' ) %> <%= @C( 'product_name' ) %><small></small></h1>
<form class="form-group form-normal">
<p id="form-signup"></p>
<a href="#/" class="btn btn-default cancel"><%- @T( 'Cancel' ) %></a>
<button class="btn btn-primary submit"><%- @T( 'Create my account' ) %></button>
</form>
<div class="fullHeight vertical center justified">
<div class="hero-unit">
<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>

4
app/assets/stylesheets/layout.css
View file

@ -38,6 +38,10 @@
flex-direction: column-reverse;
}
.fullHeight {
min-height: 100%;
}
.relative {
position: relative;
}

96
app/assets/stylesheets/zzz.css
View file

@ -1,3 +1,13 @@
body {
font-family: "FiraSansOT", "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 1.7;
}
#app > nav {
position: relative;
z-index: 1;
}
.glyphicon {
font-size: 13px;
}
@ -404,7 +414,7 @@ label {
font-size: 12px;
font-weight: normal;
letter-spacing: 0.1em;
padding-left: 2px;
padding: 0 2px;
}
.form-group .help-message {
@ -434,6 +444,8 @@ label {
.help-inline {
color: red;
padding: 0 2px;
font-size: 13px;
}
.content {
@ -443,6 +455,7 @@ label {
.content.fit {
background: #2c2d36;
z-index: 1;
}
.form-large {
@ -479,10 +492,16 @@ label {
margin-bottom: 4px;
}
/* to show checkboxes below in getting_started */
.form-stacked .form-group .checkbox label {
display: block
.form-stacked .checkbox label {
color: inherit;
font-size: 13px;
text-transform: inherit;
vertical-align: baseline;
letter-spacing: inherit;
display: block;
}
/*
* bootstrap changes
*/
@ -555,28 +574,61 @@ label {
}
/*
*
* hero-unit (used on getstarted, login, signup)
*/
.hero-unit {
width: 500px;
padding: 3px 25px 23px;
margin: 10px 0 25px;
padding: 23px 25px;
border: 1px solid #e5f0f5;
color: inherit;
background-color: white;
border-radius: 6px;
box-shadow:
0 8px 17px 0 rgba(0, 0, 0, 0.2),
0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.hero-unit p {
font-size: 16px;
line-height: 22px;
.hero-unit h1 {
margin-top: 0;
}
.login .hero-unit {
width: 430px;
}
.hero-unit .small {
font-size: 12px;
line-height: 20px;
color: #999999;
}
.login .logo {
margin: 30px auto;
display: block;
}
.login p {
max-width: 400px;
color: hsl(210,8%,42%);
text-align: center;
}
.login hr {
margin: 12px 0 23px;
border-top-color: rgba(255,255,255,.15);
width: 100%;
max-width: 400px;
}
.login p a {
color: hsl(210,8%,54%);
text-decoration: underline;
}
.subtle-link {
color: rgba(0,0,0,.32);
text-decoration: underline;
}
.subtle-link:hover {
color: rgba(0,0,0,.5);
}
ol.tabs {
padding: 0;
@ -588,6 +640,7 @@ ol.tabs li {
}
.tabs {
margin-bottom: 20px;
color: #b8b8b8;
border: 1px solid rgba(0,8,14,.08);
border-radius: 3px;
@ -603,16 +656,19 @@ ol.tabs li {
}
.tab {
height: 43px;
padding: 10px;
text-align: center;
border-right: 1px solid rgba(0,8,14,.08);
cursor: pointer;
flex-grow: 1;
box-shadow: 0 2px rgba(0,0,0,.03);
}
.tab.active {
color: white;
background: #444a4f;
box-shadow: none;
}
.tab:first-child {
@ -624,7 +680,6 @@ ol.tabs li {
border-right: none;
}
.contain-text {
white-space: nowrap;
overflow: hidden;
@ -638,6 +693,15 @@ form {
margin: 0 0 0 0;
}
.form-controls {
margin-top: 10px;
}
form a.standalone {
line-height: 40px;
margin: 0 5px;
}
form.form-inline select,
form.form-inline input[type="text"],
form.form-inline input[type="password"] {
@ -1080,7 +1144,7 @@ footer {
.btn {
font-size: 14px;
padding: 10px 14px 9px;
padding: 9px 14px;
}
.btn-primary {