Revert "getting started + login CSS WIP"

This reverts commit 98d8d87232.
This commit is contained in:
Felix Niklas 2014-07-02 17:33:14 +02:00
parent 2d80ae6653
commit e034c4786e
10 changed files with 151 additions and 335 deletions

View file

@ -1,5 +1,5 @@
class Index extends App.ControllerContent class Index extends App.ControllerContent
className: 'getstarted fit vertical center justified' className: 'container getstarted'
events: events:
'submit form': 'submit', 'submit form': 'submit',

View file

@ -1,6 +1,4 @@
class Index extends App.ControllerContent class Index extends App.ControllerContent
className: 'login fit vertical center justified'
events: events:
'submit #login': 'login' 'submit #login': 'login'

View file

@ -1,22 +1,36 @@
<div class="hero-unit"> <div class="hero-unit">
<h1><%- @T( 'Getting started!' ) %><small></small></h1> <h1><%- @T( 'Getting started!' ) %><small></small></h1>
<ol class="horizontal tabs tabs-condensed"> <div class="container">
<li class="tab contain-text active"><%- @T( 'Create Admin' ) %></li> <div class="row">
<li class="tab contain-text"><%- @T( 'Invite Agents' ) %></li> <div class="span12">
<li class="tab contain-text"><%- @T( 'Configure Channels' ) %></li> <ol>
<li><%- @T( 'Create Admin' ) %></li>
<li><%- @T( 'Invite Agents' ) %></li>
<li><%- @T( 'Configure Channels' ) %></li>
</ol> </ol>
</div>
</div>
<div class="hero-two clearfix">
<% if @master_user: %> <% if @master_user: %>
<div class="master_user hero-left"> <div class="master_user hero-left">
<h2><%- @T( 'Create Admin' ) %></h2> <h2><%- @T( 'Create Admin' ) %></h2>
<form class="form-stacked" id="form-master"> <form class="form-stacked form-large" id="form-master">
<button type="submit" class="btn btn-primary submit"><%- @T( 'Next...' ) %></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> <h2><%- @T( 'Invite Agents' ) %></h2>
<form class="form-stacked" id="form-agent"> <form class="form-stacked form-large" id="form-agent">
<button type="submit" class="btn btn-primary submit"><%- @T( 'Send invitation' ) %></button> <button type="submit" class="btn btn-primary submit"><%- @T( 'Send invitation' ) %></button>
</form> </form>
</div> </div>
<div class="hero-right">
<h2><%- @T( 'Tour' ) %></h2>
<p>
<%- @T( 'Learn all about ...' ) %>
</p>
</div>
</div>
</div>
</div> </div>

View file

@ -1,25 +1,25 @@
<p>Login with zeughaus.znuny.com:</p> <!-- how do you pass @T a parameter? @T( 'Login with %s', zeughaus.znuny.com )? --> <div id="login">
<div class="hero-unit"> <div class="hero-unit">
<form id="login"> <h1><%- @T( 'Welcome stranger!' ) %></h1>
<label for="username"><%- @Ti( 'Username / email' ) %></label>
<input id="username" name="username" type="text" class="form-control" value="<%= @item.username %>" autocapitalize="off" />
<label for="password"><%- @Ti( 'Password' ) %></label>
<input id="password" name="password" type="password" class="form-control"/>
<div class="col-12">
<p><%- @T( 'Sign in with' ) %></p>
<form id="login" class="form-inline">
<input name="username" type="text" class="form-control col-3" placeholder="<%- @Ti( 'Username or email' ) %>" value="<%= @item.username %>" autocapitalize="off"/>
<input name="password" type="password" class="form-control col-3" placeholder="<%- @Ti( 'Password' ) %>"/>
<button class="btn btn-primary" type="submit"><%- @T( 'Sign in' ) %></button> <button class="btn btn-primary" type="submit"><%- @T( 'Sign in' ) %></button>
<div> <div>
<span class="small"><label><input name="remember_me" value="1" type="checkbox"/> <%- @T( 'Remember me' ) %></label></span>
<% if @C('user_lost_password'): %> <% if @C('user_lost_password'): %>
<span class="small">&middot;</span> <span class="small">&middot;</span>
<a href="#reset_password" class="small"><%- @T( 'Forgot password?' ) %></a> <a href="#reset_password" class="small"><%- @T( 'Forgot password?' ) %></a>
<% end %> <% end %>
</div> </div>
</form> </form>
</div> </div>
<% if !_.isEmpty( @auth_providers ): %> <% if !_.isEmpty( @auth_providers ): %>
<div class="col-12"> <div class="col-12">
<p>--- <%- @T( 'or' ) %> ---</p> <p>--- <%- @T( 'or' ) %> ---</p>
</div> </div>
@ -32,9 +32,9 @@
<% end %> <% end %>
</ul> </ul>
</div> </div>
<% end %> <% end %>
<% if @C('user_create_account'): %> <% if @C('user_create_account'): %>
<div class="col-12"> <div class="col-12">
<p>--- <%- @T( 'or' ) %> ---</p> <p>--- <%- @T( 'or' ) %> ---</p>
</div> </div>
@ -43,4 +43,8 @@
<p><%- @T( 'New to %s join today!', @C( 'product_name' ) ) %></p> <p><%- @T( 'New to %s join today!', @C( 'product_name' ) ) %></p>
<p><a href="#signup" class="btn btn-default"><%- @T( 'Sign up' ) %></a> <p><a href="#signup" class="btn btn-default"><%- @T( 'Sign up' ) %></a>
</div> </div>
<% end %> <% end %>
</div>
</div>

View file

@ -1,4 +1,4 @@
<div class="navbar navbar-inverse"> <div class="navbar navbar-fixed-top navbar-inverse">
<a class="navbar-brand" href="#/"><%- @C( 'product_name' ) %></a> <a class="navbar-brand" href="#/"><%- @C( 'product_name' ) %></a>
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<% for item in @navbar_left: %> <% for item in @navbar_left: %>

View file

@ -10,7 +10,6 @@
*= require ./bootstrap-tokenfield.css *= require ./bootstrap-tokenfield.css
*= require ./noty_theme_twitter.css *= require ./noty_theme_twitter.css
*= require ./sew.css *= require ./sew.css
*= require ./layout.css
*= require ./zzz.css *= require ./zzz.css
* *
*= require_tree ./custom/ *= require_tree ./custom/

View file

@ -1,161 +0,0 @@
.horizontal, .vertical {
display: -webkit-box !important;
display: -ms-flexbox !important;
display: -moz-flex !important;
display: -webkit-flex !important;
display: flex !important;
}
.horizontal {
-webkit-box-orient: horizontal;
-ms-flex-direction: row;
-moz-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
}
.horizontal.reverse {
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
-moz-flex-direction: row-reverse;
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.vertical {
-webkit-box-orient: vertical;
-ms-flex-direction: column;
-moz-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
.vertical.reverse {
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
-moz-flex-direction: column-reverse;
-webkit-flex-direction: column-reverse;
flex-direction: column-reverse;
}
.relative {
position: relative;
}
.fit {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
body.fit {
margin: 0;
}
.flex {
-webkit-box-flex: 1;
-ms-flex: 1;
-moz-flex: 1;
-webkit-flex: 1;
flex: 1;
}
.flex-auto {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
-moz-flex: 1 1 auto;
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
}
.flex-none {
-webkit-box-flex: none;
-ms-flex: none;
-moz-flex: none;
-webkit-flex: none;
flex: none;
}
.flex-1 {
-webkit-box-flex: 1;
-ms-flex: 1;
-moz-flex: 1;
-webkit-flex: 1;
flex: 1;
}
.flex-2 {
-webkit-box-flex: 2;
-ms-flex: 2;
-moz-flex: 2;
-webkit-flex: 2;
flex: 2;
}
.flex-3 {
-webkit-box-flex: 3;
-ms-flex: 3;
-moz-flex: 3;
-webkit-flex: 3;
flex: 3;
}
.justify-start {
-webkit-box-pack: start;
-ms-flex-pack: start;
-moz-justify-content: flex-start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
}
.justified {
-webkit-box-pack: center;
-ms-flex-pack: center;
-moz-justify-content: center;
-webkit-justify-content: center;
justify-content: center;
}
.justify-end {
-webkit-box-pack: end;
-ms-flex-pack: end;
-moz-justify-content: flex-end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
}
.justify-between {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-moz-justify-content: space-between;
-webkit-justify-content: space-between;
justify-content: space-between;
}
.start {
-webkit-box-align: start;
-ms-flex-align: start;
-moz-align-items: flex-start;
-webkit-align-items: flex-start;
align-items: flex-start;
}
.center {
-webkit-box-align: center;
-ms-flex-align: center;
-moz-align-items: center;
-webkit-align-items: center;
align-items: center;
}
.end {
-webkit-box-align: end;
-ms-flex-align: end;
-moz-align-items: flex-end;
-webkit-align-items: flex-end;
align-items: flex-end;
}

View file

@ -1,7 +1,49 @@
body {
padding-top:78px;
/*
font-size: 13px;
*/
font-weight: 200;
font-size: 13px;
}
.glyphicon { .glyphicon {
font-size: 13px; font-size: 13px;
} }
.btn {
font-size: 12px;
font-weight: 400;
}
label, input, button, select, textarea {
font-size: 13px;
font-weight: 200;
}
select,
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
/*
margin-bottom: 1px;
*/
}
.spinner { .spinner {
float: left; float: left;
background:url("/assets/images/spinner.gif") no-repeat; background:url("/assets/images/spinner.gif") no-repeat;
@ -375,17 +417,16 @@ table th, table td {
*/ */
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
font-weight: normal; font-weight: 200;
} }
h1 { h1 {
font-size: 23px; font-size: 36px;
line-height: 29px; margin-top: 15px;
color: rgba(0,8,14,.73);
} }
h2 { h2 {
font-size: 19px; font-size: 24px;
color: rgba(0,8,14,.73); margin-top: 10px;
} }
h3 { h3 {
font-size: 22px; font-size: 22px;
@ -398,53 +439,16 @@ h5 {
font-size: 16px; font-size: 16px;
} }
label {
text-transform: uppercase;
color: #999;
font-size: 12px;
font-weight: normal;
letter-spacing: 0.1em;
padding-left: 2px;
}
.form-group .help-message { .form-group .help-message {
float: right; float: right;
margin-right: -23px; margin-right: -23px;
margin-top: -23px; margin-top: -23px;
} }
.form-control { .form-control {
height: 41px; height: 33px;
font-weight: normal; font-size: 13px;
box-shadow: none;
border-radius: 3px;
transition: none;
} }
.form-control:focus {
box-shadow: none;
border-color: #419ed7;
}
.has-error .form-control,
.has-error .form-control:focus {
box-shadow: none;
border-color: red;
}
.help-inline {
color: red;
}
.content {
overflow: auto;
padding: 10px;
}
.content.fit {
background: #2c2d36;
}
.form-large { .form-large {
width: 85%; width: 85%;
max-width: 700px; max-width: 700px;
@ -559,16 +563,30 @@ label {
*/ */
.hero-unit { .hero-unit {
width: 500px; width: 940px;
padding: 3px 25px 23px; margin-right: auto;
border: 1px solid #e5f0f5; margin-left: auto;
*zoom: 1;
padding: 50px 60px 60px 60px;
margin-bottom: 30px;
font-size: 18px;
font-weight: 200;
line-height: 30px;
color: inherit; color: inherit;
background-color: white; background-color: #eeeeee;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px; border-radius: 6px;
} }
.hero-unit h1 {
font-size: 52px;
margin-top: 4px;
}
.hero-unit p { .hero-unit p {
font-size: 16px; font-size: 16px;
font-weight: 200;
line-height: 22px; line-height: 22px;
} }
@ -578,53 +596,6 @@ label {
color: #999999; color: #999999;
} }
ol.tabs {
padding: 0;
list-style: decimal inside;
}
ol.tabs li {
display: list-item;
}
.tabs {
color: #b8b8b8;
border: 1px solid rgba(0,8,14,.08);
border-radius: 3px;
}
.tabs-condensed .tab {
padding-left: 5px;
padding-right: 5px;
}
.tab {
padding: 10px;
text-align: center;
border-right: 1px solid rgba(0,8,14,.08);
cursor: pointer;
flex-grow: 1;
}
.tab.active {
color: white;
background: #444a4f;
}
.tab:first-child {
border-radius: 3px 0 0 3px;
}
.tab:last-child {
border-radius: 0 3px 3px 0;
border-right: none;
}
.contain-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
/* /*
* removed margin of forms to not break the layout with submit buttons within <form></form> area e. g. for modal dialogs * removed margin of forms to not break the layout with submit buttons within <form></form> area e. g. for modal dialogs
*/ */
@ -1072,12 +1043,3 @@ footer {
width: 100px; width: 100px;
} }
.btn {
font-size: 14px;
padding: 10px 14px 9px;
}
.btn-primary {
background: #419ed7;
border-color: #419ed7;
}

View file

@ -1,6 +1,6 @@
<div id="app" class="fit"> <div id="app">
<nav></nav> <nav></nav>
<section class="fit"></section> <section></section>
<footer></footer> <footer></footer>
</div> </div>
<div id="splash"> <div id="splash">

View file

@ -10,7 +10,7 @@
<% end %> <% end %>
<%= csrf_meta_tags %> <%= csrf_meta_tags %>
</head> </head>
<body class="relative fit"> <body>
<%= yield %> <%= yield %>