Updated with UI Changes
This commit is contained in:
saurabhbhatia
parent
caca264b50
commit
9bdb633157
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -6,6 +6,7 @@
|
|||
<% end %>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="sub-nav-arrow"></div>
|
||||
</div>
|
||||
|
||||
<div class="sub-nav-block-list">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue