User top menu fixed

app/assets/javascripts/user/app/controllers/lists_index_controller.js.coffee

@@ -1 +1,2 @@
-App.ListsIndexController = Ember.ArrayController.extend App.PaginationModule
+App.ListsIndexController = Ember.ArrayController.extend App.PaginationModule,
+  lists: (->@get('model').sortBy('created_at').reverse()).property('model.@each')

app/assets/javascripts/user/app/templates/application.emblem

@@ -1,6 +1,6 @@
 header.top-menu
-  .toggle-side-menu
-    span
+  .toggle-side-menu: span
+  .top-menu-bar
     .menu-content
       section.main-buttons
         link-to 'index' class="top-menu-logo"

app/assets/javascripts/user/app/templates/lists/index.emblem

@@ -1,6 +1,6 @@
 .row
   h2=t 'models.plural.list'
-  each list in controller: App.ListIndexView contentBinding='list'
+  each list in lists: App.ListIndexView contentBinding='list'
   .clearfix
   if hasMore
     button{action "showMore"}=t 'lists.show_more'

app/assets/stylesheets/user/foundation/_qconstants.css.sass

@@ -7,3 +7,4 @@ $wood: image-url('theme1/wall-bg.jpg')
 $background-brown: #57351f
 $current-color: #ff0
 $active-color: #f70
+$top-menu-height: 90px

app/assets/stylesheets/user/foundation/_qlists.css.sass

@@ -1,6 +1,8 @@
 .lists-overview-entry
   +grid-column(12)
   cursor: pointer
+  // Transparent border to get same size as active box
+  border: 1px solid transparent
   border-bottom: 1px solid #ddd
   margin-bottom: 12px
   @media #{$medium-only}

app/assets/stylesheets/user/foundation/_structure.css.sass

@@ -8,6 +8,7 @@ body
 #ember-app-container
   background-image: image-url('theme1/wall-bg.jpg')
   background-repeat: repeat
+  padding-top: $top-menu-height
 
 main.main-section
   +panel($bg:rgba(200,200,200,0.8))

app/assets/stylesheets/user/foundation/application.css.sass

@@ -1,7 +1,7 @@
+@import constants
 @import ./qconstants
 @import ./foundation_and_overrides
 @import font-awesome
-@import constants
 @import ./structure
 @import ./components/*
 @import ./qmodal

app/assets/stylesheets/user/foundation/components/_menu_main.css.sass

@@ -1,10 +1,20 @@
 header.top-menu
-  height: 90px
+  // Fixed styling rules copied from foundation top-menu fixed
+  width: 100%
+  #{$default-float}: 0
+  position: fixed
+  top: 0
+  z-index: 99
+
+  background-image: image-url('theme1/wall-bg.jpg')
+  height: $top-menu-height
+  .top-menu-bar
+    color: $green
+    height: $top-menu-height
+    background-image: image-url('theme1/button-bar-left.png'), image-url('theme1/button-bar-right.png')
     background-color: transparent
     background-repeat: no-repeat, no-repeat
     background-position: left bottom, right bottom
-  background-image: image-url('theme1/button-bar-left.png'), image-url('theme1/button-bar-right.png')
-  color: $green
     padding-left: 48px
     padding-right: 52px
   .top-menu-logo