From 98d8d87232f5d829c79dd06d33d59a09a7025bc9 Mon Sep 17 00:00:00 2001 From: Felix Niklas Date: Wed, 2 Jul 2014 17:15:50 +0200 Subject: [PATCH] getting started + login CSS WIP --- .../app/controllers/getting_started.js.coffee | 2 +- .../app/controllers/login.js.coffee | 2 + .../app/views/getting_started.jst.eco | 50 ++--- .../javascripts/app/views/login.jst.eco | 78 ++++---- .../javascripts/app/views/navigation.jst.eco | 2 +- app/assets/stylesheets/application.css | 1 + app/assets/stylesheets/layout.css | 161 ++++++++++++++++ app/assets/stylesheets/zzz.css | 174 +++++++++++------- app/views/init/index.html.erb | 4 +- app/views/layouts/application.html.erb | 2 +- 10 files changed, 330 insertions(+), 146 deletions(-) create mode 100755 app/assets/stylesheets/layout.css diff --git a/app/assets/javascripts/app/controllers/getting_started.js.coffee b/app/assets/javascripts/app/controllers/getting_started.js.coffee index e0d61a29e..66a406226 100644 --- a/app/assets/javascripts/app/controllers/getting_started.js.coffee +++ b/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', diff --git a/app/assets/javascripts/app/controllers/login.js.coffee b/app/assets/javascripts/app/controllers/login.js.coffee index b0631736c..dcc87a325 100644 --- a/app/assets/javascripts/app/controllers/login.js.coffee +++ b/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' diff --git a/app/assets/javascripts/app/views/getting_started.jst.eco b/app/assets/javascripts/app/views/getting_started.jst.eco index 1d5f946e2..2cf98639e 100644 --- a/app/assets/javascripts/app/views/getting_started.jst.eco +++ b/app/assets/javascripts/app/views/getting_started.jst.eco @@ -1,36 +1,22 @@

<%- @T( 'Getting started!' ) %>

-
-
-
-
    -
  1. <%- @T( 'Create Admin' ) %>
    2. -
  2. <%- @T( 'Invite Agents' ) %>
    3. -
  3. <%- @T( 'Configure Channels' ) %>
    4. -
-
-
-
- <% if @master_user: %> -
-

<%- @T( 'Create Admin' ) %>

-
- -
-
- <% end %> -
-

<%- @T( 'Invite Agents' ) %>

-
- -
-
-
-

<%- @T( 'Tour' ) %>

-

- <%- @T( 'Learn all about ...' ) %> -

-
-
+
    +
  1. <%- @T( 'Create Admin' ) %>
    2. +
  2. <%- @T( 'Invite Agents' ) %>
    3. +
  3. <%- @T( 'Configure Channels' ) %>
    4. +
+ <% if @master_user: %> +
+

<%- @T( 'Create Admin' ) %>

+
+ +
+
+ <% end %> +
+

<%- @T( 'Invite Agents' ) %>

+
+ +
\ No newline at end of file diff --git a/app/assets/javascripts/app/views/login.jst.eco b/app/assets/javascripts/app/views/login.jst.eco index a6a360071..ed27f8011 100644 --- a/app/assets/javascripts/app/views/login.jst.eco +++ b/app/assets/javascripts/app/views/login.jst.eco @@ -1,50 +1,46 @@ -
+

Login with zeughaus.znuny.com:

-
-

<%- @T( 'Welcome stranger!' ) %>

+
+
+ + -
-

<%- @T( 'Sign in with' ) %>

- - - - -
- - <% if @C('user_lost_password'): %> - · - <%- @T( 'Forgot password?' ) %> - <% end %> -
- -
+ + - <% if !_.isEmpty( @auth_providers ): %> -
-

--- <%- @T( 'or' ) %> ---

-
+ -
-

<%- @T( 'Sign in using' ) %>

-
- <% end %> - - <% if @C('user_create_account'): %> -
-

--- <%- @T( 'or' ) %> ---

-
- -
-

<%- @T( 'New to %s join today!', @C( 'product_name' ) ) %>

-

<%- @T( 'Sign up' ) %> -

- <% end %> + +
+<% if !_.isEmpty( @auth_providers ): %> +
+

--- <%- @T( 'or' ) %> ---

-
+
+

<%- @T( 'Sign in using' ) %>

+ +
+<% end %> + +<% if @C('user_create_account'): %> +
+

--- <%- @T( 'or' ) %> ---

+
+ +
+

<%- @T( 'New to %s join today!', @C( 'product_name' ) ) %>

+

<%- @T( 'Sign up' ) %> +

+<% end %> diff --git a/app/assets/javascripts/app/views/navigation.jst.eco b/app/assets/javascripts/app/views/navigation.jst.eco index 15a100bce..3336d01f0 100644 --- a/app/assets/javascripts/app/views/navigation.jst.eco +++ b/app/assets/javascripts/app/views/navigation.jst.eco @@ -1,4 +1,4 @@ -
+
<%- @C( 'product_name' ) %>
    <% for item in @navbar_left: %> diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index 5e0aba331..a4711c951 100644 --- a/app/assets/stylesheets/application.css +++ b/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/ diff --git a/app/assets/stylesheets/layout.css b/app/assets/stylesheets/layout.css new file mode 100755 index 000000000..ee6e29538 --- /dev/null +++ b/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; +} diff --git a/app/assets/stylesheets/zzz.css b/app/assets/stylesheets/zzz.css index d21dfb661..99385fe1f 100644 --- a/app/assets/stylesheets/zzz.css +++ b/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
    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; +} diff --git a/app/views/init/index.html.erb b/app/views/init/index.html.erb index 748969958..5f0faeb41 100644 --- a/app/views/init/index.html.erb +++ b/app/views/init/index.html.erb @@ -1,6 +1,6 @@ -
    +
    -
    +
    diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 6f8dbd98e..57fc0ef1c 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -10,7 +10,7 @@ <% end %> <%= csrf_meta_tags %> - + <%= yield %>