Participate / Explore have been upgraded to top-level status.

app/views/layouts/main_stream.html.haml

@@ -29,6 +29,16 @@
       = link_to current_user.first_name, local_or_remote_person_path(current_user.person)
 
   .section
+    %ul.left_nav
+      %li
+        = link_to t("streams.participate.title"), participate_path, :class => 'home_selector', :rel => 'backbone'
+
+    %ul.left_nav.sub
+      %li
+        = link_to t('streams.mentions.title'), mentioned_stream_path, :class => 'home_selector', :rel => 'backbone'
+
+    %br
+
     %ul.left_nav
       %li
         = link_to t("streams.multi.title"), explore_path, :class => 'home_selector', :rel => 'backbone'
@@ -38,24 +48,6 @@
     #followed_tags_listing
       = render 'tags/followed_tags_listings'
 
-    %br
-    %ul.left_nav
-      %li
-        = link_to t("streams.participate.title"), participate_path, :class => 'home_selector', :rel => 'backbone'
-
-    %ul.left_nav.sub
-      %li
-        = link_to t('streams.like_stream.title'), liked_stream_path, :class => 'home_selector', :rel => 'backbone'
-    %ul.left_nav.sub
-      %li
-        = link_to t('streams.comment_stream.title'), commented_stream_path, :class => 'home_selector', :rel => 'backbone'
-
-
-    %ul.left_nav.sub
-      %li
-        = link_to t('streams.mentions.title'), mentioned_stream_path, :class => 'home_selector', :rel => 'backbone'
-
-
 
 
 .span-13.append-1

config/locales/javascript/javascript.en.yml

@@ -24,6 +24,10 @@ en:
         months: "%d months"
         year: "about a year"
         years: "%d years"
+
+      participate: "Participate"
+      explore: "Explore"
+
       videos:
           watch: "Watch this video on <%= provider %>"
           unknown: "Unknown video type"
@@ -117,7 +121,7 @@ en:
         notifications: "Notifications"
         messages: "Messages"
 
-        search: "Find people or #tags"
+        search: "Search"
 
         recent_notifications: "Recent Notifications"
         mark_all_as_read: "Mark all as read"

public/javascripts/app/templates/header.handlebars

@@ -1,22 +1,25 @@
 <div class="container" style="position:relative;">
 
-  <a href="/explore">
+
+  <a href="/participate">
     <img alt="Logo_small" class="diaspora_header_logo" height="38px" width="65px" src="{{imageUrl "/images/header-logo.png"}}" />
   </a>
 
-  <div id="global_search">
+  <span class="header-nav">
-    <form accept-charset="UTF-8" action="/people" class="search_form" method="get">
+    <span>
-      <input name="utf8" type="hidden" value="✓">
+        <a href="/participate">
-      <input id="q" name="q" placeholder="{{t "header.search"}}" results="5" type="search" autocomplete="off" class="ac_input">
+          {{t "participate"}}
-    </form>
+        </a>
-  </div>
+     </span>
+
+    <span>
+        <a href="/explore">
+          {{t "explore"}}
+        </a>
+    </span>
+  </span>
 
   <div id="nav_badges">
-    <div class="badge" id="home_badge">
-      <a href="/explore" title="{{t "header.home"}}"><img alt="Home" src="{{imageUrl "/images/icons/home_grey.png"}}" />
-      </a>
-    </div>
-
     <div class="badge" id="notification_badge">
       <a href="/notifications" title="{{t "header.notifications"}}">
         <img alt="{{t "header.notifications"}}" id="notification-flag" src="{{imageUrl "/images/icons/notifications_grey.png"}}" />
@@ -34,31 +37,33 @@
         </div>
       </a>
     </div>
+
+
+      <div id="notification_dropdown">
+        <div class="header">
+          <div class="right">
+            <a href="#" id="mark_all_read_link">
+              {{t "header.mark_all_as_read"}}
+            </a>
+            |
+            <a href="/notifications" id="view_all_notifications">
+              {{t "header.view_all"}}
+            </a>
+          </div>
+
+          <h4>
+            {{t "header.recent_notifications"}}
+          </h4>
+        </div>
+
+        <div class="notifications">
+          <div class="ajax_loader">
+            <img alt="Ajax-loader" src="{{imageUrl "/images/ajax-loader.gif"}}">
+          </div>
+        </div>
+      </div>
   </div>
 
-  <div id="notification_dropdown">
-    <div class="header">
-      <div class="right">
-        <a href="#" id="mark_all_read_link">
-          {{t "header.mark_all_as_read"}}
-        </a>
-        |
-        <a href="/notifications" id="view_all_notifications">
-          {{t "header.view_all"}}
-        </a>
-      </div>
-
-      <h4>
-        {{t "header.recent_notifications"}}
-      </h4>
-    </div>
-
-    <div class="notifications">
-      <div class="ajax_loader">
-        <img alt="Ajax-loader" src="{{imageUrl "/images/ajax-loader.gif"}}">
-      </div>
-    </div>
-  </div>
 
   <div id="hovercard_container">
     <div id="hovercard">
@@ -93,6 +98,14 @@
     <li><a href="/users/sign_out">{{t "header.log_out"}}</a></li>
   </ul>
 
+
+  <div id="global_search">
+    <form accept-charset="UTF-8" action="/people" class="search_form" method="get">
+      <input name="utf8" type="hidden" value="✓">
+      <input id="q" name="q" placeholder="{{t "header.search"}}" results="5" type="search" autocomplete="off" class="ac_input">
+    </form>
+  </div>
+
   <div id="lightbox">
     <div id="lightbox-content">
       <a href="#" id="lightbox-close-link">[x] close</a>

public/stylesheets/sass/application.sass

@@ -174,7 +174,7 @@ header
   :left 0
 
   :border
-    :bottom 1px solid #444
+    :bottom 1px solid #000
 
   a
     :color #CCC
@@ -212,11 +212,10 @@ header
       :left 1px solid #333
       :right 1px solid #333
 
-    :position absolute
     :display inline
 
     :top -4px
-    :right 0
+    :float right
 
     li
       a
@@ -263,6 +262,31 @@ header
       :top 9px
       :display block
 
+  .header-nav
+    :font-weight bold
+    :float left
+    :height 100%
+    :margin-right 5px
+    :margin-top 3px
+
+    a
+      :padding 0 10px
+      :width 100%
+      &:hover
+        :text-decoration none
+
+    > span
+      :height 100%
+      :display inline-block
+      :margin-left -4px
+      :border
+        :left 1px solid #333
+        :right 1px solid #333
+
+      &:last-child
+        :margin-left -5px
+
+
 header.ie-user-menu-active
   :height 150px
 
@@ -299,14 +323,8 @@ ul.as-selections
     :color #333 !important
 
 .diaspora_header_logo
-  :position relative
+  :float left
-  :top -6px
+  :margin-top -6px
-
-  :padding 0 10px
-
-  :margin
-    :left 43px
-    :right 60px
 
 .stream
   audio
@@ -323,7 +341,6 @@ ul.as-selections
       :border
         :top none
 
-
     .youtube-player, .vimeo-player
       :border none
       :height 304px
@@ -1181,52 +1198,42 @@ img.scaled_full
 
 header #global_search
   :display inline
-  :position relative
+  :float right
 
-  :top -20px
+  :margin-top -1px
+  :margin-right 10px
 
   form
     :display inline
 
     input
       @include box-shadow(0,1px,1px,#444)
-      @include border-radius(3px)
+      @include border-radius(15px)
-      @include transition(background-color)
+      @include transition(width)
 
+      :width 100px
       :display inline
-      :background-color #555
+      :background-color #444
-      :background-color rgba(60,60,60,0.6)
-
-      :border
-        :top 1px solid #111
-
-      :font
-        :size 14px
 
       :border 1px solid #222
 
       &:hover
-        :background-color #888
+        :background-color #555
-        :background-color rgba(90,90,90,0.6)
 
       &.active
         :background-color #fafafa
         :background-color rgba(160,160,160,0.6)
 
       &:focus
-        @include box-shadow(0,0,5px,#fff)
         :outline none
         :background-color white
+        :width 200px
 
-    input[type='search']
+      &[type='search']
-      :width 220px
+        &:-webkit-input-placeholder
-      :padding 5px
+          :text-shadow none
-
+        &:-moz-placeholder
-      &::-webkit-input-placeholder
+          :text-shadow none
-        :text-shadow none
-
-      &:-moz-placeholder
-        :text-shadow none
 
 .aspect
   h3
@@ -1679,13 +1686,9 @@ h3 span.current_gs_step
         :color #22AAE0
 
 #nav_badges
-  :position absolute
   :display inline-block
-  :min-width 170px
+  :margin-top 2px
-  :top 3px
+  :float left
-  :left 410px
-  :margin
-    :left 20px
 
   a:hover
     :text
@@ -3137,11 +3140,10 @@ a.toggle_selector
 
   :background white
   :border solid #888 1px
-  :position absolute
+  :left 300px
-  :top 32px
-  :left 462px
   :width 380px
   :display none
+  :margin-top 8px
 
   :color #444