Updated with UI Changes

This commit is contained in:
saurabhbhatia 2013-10-01 17:39:21 +08:00
parent caca264b50
commit 9bdb633157
5 changed files with 237 additions and 66 deletions

View File

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

View File

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

View File

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

View File

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

View File

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