fixed layout for xlarge screens

2015-08-18 18:10:12 +02:00
parent b14efea8a1
commit f61ed5c9ff
22 changed files with 56 additions and 28 deletions
@@ -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')
@@ -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)->
@@ -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
@@ -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
@@ -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'
@@ -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
@@ -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
@@ -1,6 +1,7 @@
-.row: .small-12.columns: h2=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
-.row: .small-12.columns= suppliers-switcher
+.row: .small-12.columns
+  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
+  = language-switcher
+  = suppliers-switcher
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 %>);
@@ -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
@@ -1,5 +1,4 @@
 header.top-menu
-  height: 90px
  background-color: transparent
  background-repeat: no-repeat, no-repeat
  background-position: left bottom, right bottom
@@ -1,4 +1,7 @@
 .sections-header-container
+  margin: 0
+  dd:first-child
+    margin-left: 0
  .section-header-title
    padding-right: 0.5em
    color: #555