developers
/
orbit-basic
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

187
app/assets/stylesheets/basic/global.css
View File

@ -83,6 +83,7 @@ legend {
min-width: 61px; min-width: 61px;
z-index: 1030; z-index: 1030;
position: fixed; position: fixed;
padding-top: 40px;
background-color: #171717; background-color: #171717;
-webkit-box-shadow: inset -1px 0px 10px #000000; -webkit-box-shadow: inset -1px 0px 10px #000000;
-moz-box-shadow: inset -1px 0px 10px #000000; -moz-box-shadow: inset -1px 0px 10px #000000;
@ -91,12 +92,14 @@ legend {
} }
#sidebar #sidebar-menu { #sidebar #sidebar-menu {
position: absolute; position: absolute;
top: 88px; top: 85px;
bottom: 0; bottom: 0;
z-index: 1; z-index: 0;
display: block; display: block;
width: 61px; width: 61px;
/*overflow: auto;*/ }
#sidebar #sidebar-menu.nano {
top: 0;
} }
#sidebar .scroller { #sidebar .scroller {
position: absolute; position: absolute;
@ -120,16 +123,12 @@ legend {
list-style: none; list-style: none;
} }
#sidebar > h2.position { #sidebar > h2.position {
top: 40px;
margin: 0; margin: 0;
width: 61px; width: 61px;
color: #FFFFFF; color: #FFFFFF;
font-weight: normal; font-weight: normal;
font-size: 2.4em;
line-height: 47px;
line-height: 46px\9;
text-align: center; text-align: center;
position: absolute; position: relative;
background-color: #08c; background-color: #08c;
background-image: -moz-linear-gradient(top, #08c, #006091); background-image: -moz-linear-gradient(top, #08c, #006091);
background-image: -ms-linear-gradient(top, #08c, #006091); background-image: -ms-linear-gradient(top, #08c, #006091);
@ -158,24 +157,20 @@ legend {
} }
#sidebar > h2.position a { #sidebar > h2.position a {
color: #FFFFFF; color: #FFFFFF;
padding: 6px 6px 5px;
text-decoration: none; text-decoration: none;
display: inline-block;
-webkit-text-shadow: 0px -1px 0px #333333; -webkit-text-shadow: 0px -1px 0px #333333;
-moz-text-shadow: 0px -1px 0px #333333; -moz-text-shadow: 0px -1px 0px #333333;
-o-text-shadow: 0px -1px 0px #333333; -o-text-shadow: 0px -1px 0px #333333;
text-shadow: 0px -1px 0px #333333; text-shadow: 0px -1px 0px #333333;
} }
#sidebar > h2.position a i {
line-height: 45px;
}
#sidebar .sidebar-nav > li { #sidebar .sidebar-nav > li {
min-width: 61px; 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; color: #FFFFFF;
cursor: pointer; cursor: pointer;
-webkit-text-shadow: 0px -1px 0px #636363; -webkit-text-shadow: 0px -1px 0px #636363;
@ -183,8 +178,7 @@ legend {
-o-text-shadow: 0px -1px 0px #636363; -o-text-shadow: 0px -1px 0px #636363;
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; color: #B0B0B0;
display: block; display: block;
-webkit-text-shadow: 0px 1px 0px #000000; -webkit-text-shadow: 0px 1px 0px #000000;
@ -192,8 +186,15 @@ legend {
-o-text-shadow: 0px 1px 0px #000000; -o-text-shadow: 0px 1px 0px #000000;
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 { #sidebar .sub-nav-block-list {
top: 40px; top: 40px;
@ -274,7 +275,7 @@ legend {
} }
#sidebar .sub-nav-arrow { #sidebar .sub-nav-arrow {
left: 53px; left: 53px;
top: -10px; top: -16px;
width: 0px; width: 0px;
height: 0px; height: 0px;
z-index: -1; z-index: -1;
@ -282,7 +283,6 @@ legend {
border-style: solid; border-style: solid;
border-width: 8px 8px 8px 0; border-width: 8px 8px 8px 0;
border-color: transparent #0088CC transparent transparent; border-color: transparent #0088CC transparent transparent;
display: none\9; /* 用IE的去死 */
} }
@ -300,14 +300,15 @@ legend {
position: absolute; position: absolute;
z-index: 100; z-index: 100;
width: 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 */
#main-wrap { #main-wrap {
padding-top: 40px; padding-top: 40px;
position: relative;
} }
#main-wrap .wrap-inner { #main-wrap .wrap-inner {
padding: 60px 20px 20px; padding: 60px 20px 20px;
@ -419,6 +420,7 @@ legend {
/* Search Clear */ /* Search Clear */
.searchClear { .searchClear {
position: relative; position: relative;
display: inline-block;
} }
.searchClear .icon-search { .searchClear .icon-search {
position: absolute; position: absolute;
@ -520,10 +522,9 @@ legend {
padding: 0px 5px; padding: 0px 5px;
position: absolute; position: absolute;
z-index: 9999; z-index: 9999;
max-width: 500px; max-width: 300px;
border-radius: 3px; border-radius: 3px;
background-color: #0088CC; background-color: #0088CC;
white-space: nowrap;
} }
#sideset .ui-tooltip.sidebar-tooltip:after { #sideset .ui-tooltip.sidebar-tooltip:after {
display: none; display: none;
@ -533,10 +534,9 @@ legend {
padding: 0px 5px; padding: 0px 5px;
position: absolute; position: absolute;
z-index: 9999; z-index: 9999;
max-width: 500px; max-width: 300px;
border-radius: 3px; border-radius: 3px;
background-color: #000000; background-color: #000000;
white-space: nowrap;
} }
.ui-tooltip:after { .ui-tooltip:after {
content: ''; content: '';
@ -551,6 +551,135 @@ legend {
border-color: #000000 transparent transparent transparent; 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 */ /* IE go die */
:root #sidebar .sub-nav-block:before { :root #sidebar .sub-nav-block:before {
display: block\9; display: block\9;

94
app/views/devise/sessions/new.html.erb
View File

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

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

1
app/views/layouts/_side_bar_content.html.erb
View File

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

20
app/views/layouts/devise.html.erb
View File

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