From 9bdb633157c3f3481366250a0da9590de1e894c1 Mon Sep 17 00:00:00 2001 From: saurabhbhatia Date: Tue, 1 Oct 2013 17:39:21 +0800 Subject: [PATCH] Updated with UI Changes --- app/assets/stylesheets/basic/global.css | 187 ++++++++++++++++--- app/views/devise/sessions/new.html.erb | 94 +++++++--- app/views/layouts/_side_bar.html.erb | 1 - app/views/layouts/_side_bar_content.html.erb | 1 + app/views/layouts/devise.html.erb | 20 +- 5 files changed, 237 insertions(+), 66 deletions(-) diff --git a/app/assets/stylesheets/basic/global.css b/app/assets/stylesheets/basic/global.css index 61728dc5..a879b79b 100644 --- a/app/assets/stylesheets/basic/global.css +++ b/app/assets/stylesheets/basic/global.css @@ -83,6 +83,7 @@ legend { min-width: 61px; z-index: 1030; position: fixed; + padding-top: 40px; background-color: #171717; -webkit-box-shadow: inset -1px 0px 10px #000000; -moz-box-shadow: inset -1px 0px 10px #000000; @@ -91,12 +92,14 @@ legend { } #sidebar #sidebar-menu { position: absolute; - top: 88px; + top: 85px; bottom: 0; - z-index: 1; + z-index: 0; display: block; width: 61px; - /*overflow: auto;*/ +} +#sidebar #sidebar-menu.nano { + top: 0; } #sidebar .scroller { position: absolute; @@ -120,16 +123,12 @@ legend { list-style: none; } #sidebar > h2.position { - top: 40px; margin: 0; width: 61px; color: #FFFFFF; font-weight: normal; - font-size: 2.4em; - line-height: 47px; - line-height: 46px\9; text-align: center; - position: absolute; + position: relative; background-color: #08c; background-image: -moz-linear-gradient(top, #08c, #006091); background-image: -ms-linear-gradient(top, #08c, #006091); @@ -158,24 +157,20 @@ legend { } #sidebar > h2.position a { color: #FFFFFF; - padding: 6px 6px 5px; text-decoration: none; + display: inline-block; -webkit-text-shadow: 0px -1px 0px #333333; -moz-text-shadow: 0px -1px 0px #333333; -o-text-shadow: 0px -1px 0px #333333; text-shadow: 0px -1px 0px #333333; } +#sidebar > h2.position a i { + line-height: 45px; +} #sidebar .sidebar-nav > li { min-width: 61px; - height: 45px; } -#sidebar .sidebar-nav > li.active { - font-size: 1.2em; -} -#sidebar .sidebar-nav > li.active .sub-nav-block { - display: block; -} -#sidebar .sidebar-nav > li.active > a > span { +#sidebar .sidebar-nav > li.active span { color: #FFFFFF; cursor: pointer; -webkit-text-shadow: 0px -1px 0px #636363; @@ -183,8 +178,7 @@ legend { -o-text-shadow: 0px -1px 0px #636363; text-shadow: 0px -1px 0px #636363; } -#sidebar .sidebar-nav > li > a > span { - padding: 10px; +#sidebar .sidebar-nav > li span { color: #B0B0B0; display: block; -webkit-text-shadow: 0px 1px 0px #000000; @@ -192,8 +186,15 @@ legend { -o-text-shadow: 0px 1px 0px #000000; text-shadow: 0px 1px 0px #000000; } -#sidebar .sidebar-nav > li > a > span > i { - font-size: 1.7em; +#sidebar .sidebar-nav > li a { + display: block; +} +#sidebar .sidebar-nav > li i { + font-size: 1.6em; + line-height: 60px; +} +#sidebar .sidebar-nav > li.active i { + font-size: 2.2em; } #sidebar .sub-nav-block-list { top: 40px; @@ -274,7 +275,7 @@ legend { } #sidebar .sub-nav-arrow { left: 53px; - top: -10px; + top: -16px; width: 0px; height: 0px; z-index: -1; @@ -282,7 +283,6 @@ legend { border-style: solid; border-width: 8px 8px 8px 0; border-color: transparent #0088CC transparent transparent; - display: none\9; /* 用IE的去死 */ } @@ -300,14 +300,15 @@ legend { position: absolute; z-index: 100; width: 100%; - border-radius: 1px; - background-color: rgba(0, 136, 204, .3); + border-radius: 50%/1px; + background-color: rgba(0, 136, 204, .6); } /* Main Wrap */ #main-wrap { padding-top: 40px; + position: relative; } #main-wrap .wrap-inner { padding: 60px 20px 20px; @@ -419,6 +420,7 @@ legend { /* Search Clear */ .searchClear { position: relative; + display: inline-block; } .searchClear .icon-search { position: absolute; @@ -520,10 +522,9 @@ legend { padding: 0px 5px; position: absolute; z-index: 9999; - max-width: 500px; + max-width: 300px; border-radius: 3px; background-color: #0088CC; - white-space: nowrap; } #sideset .ui-tooltip.sidebar-tooltip:after { display: none; @@ -533,10 +534,9 @@ legend { padding: 0px 5px; position: absolute; z-index: 9999; - max-width: 500px; + max-width: 300px; border-radius: 3px; background-color: #000000; - white-space: nowrap; } .ui-tooltip:after { content: ''; @@ -551,6 +551,135 @@ legend { border-color: #000000 transparent transparent transparent; } +/* Sign In */ +#sign-in { + background-color: #F3F3F3; + background-repeat: no-repeat; + background : -webkit-radial-gradient(center center,circle cover, #F3F3F3 10%, #DBDBDB 100%); + background : -moz-radial-gradient(center center,circle cover, #F3F3F3 10%, #DBDBDB 100%); + background : -o-radial-gradient(center center,circle cover, #F3F3F3 10%, #DBDBDB 100%); + background : -ms-radial-gradient(center center,circle cover, #F3F3F3 10%, #DBDBDB 100%); + background : -radial-gradient(center center,circle cover, #F3F3F3 10%, #DBDBDB 100%); +} +.sign-in { + text-align: center; + position: relative; + width: 300px; + margin: 150px auto 0; +} +.sign-in .other-sign-in { + display: none; +} +.sign-in .login-logo { + margin: 0; + padding-bottom: 15px; + border-bottom: 1px solid #ededed; +} +.sign-in .alert { + box-shadow: 0 3px 10px #CBCBCB; + text-align: left; +} +.sign-in .form { + background-color: #FFF; + box-shadow: 0 10px 20px #CBCBCB; + padding: 15px; + margin-bottom: 20px; +} +.sign-in .form-block { + overflow: hidden; +} +.sign-in .form-list { + width: 555px; +} +.sign-in .content { + float: left; + margin-bottom: 0; + position: relative; +} +.sign-in .content + .content { + margin-left: 15px; +} +.sign-in .control-group { + position: relative; + width: 270px; + margin: 0; +} +.sign-in .control-group label { + position: absolute; + top: 0; + left: 0; + width: 39px; + height: 40px; + line-height: 40px; + margin: 0; + color: #5C5C5C; +} +.sign-in .control-group input { + width: 222px; + height: 30px; + padding: 4px 6px 4px 40px; + margin-bottom: 25px; +} +.sign-in .btn { + padding: 4px 0; + display: block; + width: 100%; + margin-bottom: 10px; +} +.sign-in .other-sign-in { + position: relative; + margin-top: 20px; + margin-bottom: 30px; + padding-bottom: 20px; + border-bottom: 1px solid #ededed; +} +.sign-in .other-sign-in p { + position: absolute; + width: 30px; + height: 30px; + background-color: #FFF; + padding: 0 10px; + margin-bottom: 0; + margin-left: -25px; + line-height: 30px; + left: 50%; + bottom: -15px; + font-size: 1.3em; + color: #b1b1b1; +} +.sign-in .checkbox { + position: absolute; + text-align: left; + bottom: 37px; +} +.sign-in .switchboard { + color: #08C; + cursor: pointer; +} +.sign-in .switchboard span, +.sign-in .switchboard.active i { + display: inline; +} +.sign-in .switchboard.active span, +.sign-in .switchboard i { + display: none; +} +.register { + box-shadow: inset 0 5px 5px #E0E0E0; + background-color: #eee; + padding: 15px; + margin: 15px -15px -15px; +} +.register .btn { + margin: 0; +} +.have-other-sign-in { + margin: 80px auto 0; +} +.have-other-sign-in .other-sign-in { + display: block; +} + /* IE go die */ :root #sidebar .sub-nav-block:before { display: block\9; diff --git a/app/views/devise/sessions/new.html.erb b/app/views/devise/sessions/new.html.erb index 71bd12f4..83c9b10a 100644 --- a/app/views/devise/sessions/new.html.erb +++ b/app/views/devise/sessions/new.html.erb @@ -1,30 +1,64 @@ -

<%= t(:ruling_site) %>

-
-

<%= t(:login) %>

-
-
- <%= form_for resource, :as => resource_name, :url => session_path(resource_name), :html => {:class => 'user_new form-horizontal'} do |f| %> -
- <% flash.each do |key, msg| %> - <%= content_tag :span, msg, :class => [key, "notice label label-warning"] %> - <% end %> -

You need to sign in or sign up before continuing.

-
-
- <%= f.label :user_id ,t("users.user_id")%> - <%= f.text_field :user_id, :placeholder => t("users.user_id"), :style => "width: 330px;" %> - Please correct the error -
-
- <%= f.label :password,t("password") %> - <%= f.password_field :password, :placeholder => t(:dots), :style => "width: 330px;" %> - Please correct the error - <%= link_to t(:forgot_password), new_user_password_path, :class => 'pull-right forgot hide' %> -
-
-
-
- <%= content_tag :button, t(:login), :type => :submit, :class => 'btn btn-primary pull-right' %> -
- <% end %> -
+ + +
+ +
\ No newline at end of file diff --git a/app/views/layouts/_side_bar.html.erb b/app/views/layouts/_side_bar.html.erb index 6837e875..f598e184 100644 --- a/app/views/layouts/_side_bar.html.erb +++ b/app/views/layouts/_side_bar.html.erb @@ -3,5 +3,4 @@ <%= link_to content_tag(:i, nil, :class => (local_assigns.has_key? :icon) ? icon : 'icons-gauge'), (local_assigns.has_key? :link_url) ? link_url : admin_dashboards_path %> <%= render ((local_assigns.has_key? :side_bar_content) ? side_bar_content : 'layouts/side_bar_content') %> -
\ No newline at end of file diff --git a/app/views/layouts/_side_bar_content.html.erb b/app/views/layouts/_side_bar_content.html.erb index 931b9506..b55309db 100644 --- a/app/views/layouts/_side_bar_content.html.erb +++ b/app/views/layouts/_side_bar_content.html.erb @@ -6,6 +6,7 @@ <% end %> +
diff --git a/app/views/layouts/devise.html.erb b/app/views/layouts/devise.html.erb index d1a3512c..d490766c 100644 --- a/app/views/layouts/devise.html.erb +++ b/app/views/layouts/devise.html.erb @@ -6,15 +6,23 @@ - <%= stylesheet_link_tag "devise" %> - <%= javascript_include_tag "devise" %> - <%= csrf_meta_tag %> + <%= render 'layouts/meta' %> + <%= render 'layouts/google_font' %> + <%= stylesheet_link_tag "basic/global" %> + <%= stylesheet_link_tag "basic" %> + + <%= render 'layouts/ie_html5_fix' %> + <%= javascript_include_tag "basic" %> + <%= yield :page_specific_css %> + <%= yield :page_specific_javascript %> + + + <%= csrf_meta_tag %> <%= render 'layouts/orbit_bar' %> <%= yield %> -