Ray's changes for orbit bar

This commit is contained in:
Christophe Vilayphiou 2012-04-06 18:06:57 +08:00
parent 7f8047a645
commit 253f4bcb54
5 changed files with 903 additions and 856 deletions

View File

@ -12,3 +12,4 @@
//= require orbit-1.0 //= require orbit-1.0
//= require tinymce-jquery //= require tinymce-jquery
//= require tinymce_orbit //= require tinymce_orbit
//= require orbit-bar-search

View File

@ -0,0 +1,20 @@
$(document).on('click', '.orbit-bar-search', function (){
if ($(this).parents('.search').hasClass('visible')){
$(this).parents('.search').stop().animate({
'width':'28px',
});
$(this).parents('.search').css({
'background-color': 'transparent',
});
$(this).parents('.search').removeClass('visible');
}
else{
$(this).parents('.search').stop().animate({
'width':'265px',
});
$(this).parents('.search').css({
'background-color': 'rgba(0, 0, 0, 0.5)',
});
$(this).parents('.search').addClass('visible');
}
});

View File

@ -49,18 +49,21 @@
*/ */
} }
#orbit-bar .navbar-search { #orbit-bar .navbar-search {
float: none; left: 28px;
margin: 0 auto; margin: 0;
text-align: center; position: absolute;
text-align: right;
top: -1px;
} }
#orbit-bar .nav.pull-right { #orbit-bar .nav.pull-right {
margin-right: -20px; margin-right: -20px;
} }
#orbit-bar .search-query { #orbit-bar .search-query {
background-image: url(<%= asset_path 'main-search.png' %>); padding: 4px 9px;
background-repeat: no-repeat; height: 12px;
background-position: 5px 6px; margin-top: 3px;
padding-left: 25px; border: 1px solid #333333;
font-size: 11px;
/*background-color: rgba(255, 255, 255, 0.8); /*background-color: rgba(255, 255, 255, 0.8);
color: #333; color: #333;
text-shadow: 0px 1px 0px #FFF;*/ text-shadow: 0px 1px 0px #FFF;*/
@ -69,7 +72,7 @@
#orbit-bar .search-query:focus { #orbit-bar .search-query:focus {
/*background-color: rgba(255, 255, 255, 0.9); /*background-color: rgba(255, 255, 255, 0.9);
text-shadow: 0px 1px 0px #FFF;*/ text-shadow: 0px 1px 0px #FFF;*/
background-position: 6px 7px; background-position: 5px 2px;
} }
#orbit-bar .container { #orbit-bar .container {
width:100%; width:100%;
@ -104,11 +107,16 @@
text-indent: -9999px; text-indent: -9999px;
padding:6px; padding:6px;
} }
#orbit-bar .nav > li.search {
overflow: hidden;
width: 28px;
position: relative;
}
#orbit-bar .nav > li > a.orbit-bar-home { #orbit-bar .nav > li > a.orbit-bar-home {
background-position: -10px -10px; background-position: -10px -10px;
} }
#orbit-bar .nav > li > a.orbit-bar-desktop { #orbit-bar .nav > li > a.orbit-bar-desktop {
background-position: -100px -4px; background-position: -106px -9px;
} }
#orbit-bar .nav > li > a.orbit-bar-member { #orbit-bar .nav > li > a.orbit-bar-member {
background-position: -4px -37px; background-position: -4px -37px;
@ -119,6 +127,10 @@
#orbit-bar .nav > li > a.orbit-bar-language { #orbit-bar .nav > li > a.orbit-bar-language {
background-position: -42px -42px; background-position: -42px -42px;
} }
#orbit-bar .nav > li > a.orbit-bar-search {
background-position: -75px -10px;
overflow: hidden;
}
.language-menu .active { .language-menu .active {
color: #ffffff; color: #ffffff;
text-decoration: none; text-decoration: none;
@ -143,6 +155,9 @@
float: left; float: left;
max-width: 22px; max-width: 22px;
} }
#orbit-bar .clear {
clear: none;
}
#orbit-bar .account-menu { #orbit-bar .account-menu {
right: 5px; right: 5px;
} }
@ -266,6 +281,7 @@
padding-top: 32px; padding-top: 32px;
padding-bottom: 18px; padding-bottom: 18px;
position: relative; position: relative;
min-height: 100%;
} }
#main-wrap > .form-actions { #main-wrap > .form-actions {
background-color: #FFF; background-color: #FFF;
@ -349,8 +365,6 @@
border-top: none; border-top: none;
} }
#post-body .editor { #post-body .editor {
margin: 8px 0;
width: 100%;
} }
#post-body-content { #post-body-content {
margin-right: 320px; margin-right: 320px;
@ -382,15 +396,15 @@
border-top-color: #0088CC; border-top-color: #0088CC;
margin-top: 6px; margin-top: 6px;
} }
.filter form {
margin: 5px 10px;
}
.filter .active { .filter .active {
background-color: #0088CC; background-color: #0088CC;
} }
.filter .active a { .filter .active a {
color: #FFF; color: #FFF;
} }
.filter form {
margin: 5px 10px;
}
.filters { .filters {
background-color: rgba(0,0,0,0.075); background-color: rgba(0,0,0,0.075);
-webkit-box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2); -webkit-box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2);
@ -419,26 +433,6 @@
.filters .in { .filters .in {
/*border-bottom: 1px solid rgba(0,0,0,0.07)*/ /*border-bottom: 1px solid rgba(0,0,0,0.07)*/
} }
#tags {
}
#tags .tag {
line-height: 32px;
padding: 0 10px;
background-color: #FFFFFF;
border-bottom: 1px solid #DDDDDD;
border-top: medium none;
}
#tags .tag form, #tags .tag form input {
margin:0;
}
#tags .tagitem {
display: inline-block;
float: left;
}
#tags .action {
display: inline-block;
float: right;
}
.sign-in { .sign-in {
width: 360px; width: 360px;
margin: 0 auto 70px; margin: 0 auto 70px;
@ -531,6 +525,26 @@
.active .web-symbol:after { .active .web-symbol:after {
content: "}"; content: "}";
} }
.img-peview {
margin-left: 12px;
}
.popover img {
max-height: 120px;
max-width: 100%;
}
.popover-inner {
width: auto;
}
.popover-title {
padding: 5px;
}
.popover-content {
border-radius: 3px;
padding: 5px;
}
.popover-title {
display: none;
}
/*icons*/ /*icons*/
.the-icons i:after { .the-icons i:after {
content: attr(class); content: attr(class);
@ -649,6 +663,12 @@
.icons-unlock { .icons-unlock {
background-position: -192px -32px; background-position: -192px -32px;
} }
.icons-time {
background-position: -448px -32px;
}
.icons-banner {
background-position: -608px -32px;
}
/*3*/ /*3*/
.icons-content { .icons-content {
background-position: -160px -66px; background-position: -160px -66px;

View File

@ -152,6 +152,7 @@ module ApplicationHelper
javascripts << "<script type='text/javascript' src='/assets/jquery.tinyscrollbar.min.js'></script>\n" javascripts << "<script type='text/javascript' src='/assets/jquery.tinyscrollbar.min.js'></script>\n"
javascripts << "<script type='text/javascript' src='/assets/jquery.isotope.min.js'></script>\n" javascripts << "<script type='text/javascript' src='/assets/jquery.isotope.min.js'></script>\n"
javascripts << "<script type='text/javascript' src='/assets/orbit-bar-member.js'></script>\n" javascripts << "<script type='text/javascript' src='/assets/orbit-bar-member.js'></script>\n"
javascripts << "<script type='text/javascript' src='/assets/orbit-bar-search.js'></script>\n"
javascripts << "<script type='text/javascript' src='/assets/orbit_bar.js'></script>\n" javascripts << "<script type='text/javascript' src='/assets/orbit_bar.js'></script>\n"
javascripts << "<script type='text/javascript' src='/assets/event.js'></script>\n" javascripts << "<script type='text/javascript' src='/assets/event.js'></script>\n"
page.design.javascripts.each do |js| page.design.javascripts.each do |js|

View File

@ -15,6 +15,7 @@
</div> </div>
<ul class="nav"> <ul class="nav">
<li><%= link_to t(:homepage), root_path, :class => 'orbit-bar-home' %></li> <li><%= link_to t(:homepage), root_path, :class => 'orbit-bar-home' %></li>
<li><a class="orbit-bar-desktop" href="#">Desktop</a></li>
</ul> </ul>
<ul class="nav pull-right"> <ul class="nav pull-right">
<li class="dropdown language"> <li class="dropdown language">
@ -25,6 +26,13 @@
<% end %> <% end %>
</ul> </ul>
</li> </li>
<li class="search clear">
<a class="orbit-bar-search" href="#">search</a>
<form class="navbar-search" action="">
<input class="search-query span3" type="text" placeholder="<%= t(:search_nccu) %>">
</form>
</li>
<% if user_signed_in? %> <% if user_signed_in? %>
<li class="dropdown active"> <li class="dropdown active">
<a class="orbit-bar-account" href="#" data-toggle="dropdown"> <a class="orbit-bar-account" href="#" data-toggle="dropdown">
@ -94,9 +102,6 @@
</li> </li>
<% end %> <% end %>
</ul> </ul>
<form class="navbar-search span6" action="">
<input class="search-query span4" type="text" placeholder="<%= t(:search_nccu) %>">
</form>
</div> </div>
</div> </div>
</header> </header>