Revert "getting started + login CSS WIP"

This reverts commit 98d8d87232.

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

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

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

@@ -1,6 +1,4 @@
 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,22 +1,36 @@
 <div class="hero-unit">
   <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>
+      </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" id="form-master">
+        <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" id="form-agent">
+        <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>
+  </div>
 </div>

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

@@ -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>
-
         <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>
+    </div>
 
-<% if !_.isEmpty( @auth_providers ): %>
+  <% if !_.isEmpty( @auth_providers ): %>
     <div class="col-12">
       <p>--- <%- @T( 'or' ) %> ---</p>
     </div>
@@ -32,9 +32,9 @@
       <% end %>
       </ul>
     </div>
-<% end %>
+  <% end %>
 
-<% if @C('user_create_account'): %>
+  <% if @C('user_create_account'): %>
     <div class="col-12">
       <p>--- <%- @T( 'or' ) %> ---</p>
     </div>
@@ -43,4 +43,8 @@
       <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 %>
+  <% end %>
+
+  </div>
+
+</div>

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

@@ -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>
   <ul class="nav navbar-nav">
   <% for item in @navbar_left: %>

app/assets/stylesheets/application.css

@@ -10,7 +10,6 @@
  *= 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

@@ -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;
-}

app/assets/stylesheets/zzz.css

@@ -1,7 +1,49 @@
+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;
@@ -375,17 +417,16 @@ table th, table td {
 */
 
 h1, h2, h3, h4, h5, h6 {
-  font-weight: normal;
+  font-weight: 200;
 }
 
 h1 {
-  font-size: 23px;
+  font-size: 36px;
-  line-height: 29px;
+  margin-top: 15px;
-  color: rgba(0,8,14,.73);
 }
 h2 {
-  font-size: 19px;
+  font-size: 24px;
-  color: rgba(0,8,14,.73);
+  margin-top: 10px;
 }
 h3 {
   font-size: 22px;
@@ -398,53 +439,16 @@ 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: 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 {
   width: 85%;
   max-width: 700px;
@@ -559,16 +563,30 @@ label {
  */
 
 .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;
-  background-color: white;
+  background-color: #eeeeee;
+  -webkit-border-radius: 6px;
+     -moz-border-radius: 6px;
           border-radius: 6px;
 }
 
+.hero-unit h1 {
+  font-size: 52px;
+  margin-top: 4px;
+}
+
 .hero-unit p {
   font-size: 16px;
+  font-weight: 200;
   line-height: 22px;
 }
 
@@ -578,53 +596,6 @@ label {
   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
  */
@@ -1072,12 +1043,3 @@ 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" class="fit">
+<div id="app">
   <nav></nav>
-  <section class="fit"></section>
+  <section></section>
   <footer></footer>
 </div>
 <div id="splash">

app/views/layouts/application.html.erb

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