moving stuff around to the header

app/views/layouts/application.html.haml

@@ -56,6 +56,18 @@
           %span{:style => "padding-left:30px;"}
             = link_to "photos", albums_path
 
+    #sub_header
+      .container
+        #group
+          %ul
+            - for group in @groups
+              %li= link_to group.name, group
+            %li.new_group= link_to("new", "#add_group_pane", :id => "add_group_button")
+
+          .yo{ :style => "display:none;"}
+            #add_group_pane
+              = render "groups/new_group"
+
     .container
       .span-4.append-1.last
         = render "shared/group_nav"

public/stylesheets/application.css

@@ -69,10 +69,9 @@ header {
   z-index: 4;
   position: relative;
   margin: -2em;
-    margin-bottom: 20px;
+    margin-bottom: 0;
   color: black;
   background-color: #333333;
-  border-bottom: 3px solid black;
   padding: 0; }
   header #diaspora_text {
     padding-top: 5px;
@@ -94,6 +93,12 @@ header {
     header #session_action a.new_requests {
       color: #df0101; }
 
+#sub_header {
+  margin: 0 -2em;
+  padding: 0.5em 0;
+  background-color: black;
+  margin-bottom: 2em; }
+
 #show_filters {
   z-index: 100;
   position: absolute;
@@ -416,21 +421,18 @@ h1.big_text {
   display: none; }
 
 #group {
-  color: black;
-  margin-bottom: 1em; }
+  color: black; }
   #group ul {
     margin: 0;
     padding: 0;
     list-style: none;
     font-size: 14px; }
     #group ul > li {
-      margin-right: 10px; }
-    #group ul .selected {
-      color: black;
-      font-weight: bold;
-      font-size: 30px; }
-  #group #friend_pictures img {
-    height: 40px; }
+      display: inline;
+      margin-right: 2em; }
+
+#friend_pictures img {
+  height: 40px; }
 
 #add_photo_loader {
   position: absolute;

public/stylesheets/sass/application.sass

@@ -74,12 +74,10 @@ header
   :z-index 4
   :position relative
   :margin -2em
-    :bottom 20px
+    :bottom 0
   :color #000
   :background
     :color #333
-  :border
-    :bottom 3px solid #000
   :padding 0
 
   #diaspora_text
@@ -111,6 +109,14 @@ header
         :color #DF0101
     :padding-right 10px
 
+#sub_header
+  :margin 0 -2em
+  :padding 0.5em 0
+  :background
+    :color black
+  :margin
+    :bottom 2em
+
 #show_filters
   :z-index 100
   :position absolute
@@ -532,8 +538,6 @@ h1.big_text
 
 #group
   :color #000
-  :margin
-    :bottom 1em
   ul
     :margin 0
     :padding 0
@@ -542,18 +546,13 @@ h1.big_text
     :font
       :size 14px
     > li
+      :display inline
       :margin
-        :right 10px
-      
-    .selected
-      :color #000
-      :font
-        :weight bold
-        :size 30px
+        :right 2em
 
-  #friend_pictures
-    img
-      :height 40px
+#friend_pictures
+  img
+    :height 40px
 
 
 #add_photo_loader