Updated with UI Changes

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 {
+#sidebar .sidebar-nav > li.active span {
-  font-size: 1.2em;
-}
-#sidebar .sidebar-nav > li.active .sub-nav-block {
-  display: block;
-}
-#sidebar .sidebar-nav > li.active > a > 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 {
+#sidebar .sidebar-nav > li span {
-  padding: 10px;
   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 {
+#sidebar .sidebar-nav > li a {
-  font-size: 1.7em;
+  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;
+  border-radius: 50%/1px;
-  background-color: rgba(0, 136, 204, .3);
+  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;

app/views/devise/sessions/new.html.erb

@@ -1,30 +1,64 @@
-<h1 class="login-logo"><%= t(:ruling_site) %></h1>
+   <!-- Orbit Bar -->
-<div id="signin-header">
+    <!--#include virtual="include/orbit_bar.html"-->
-	<h3><%= t(:login) %></h3>
+    <section id="main-wrap">
-</div>
+      <div class="sign-in have-other-sign-in">
-<div id="container" class="sign-in">
+<!--         <p class="alert alert-error in fade">You need to sign in.</p>
-	<%= form_for resource, :as => resource_name, :url => session_path(resource_name), :html => {:class => 'user_new form-horizontal'} do |f| %>
+ -->    
-		<div class="content">
+        <% flash.each do |key, msg| %>
-			 <% flash.each do |key, msg| %>
+		    <%= content_tag :p, msg, :class => [key, "alert alert-error in fade"] %>
-		    <%= content_tag :span, msg, :class => [key, "notice label label-warning"] %>
+		<% end %>
-		  <% end %>
+
-			<p class="alert hide">You need to sign in or sign up before continuing.</p>
+ 		<div class="form">
-			<div class="main">
+          <h3 class="login-logo">Log In to Orbit</h3>
-				<div class="control-group clear">
+          <div>
-					<%= f.label :user_id ,t("users.user_id")%>
+            <input name="utf8" type="hidden" value="" />
-					<%= f.text_field :user_id, :placeholder => t("users.user_id"), :style => "width: 330px;" %>
+            <input name="authenticity_token" type="hidden" value="" />
-					<span class="help-inline">Please correct the error</span>
+          </div>
-				</div>
+<!--           <div class="other-sign-in">
-				<div class="control-group clear">
+            <a class="btn btn-primary" type="submit">Other Sign In</a>
-					<%= f.label :password,t("password") %>
+            <p>or</p>
-					<%= f.password_field :password, :placeholder => t(:dots), :style => "width: 330px;" %>
+          </div> -->
-					<span class="help-inline">Please correct the error</span>
+          <div class="form-block">
-					<%= link_to t(:forgot_password), new_user_password_path, :class => 'pull-right forgot hide' %>
+            <div class="form-list clearfix">
-				</div>
+              <form class="content" accept-charset="UTF-8" action="/users/sign_in" method="post">
-			</div>
+               <%= form_for resource, :as => resource_name, :url => session_path(resource_name), :html => {:class => 'content'} do |f| %>
-		</div>
+
-		<div class="form-actions clear">
+                <div class="control-group clear">
-			<%= content_tag :button, t(:login), :type => :submit, :class => 'btn btn-primary pull-right' %>
+                  <label for="user_email">
-		</div>
+                    <i class="icon-user"></i>
-	<% end %>
+                  </label>
-</div>
+                 	<%= f.text_field :user_id, :placeholder => t("users.user_id"), :id=>"user_email" %>
+                </div>
+                <div class="control-group clear">
+                  <label for="user_password">
+                    <i class="icon-lock"></i>
+                  </label>
+                  <%= f.password_field :password, :placeholder => t(:dots), :id=>"user_password" %>
+                </div>
+                  <%= content_tag :button, t(:login), :type => :submit, :class => 'btn btn-primary' %>
+              </form>
+
+              <form class="content" accept-charset="UTF-8" action="/users/sign_in" method="post">
+                <div class="control-group clear">
+                  <label for="user_email">
+                    <i class="icon-user"></i>
+                  </label>
+                  <input type="text" id="user_id" name="user[id]" placeholder="帳號" />
+                </div>
+                <div class="control-group clear">
+                  <label for="user_password">
+                    <i class="icons-mail"></i>
+                  </label>
+                  <input type="text" id="user_email" name="user[email]" placeholder="電子郵件" />
+                </div>
+              </form>
+            </div>
+          </div>
+         <!--  <div class="register">
+            <button class="btn btn-inverse" type="submit">Register</button>
+          </div> -->
+        <% end %>
+
+        </div>
+      </div>
+    </section>

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 %>
   </h2>
 	<%= render ((local_assigns.has_key? :side_bar_content) ? side_bar_content : 'layouts/side_bar_content') %>
-  <div class="sub-nav-arrow"></div>
 </nav>

app/views/layouts/_side_bar_content.html.erb

@@ -6,6 +6,7 @@
 	    <% end %>
 	  </ul>
 	</div>
+	<div class="sub-nav-arrow"></div>
 </div>
 
 <div class="sub-nav-block-list">

app/views/layouts/devise.html.erb

@@ -6,15 +6,23 @@
 	<!--[if lt IE 9]>
 	   <%= javascript_include_tag "html5" %>
 	<![endif]-->
-	<%= stylesheet_link_tag "devise" %>
+  <%= render 'layouts/meta' %>
-	<%= javascript_include_tag "devise" %>
+  <%= render 'layouts/google_font' %>
-	<%= csrf_meta_tag %>
+  <%= 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 %>
+
+  <style>
+
+  </style>
+  <%= csrf_meta_tag %>
 </head>
 <body>
 	<%= render 'layouts/orbit_bar' %>
 	<%= yield %>
-	<div id="sign-footer">
-      <p>Rulingcom</p>
-  </div>
 </body>
 </html>