Better supplier section view

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

@@ -4,7 +4,7 @@
     view Qsupplier.App.SectionTabHeaderView context=section
 .section-manage-tables.pull-right
   if editmode
-    .btn-group
+    /.btn-group
       /a.btn.dropdown-toggle data-toggle="dropdown" href="#section-background"
         span Background
         span.caret
@@ -12,19 +12,19 @@
         each texture in textures
           li
             a{ action setTexture texture } {{texture}}
-    .btn-group
-      button.btn.dropdown-toggle data-toggle="dropdown"
-        span Action
-        span.caret
-      ul#section-actions.dropdown-menu
-        li
-          a{action addTables} {{t 'section.add_tables.button_label'}}
-        li
-          a{action arrangeTables} {{t 'section.arrange_tables.modal.title'}}
-        li
-          a href="{{route 'qr_codes_suppliers_tables_path' section_id=id}}" {{t 'tables.qr_codes.link'}}
-        li
-          a href="{{route 'suppliers_section_path' id}}" data-method="delete" data-confirm="{{t 'helpers.links.are_you_sure' bare=true}}" {{t 'helpers.links.destroy'}}
+    a.tiny.button.dropdown href="#" data-dropdown="section-action-list" Action
+    /button.btn.dropdown-toggle data-toggle="dropdown"
+      span Action
+      span.caret
+    ul#section-action-list.f-dropdown data-dropdown-content=true
+      li
+        a{action addTables} {{t 'section.add_tables.button_label'}}
+      li
+        a{action arrangeTables} {{t 'section.arrange_tables.modal.title'}}
+      li
+        a href="{{route 'qr_codes_suppliers_tables_path' section_id=id}}" {{t 'tables.qr_codes.link'}}
+      li
+        a href="{{route 'suppliers_section_path' id}}" data-method="delete" data-confirm="{{t 'helpers.links.are_you_sure' bare=true}}" {{t 'helpers.links.destroy'}}
     view Ember.TextField valueBinding="title" class="section-edit-title-field"
     view Ember.TextField valueBinding="width" class="dimension section-edit-width-field"
     span x
@@ -32,5 +32,4 @@
     a.section-normal-mode-button{ action finishEditable }: span
   else
     a.section-edit-mode-button{ action makeEditable }: span
-each table in tables
-  view 'Qsupplier.App.SectionTableView' contentBinding="table"
+Qsupplier.App.SectionTablesView contentBinding="tables"

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

@@ -0,0 +1,2 @@
+each table in tables
+  Qsupplier.App.SectionTableView contentBinding="table"

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

@@ -15,7 +15,7 @@ div class="table-actions table-actions-#{unbound table.id}"
     a href="suppliers_table_path(@table)" {{t 'section.tables_view.table_actions.got_to_table'}}
   each user in table.active_list.users
     img src=user.facebook_image
-if editmode
+if editmodedisabled
   .table-settings
     select
       option Round

app/assets/javascripts/supplier/app/views/section_table_view.js.coffee

@@ -52,7 +52,7 @@ Qsupplier.App.SectionTableView = Ember.View.extend DragNDrop.Draggable,
     #@$('.table-actions .title').remove()
     content.hide()
     @$el.on 'click', =>
-      content.toggle()
+      content.toggle() if @$el.hasClass('occupied')
     #@$el.qtip
       #content:
         #text: content

app/assets/javascripts/supplier/app/views/section_tables_view.js.coffee

@@ -1,5 +1,6 @@
-Qsupplier.App.SectionView = Ember.View.extend DragNDrop.Droppable,
+Qsupplier.App.SectionTablesView = Ember.View.extend DragNDrop.Droppable,
   classNames: ['well', 'section-tables-container', 'section-tables-active']
+  templateName: 'section_tables'
   didInsertElement: ->
     @$el = $(@get('element'))
     height = @$el.width() * @get('controller.model.height') / @get('controller.model.width')
@@ -12,6 +13,7 @@ Qsupplier.App.SectionView = Ember.View.extend DragNDrop.Droppable,
     height = @$el.width() * @get('controller.model.height') / @get('controller.model.width')
     @$el.css('height', height)
   ).observes('controller.model.height', 'controller.model.width')
+  tables: (->@get('content')).property('content')
   didInsertElement: ->
     # the first observable event is triggered without the container having its dimensions
     @get('controller.model').notifyPropertyChange('width').notifyPropertyChange('height')

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

@@ -1,6 +1,8 @@
 //= require jquery
 //= require jquery_ujs
 //= require jquery.ui.sortable
+//= require vendor/modernizr
+//= require foundation
 //= require js-routes
 //= require translations
 //= require qwaiter
@@ -18,6 +20,8 @@ var Qstorage = localStorage;
 $.extend($translations.en, <%= I18n.t('supplier', locale: :en).to_json %>);
 $.extend($translations.nl, <%= I18n.t('supplier', locale: :nl).to_json %>);
 
+$(document).foundation();
+
 String.prototype.capitalize = function() {
     return this.charAt(0).toUpperCase() + this.slice(1);
 }

app/assets/stylesheets/supplier/base1-shared/section_tables.css.sass

@@ -1,9 +1,27 @@
 .section-title
   font-size: 24px
   padding: 4px 0px
+.section-manage-tables
+  margin: -32px 6px 4px 6px
+  min-width: 470px
+  text-align: right
+  .section-edit-title-field
+    display: inline-block
+    width: 120px
+  .section-edit-width-field
+    display: inline-block
+    width: 40px
+  .section-edit-height-field
+    display: inline-block
+    width: 40px
+  #section-action-list
+    text-align: left
 .section-tables-container
-  .section-manage-tables
-    margin: -32px 6px 4px 6px
+  $section-border: 1px solid black
+  border-left: $section-border
+  border-right: $section-border
+  border-bottom: $section-border
+  border: $section-border
   .section-table
     background-color: #ccc
     //TODO remove width and height for ember control

app/assets/stylesheets/supplier/foundation1/_qdashboard.css.sass

@@ -1,6 +1,8 @@
 .dashboard-section-selection
   float: right
-  white-space: nowrap
+  min-width: 124px
+  select
+    width: calc(100% - 30px)
 .active-lists-table
   width: 100%
   .mark_list_as_helped

app/assets/stylesheets/supplier/foundation1/_section_tab_headers.css.sass

@@ -9,8 +9,10 @@
     font-weight: bold
     background-color: rgba(200,200,200,0.4)
     color: #333
+    margin-bottom: 2px
     &.active
       border-bottom-width: 0
+      margin-top: 2px
     &.table-hover, &.table-dragging
       background-size: 100px
       background-position: center center