Ray's changes for orbit bar

app/assets/javascripts/new_admin.js

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

app/assets/javascripts/orbit-bar-search.js

@@ -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');
+	}
+});

app/assets/stylesheets/style.css.erb

@@ -49,18 +49,21 @@
 	*/
 }
 #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 {
 	margin-right: -20px;
 }
 #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);
 	color: #333;
 	text-shadow: 0px 1px 0px #FFF;*/
@@ -69,7 +72,7 @@
 #orbit-bar .search-query:focus {
 	/*background-color: rgba(255, 255, 255, 0.9);
 	text-shadow: 0px 1px 0px #FFF;*/
-	background-position: 6px 7px;
+	background-position: 5px 2px;
 }
 #orbit-bar .container {
 	width:100%;
@@ -104,11 +107,16 @@
 	text-indent: -9999px;
 	padding:6px;
 }
+#orbit-bar .nav > li.search {
+	overflow: hidden;
+	width: 28px;
+	position: relative;
+}
 #orbit-bar .nav > li > a.orbit-bar-home {
 	background-position: -10px -10px;
 }
 #orbit-bar .nav > li > a.orbit-bar-desktop {
-	background-position: -100px -4px;
+	background-position: -106px -9px;
 }
 #orbit-bar .nav > li > a.orbit-bar-member {
 	background-position: -4px -37px;
@@ -119,6 +127,10 @@
 #orbit-bar .nav > li > a.orbit-bar-language {
 	background-position: -42px -42px;
 }
+#orbit-bar .nav > li > a.orbit-bar-search {
+	background-position: -75px -10px;
+	overflow: hidden;
+}
 .language-menu .active {
   color: #ffffff;
   text-decoration: none;
@@ -143,6 +155,9 @@
 	float: left;
 	max-width: 22px;
 }
+#orbit-bar .clear {
+	clear: none;
+}
 #orbit-bar .account-menu {
 	right: 5px;
 }
@@ -266,6 +281,7 @@
 	padding-top: 32px;
 	padding-bottom: 18px;
 	position: relative;
+	min-height: 100%;
 }
 #main-wrap > .form-actions {
 	background-color: #FFF;
@@ -349,8 +365,6 @@
 	border-top: none;
 }
 #post-body .editor {
-	margin: 8px 0;
-	width: 100%;
 }
 #post-body-content {
 	margin-right: 320px;
@@ -382,15 +396,15 @@
     border-top-color: #0088CC;
     margin-top: 6px;
 }
-.filter form {
-    margin: 5px 10px;
-}
 .filter .active {
 	background-color: #0088CC;
 }
 .filter .active a {
 	color: #FFF;
 }
+.filter form {
+    margin: 5px 10px;
+}
 .filters {
 	background-color: rgba(0,0,0,0.075);
 	-webkit-box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2);
@@ -419,26 +433,6 @@
 .filters .in {
 	/*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 {
 	width: 360px;
 	margin: 0 auto 70px;
@@ -531,6 +525,26 @@
 .active .web-symbol:after {
 	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*/
 .the-icons i:after {
 	content: attr(class);
@@ -649,6 +663,12 @@
 .icons-unlock {
 	background-position: -192px -32px;
 }
+.icons-time {
+	background-position: -448px -32px;
+}
+.icons-banner {
+	background-position: -608px -32px;
+}
 /*3*/
 .icons-content {
 	background-position: -160px -66px;

app/helpers/application_helper.rb

@@ -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.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-search.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"
     page.design.javascripts.each do |js|

app/views/layouts/_orbit_bar.html.erb

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