fixed layout for xlarge screens

app/assets/javascripts/supplier/app/components/section/tab-header.js.coffee

@@ -1,7 +1,7 @@
 App.SectionTabHeaderComponent= Ember.Component.extend DragNDrop.Droppable,
   layoutName: 'section/tab-header'
-  classNames: ['section-tab-header']
   classNameBindings: ['section_header_class', 'section_active:active']
+  classNames: ['section-tab-header']
   click: (e)->
     @set 'globals.active_section', @get('section')
     @get('targetObject').transitionToRoute 'section', @get('section.id')

app/assets/javascripts/supplier/app/components/sections-header.js.coffee

@@ -1,4 +1,5 @@
 App.SectionsHeaderComponent = Ember.Component.extend
+  classNames: ['sections-switcher-container', 'main-section-header']
   sections: (-> @get('targetObject.store').peekAll('section') ).property()
   actions:
     setSection: (section)->

app/assets/javascripts/supplier/app/templates/employee.emblem

@@ -1,5 +1,5 @@
 .row: .small-12.columns
-  h2=t 'models.employee'
+  h2.main-section-header=t 'models.employee'
   .display-row
     .display-label=t 'attributes.employee.name'
     .display-field= model.name

app/assets/javascripts/supplier/app/templates/employees/index.emblem

@@ -1,5 +1,5 @@
 .row: .small-12.columns
-  h1=t 'models.plural.employee'
+  h2.main-section-header=t 'models.plural.employee'
   if employees
     table.table
       thead

app/assets/javascripts/supplier/app/templates/list.emblem

@@ -1,5 +1,5 @@
 .row: .small-12.columns
-  h2=t 'models.list'
+  h2.main-section-header=t 'models.list'
   partial "list_content"
   link-to 'lists' class="button"
     span=t 'list.go_to_lists'

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

@@ -1,5 +1,5 @@
 .row: .small-12.columns
-  h1=t 'models.plural.list'
+  h2.main-section-header=t 'models.plural.list'
   = view "list-display-date-selector" valueBinding="date"
   if sorted_lists
     table.table

app/assets/javascripts/supplier/app/templates/menu.emblem

@@ -2,7 +2,7 @@
 .row: .small-12.columns
   .products-menu-filters-container
     = input value=product_code_filter type="search" placeholder=product_code_filter_placeholder
-  h2 Menu
+  h2.main-section-header Menu
 each sorted_product_categories as |product_category|
   .row.product_category-container: .small-12.columns
     .product_category-header

app/assets/javascripts/supplier/app/templates/my-account.emblem

@@ -1,6 +1,7 @@
-.row: .small-12.columns: h2=t 'current_employee.my_account.title'
+.row: .small-12.columns
-.form-row
+  h2.main-section-header=t 'current_employee.my_account.title'
+  .form-row
     .form-label: label=t 'attributes.employee.email'
     .form-field= input value=globals.current_employee.email type="email" class="supplier-email" disabled=true
-.row: .small-12.columns= language-switcher
+  = language-switcher
-.row: .small-12.columns= suppliers-switcher
+  = suppliers-switcher

app/assets/javascripts/supplier/app/templates/my-schedule.emblem

@@ -1,3 +1,3 @@
-.row: .small-12.columns: h2=t 'current_employee.my_schedule.title'
 .row: .small-12.columns
+  h2.main-section-header=t 'current_employee.my_schedule.title'
   #schedule-placeholder

app/assets/javascripts/supplier/app/templates/page.emblem

@@ -1,4 +1,4 @@
 .row: .small-12.columns
-  h2=model.title
+  h2.main-section-header=model.title
   /= page-body model.body
   view "page-body" templateBody=model.body

app/assets/javascripts/supplier/app/templates/schedule.emblem

@@ -1,3 +1,3 @@
 .row: .small-12.columns
-  h2= t 'schedule.title' globals.current_supplier
+  h2.main-section-header= t 'schedule.title' globals.current_supplier
   #schedule-placeholder

app/assets/javascripts/supplier/app/templates/section.emblem

@@ -1,4 +1,4 @@
-.section-tabs-container
+.section-tabs-container.main-section-header
   = link-to 'sections' class="goto-sections-index-tab-header": span
   each sections as |section|
     = section-tab-header section=section

app/assets/javascripts/supplier/app/templates/sections/index.emblem

@@ -1,5 +1,5 @@
 .row: .small-12.columns
-  h1=t 'models.plural.section'
+  h2.main-section-header=t 'models.plural.section'
   if sections
     table.table
       thead

app/assets/javascripts/supplier/app/templates/table.emblem

@@ -1,5 +1,5 @@
 .row: .small-12.columns
-  h2=t 'models.table'
+  h2.main-section-header=t 'models.table'
   .display-row
     .display-label= t 'attributes.table.number'
     .display-field

app/assets/javascripts/supplier/app/templates/tables/index.emblem

@@ -1,5 +1,5 @@
 .row: .small-12.columns
-  h1=t 'models.plural.table'
+  h2.main-section-header=t 'models.plural.table'
   if tables
     table.table
       thead

app/assets/javascripts/supplier/foundation1/application.js.erb

@@ -17,6 +17,7 @@
 if(!Modernizr.cssanimations){
   window.location = "/unsupported-browser";
 }
+
 var Qstorage = localStorage;
 $.extend($translations.en, <%= I18n.t('supplier', locale: :en).to_json %>);
 $.extend($translations.nl, <%= I18n.t('supplier', locale: :nl).to_json %>);

app/assets/stylesheets/supplier/foundation1/_qstructure.sass

@@ -1,4 +1,31 @@
 $side-spacing: 0px
+header.top-menu
+  height: 90px
+.main-section
+  +panel($bg:rgba(200,200,200,0.9))
+  padding: 0
+  padding-bottom: 72px
+  margin: 0
+  min-height: 100%
+@media #{$xlarge-up}
+  header.top-menu
+    position: fixed
+    box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.75)
+    z-index: 4022
+    width: 100%
+  .main-section
+    @media #{$xlarge-up}
+      padding-top: 130px
+      min-height: 900px
+  .main-section-header
+    position: fixed
+    top: 90px
+    box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.75)
+    z-index: 4030
+    background-color: rgba(200,200,200, 0.5)
+h2.main-section-header
+  font-size: 1.4em
+  padding: 4px
 .supplier-is-closed
   +alert($bg: $secondary-color)
   .close
@@ -52,12 +79,6 @@ body
   height: 100%
   padding: 0
   margin: 0
-.main-section
-  +panel($bg:rgba(200,200,200,0.9))
-  padding: 0
-  padding-bottom: 72px
-  margin: 0
-  min-height: 100%
 
 .hide, .hidden
   display: none

app/assets/stylesheets/supplier/foundation1/components/_nav_main.sass

@@ -1,5 +1,4 @@
 header.top-menu
-  height: 90px
   background-color: transparent
   background-repeat: no-repeat, no-repeat
   background-position: left bottom, right bottom

app/assets/stylesheets/supplier/foundation1/components/_sections_header.sass

@@ -1,4 +1,7 @@
 .sections-header-container
+  margin: 0
+  dd:first-child
+    margin-left: 0
   .section-header-title
     padding-right: 0.5em
     color: #555

config/locales/supplier.en.yml

@@ -246,6 +246,5 @@ en:
       my_schedule:
         title: My schedule
         link: My schedule
-
     schedule:
       title: Schedule for %{name}

config/locales/supplier.nl.yml

@@ -249,3 +249,5 @@ nl:
       my_schedule:
         title: Mijn schema
         link: Mijn schema
+    schedule:
+      title: Schema voor %{name}

wip.md

@@ -3,7 +3,7 @@ Release
 
 Supplier
 --------
-- collapse top menu on small screens
+- fix page-body template compile view
 - Add supplier specific name field to my_account
 - Add styling to active class active navigation items in top menu, side
   and dropdown menus
@@ -20,6 +20,7 @@ Supplier
 
 User
 ----
+- Fix data model with consistent synchronous and asynchronous relations
 - Implement https://github.com/EddyVerbruggen/Custom-URL-scheme with mozo:// scheme
 - test met veel producten
 - remove active orders on list close