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,29 +1,29 @@
 header.top-menu
-  .toggle-side-menu
-    span
-  .menu-content
-    section.main-buttons
-      link-to 'index' class="top-menu-logo"
-        = image_tag 'user/logo-small.png'
-      if list.id
-        App.MenuItemView route="active_list"
-        App.MenuItemView route='table' route_param=list.table.id
-        App.MenuItemListNeedsHelpView
-        App.MenuItemListNeedsPaymentView
-    section.extra-info
-      if list
-        .supplier-info-row
-          .supplier-name= list.supplier.name
-          .table-number
-            |# 
-            = list.table.number
-        .supplier-info-row
-          .counter.supplier-orders-placed-count
-            = list.supplier.orders_placed_count
-            span.orders-placed-count-icon
-          .counter.supplier-orders-in-process-count
-            = list.supplier.orders_in_process_count
-            span.orders-in-process-count-icon
+  .toggle-side-menu: span
+  .top-menu-bar
+    .menu-content
+      section.main-buttons
+        link-to 'index' class="top-menu-logo"
+          = image_tag 'user/logo-small.png'
+        if list.id
+          App.MenuItemView route="active_list"
+          App.MenuItemView route='table' route_param=list.table.id
+          App.MenuItemListNeedsHelpView
+          App.MenuItemListNeedsPaymentView
+      section.extra-info
+        if list
+          .supplier-info-row
+            .supplier-name= list.supplier.name
+            .table-number
+              |# 
+              = list.table.number
+          .supplier-info-row
+            .counter.supplier-orders-placed-count
+              = list.supplier.orders_placed_count
+              span.orders-placed-count-icon
+            .counter.supplier-orders-in-process-count
+              = list.supplier.orders_in_process_count
+              span.orders-in-process-count-icon
 aside.side-menu
   ul
     li.title: h3 Menu

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,12 +1,22 @@
 header.top-menu
-  height: 90px
-  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
+  // 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
+    padding-left: 48px
+    padding-right: 52px
   .top-menu-logo
     @media #{$small-only}
       display: none