getting started + login CSS WIP

app/assets/javascripts/app/controllers/getting_started.js.coffee

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

app/assets/javascripts/app/controllers/login.js.coffee

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

app/assets/javascripts/app/views/getting_started.jst.eco

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

app/assets/javascripts/app/views/login.jst.eco

@@ -1,50 +1,46 @@
-<div id="login">
-
-  <div class="hero-unit">
-  <h1><%- @T( 'Welcome stranger!' ) %></h1>
-
-    <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>
-        <div>
-          <span class="small"><label><input name="remember_me" value="1" type="checkbox"/> <%- @T( 'Remember me' ) %></label></span>
-          <% if @C('user_lost_password'): %>
-          <span class="small">&middot;</span>
-          <a href="#reset_password" class="small"><%- @T( 'Forgot password?' ) %></a>
-          <% end %>
-        </div>
-      </form>
-    </div>
+<p>Login with zeughaus.znuny.com:</p> <!-- how do you pass @T a parameter? @T( 'Login with %s', zeughaus.znuny.com )? -->
 
-  <% if !_.isEmpty( @auth_providers ): %>
-    <div class="col-12">
-      <p>--- <%- @T( 'or' ) %> ---</p>
-    </div>
+<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" />
+
+    <label for="password"><%- @Ti( 'Password' ) %></label>
+    <input id="password" name="password" type="password" class="form-control"/>
 
-    <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>
+    <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 %>
-      </ul>
     </div>
-  <% end %>
+  </form>
+</div>
 
-  <% if @C('user_create_account'): %>
-    <div class="col-12">
-      <p>--- <%- @T( 'or' ) %> ---</p>
-    </div>
+<% if !_.isEmpty( @auth_providers ): %>
+  <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 %>
+  <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>
+  <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 %>

app/assets/javascripts/app/views/navigation.jst.eco

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

app/assets/stylesheets/application.css

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

app/assets/stylesheets/layout.css

@@ -0,0 +1,161 @@
+.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;
+}

app/assets/stylesheets/zzz.css

@@ -1,49 +1,7 @@
-body {
-  padding-top:78px;
-/*
-  font-size: 13px;
-*/
-  font-weight: 200;
-  font-size: 13px;
-}
-
 .glyphicon {
   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 {
   float: left;
   background:url("/assets/images/spinner.gif") no-repeat;
@@ -417,16 +375,17 @@ table th, table td {
 */
 
 h1, h2, h3, h4, h5, h6 {
-  font-weight: 200;
+  font-weight: normal;
 }
 
 h1 {
-  font-size: 36px;
-  margin-top: 15px;
+  font-size: 23px;
+  line-height: 29px;
+  color: rgba(0,8,14,.73);
 }
 h2 {
-  font-size: 24px;
-  margin-top: 10px;
+  font-size: 19px;
+  color: rgba(0,8,14,.73);
 }
 h3 {
   font-size: 22px;
@@ -439,16 +398,53 @@ h5 {
   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 {
   float: right;
   margin-right: -23px;
   margin-top: -23px;
 }
+
 .form-control {
-  height: 33px;
-  font-size: 13px;
+  height: 41px;
+  font-weight: normal;
+  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 {
   width: 85%;
   max-width: 700px;
@@ -563,30 +559,16 @@ h5 {
  */
 
 .hero-unit {
-  width: 940px;
-  margin-right: auto;
-  margin-left: auto;
-  *zoom: 1;
-  padding: 50px 60px 60px 60px;
-  margin-bottom: 30px;
-  font-size: 18px;
-  font-weight: 200;
-  line-height: 30px;
+  width: 500px;
+  padding: 3px 25px 23px;
+  border: 1px solid #e5f0f5;
   color: inherit;
-  background-color: #eeeeee;
-  -webkit-border-radius: 6px;
-     -moz-border-radius: 6px;
-          border-radius: 6px;
-}
-
-.hero-unit h1 {
-  font-size: 52px;
-  margin-top: 4px;
+  background-color: white;
+  border-radius: 6px;
 }
 
 .hero-unit p {
   font-size: 16px;
-  font-weight: 200;
   line-height: 22px;
 }
 
@@ -596,6 +578,53 @@ h5 {
   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
  */
@@ -1043,3 +1072,12 @@ footer {
   width: 100px;
 }
 
+.btn {
+  font-size: 14px;
+  padding: 10px 14px 9px;
+}
+
+.btn-primary {
+  background: #419ed7;
+  border-color: #419ed7;
+}

app/views/init/index.html.erb

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

app/views/layouts/application.html.erb

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