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 class Index extends App.ControllerContent
className: 'getstarted fit vertical center justified' className: 'getstarted fit'
events: events:
'submit form': 'submit', 'submit form': 'submit',
@ -144,6 +144,8 @@ class Index extends App.ControllerContent
@el.find('.master_user').addClass('hide') @el.find('.master_user').addClass('hide')
@el.find('.agent_user').removeClass('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('.master_user').fadeOut('slow', =>
# @el.find('.agent_user').fadeIn() # @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 class Index extends App.ControllerContent
className: 'login fit vertical center justified' className: 'login fit'
events: events:
'submit #login': 'login' 'submit #login': 'login'
@ -113,7 +113,7 @@ class Index extends App.ControllerContent
# login shake # login shake
@delay( @delay(
=> @shake( @el.find('#login') ), => @shake( @el.find('.hero-unit') ),
600 600
) )

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

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

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

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

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

@ -1,25 +1,45 @@
<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"> <div class="hero-unit">
<img class="logo" src="http://znuny.com/assets/logo_small.png" alt="<%= @C( 'product_name' ) %>">
<form id="login"> <form id="login">
<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 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 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>
<div>
<% if @C('user_lost_password'): %> <% if @C('user_lost_password'): %>
<span class="small">&middot;</span> <a href="#reset_password" class="subtle-link standalone pull-right"><%- @T( 'Forgot password?' ) %></a>
<a href="#reset_password" class="small"><%- @T( 'Forgot password?' ) %></a>
<% end %> <% end %>
</div> </div>
</form> </form>
</div> </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>
<% if !_.isEmpty( @auth_providers ): %>
<div class="col-12"> <div class="col-12">
<p>--- <%- @T( 'or' ) %> ---</p> <p>--- <%- @T( 'or' ) %> ---</p>
</div> </div>
@ -32,15 +52,5 @@
<% end %> <% end %>
</ul> </ul>
</div> </div>
<% end %> <% end %>
</div>
<% 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 %>

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

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

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

@ -38,6 +38,10 @@
flex-direction: column-reverse; flex-direction: column-reverse;
} }
.fullHeight {
min-height: 100%;
}
.relative { .relative {
position: 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 { .glyphicon {
font-size: 13px; font-size: 13px;
} }
@ -404,7 +414,7 @@ label {
font-size: 12px; font-size: 12px;
font-weight: normal; font-weight: normal;
letter-spacing: 0.1em; letter-spacing: 0.1em;
padding-left: 2px; padding: 0 2px;
} }
.form-group .help-message { .form-group .help-message {
@ -434,6 +444,8 @@ label {
.help-inline { .help-inline {
color: red; color: red;
padding: 0 2px;
font-size: 13px;
} }
.content { .content {
@ -443,6 +455,7 @@ label {
.content.fit { .content.fit {
background: #2c2d36; background: #2c2d36;
z-index: 1;
} }
.form-large { .form-large {
@ -479,10 +492,16 @@ label {
margin-bottom: 4px; margin-bottom: 4px;
} }
/* to show checkboxes below in getting_started */ .form-stacked .checkbox label {
.form-stacked .form-group .checkbox label { color: inherit;
display: block font-size: 13px;
text-transform: inherit;
vertical-align: baseline;
letter-spacing: inherit;
display: block;
} }
/* /*
* bootstrap changes * bootstrap changes
*/ */
@ -555,28 +574,61 @@ label {
} }
/* /*
* * hero-unit (used on getstarted, login, signup)
*/ */
.hero-unit { .hero-unit {
width: 500px; width: 500px;
padding: 3px 25px 23px; margin: 10px 0 25px;
padding: 23px 25px;
border: 1px solid #e5f0f5; border: 1px solid #e5f0f5;
color: inherit; color: inherit;
background-color: white; background-color: white;
border-radius: 6px; 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 { .hero-unit h1 {
font-size: 16px; margin-top: 0;
line-height: 22px; }
.login .hero-unit {
width: 430px;
} }
.hero-unit .small { .login .logo {
font-size: 12px; margin: 30px auto;
line-height: 20px; display: block;
color: #999999; }
}
.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 { ol.tabs {
padding: 0; padding: 0;
@ -588,6 +640,7 @@ ol.tabs li {
} }
.tabs { .tabs {
margin-bottom: 20px;
color: #b8b8b8; color: #b8b8b8;
border: 1px solid rgba(0,8,14,.08); border: 1px solid rgba(0,8,14,.08);
border-radius: 3px; border-radius: 3px;
@ -603,16 +656,19 @@ ol.tabs li {
} }
.tab { .tab {
height: 43px;
padding: 10px; padding: 10px;
text-align: center; text-align: center;
border-right: 1px solid rgba(0,8,14,.08); border-right: 1px solid rgba(0,8,14,.08);
cursor: pointer; cursor: pointer;
flex-grow: 1; flex-grow: 1;
box-shadow: 0 2px rgba(0,0,0,.03);
} }
.tab.active { .tab.active {
color: white; color: white;
background: #444a4f; background: #444a4f;
box-shadow: none;
} }
.tab:first-child { .tab:first-child {
@ -624,7 +680,6 @@ ol.tabs li {
border-right: none; border-right: none;
} }
.contain-text { .contain-text {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
@ -638,6 +693,15 @@ form {
margin: 0 0 0 0; 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 select,
form.form-inline input[type="text"], form.form-inline input[type="text"],
form.form-inline input[type="password"] { form.form-inline input[type="password"] {
@ -1080,7 +1144,7 @@ footer {
.btn { .btn {
font-size: 14px; font-size: 14px;
padding: 10px 14px 9px; padding: 9px 14px;
} }
.btn-primary { .btn-primary {