Start with supplier foundation style

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

@@ -1,22 +1,6 @@
 //= require jquery
 //= require jquery_ujs
-//= require jquery.ui.all
-//= require jquery.ui.datepicker-en
-//= require jquery.ui.datepicker-nl
-// require bootstrap-transition
-// require bootstrap-affix
-// require bootstrap-alert
-// require bootstrap-button
-// require bootstrap-carousel
-// require bootstrap-collapse
-// require bootstrap-dropdown
-// require bootstrap-modal
-// require bootstrap-scrollspy
-// require bootstrap-tab
-// require bootstrap-tooltip
-// require bootstrap-popover
-// require bootstrap-typeahead
-//= require bootstrap
+//= require jquery.ui.sortable
 //= require js-routes
 //= require translations
 //= require qwaiter
@@ -25,6 +9,7 @@
 //= require faye
 //= require ./base
 //= require qtip
+//= require pickdate
 //= require_directory .
 //= require_self
 //= require moment

app/assets/javascripts/supplier/foundation1/initializer.js.coffee

@@ -1,4 +1,4 @@
-$( ->
+$ ->
   $('.week-day-toggle').each ->
     select = $('#week-day-select-'+$(@).data('day'))
     $(@).addClass('active') if select.val() == '1'
@@ -6,17 +6,19 @@ $( ->
 
   $('#full_day-controller').each ->
     control = $('#product_category_full_day')
-    unless control.is(':checked')
-      $(@).addClass('icon-white')
+    if control.is(':checked')
       $('#sub-day-container').removeClass('hide')
+      $(@).removeClass 'active'
+    else
+      $(@).addClass('active')
     $(@).click ->
       if control.is(':checked')
         control.prop 'checked', false
-        $(@).addClass 'icon-white'
+        $(@).removeClass 'active'
         $('#sub-day-container').removeClass('hide')
       else
+        $(@).addClass 'active'
         control.prop 'checked', true
-        $(@).removeClass 'icon-white'
         $('#sub-day-container').addClass('hide')
 
   if Qstorage.getItem('message')
@@ -27,12 +29,10 @@ $( ->
     container.show()
     Qstorage.removeItem('message')
 
-  $('.datepicker').datepicker(window.datepicker_options)
-
-  setTranslations()
+  setupTranslations()
 
   # GOOGLE LOCATION PICKER
-  $("input.location_picker").each( (i)->
+  $("input.location_picker").each (i)->
     #return if typeof(google) == 'undefined'
     iconBase = 'https://maps.google.com/mapfiles/kml/'
     location_input = $(this)
@@ -60,7 +60,7 @@ $( ->
       panControl: false
       scaleControl: false
       streetViewControl: false
-      
+
     map = new google.maps.Map(map_div.get(0), mapOptions)
     marker = new google.maps.Marker(
       position: center
@@ -85,7 +85,7 @@ $( ->
     map_div.before(search_field)
     infowindow = new google.maps.InfoWindow()
     search_marker = new google.maps.Marker({map: map, icon: iconBase + 'shapes/placemark_circle.png'})
-    google.maps.event.addListener(autocomplete, 'place_changed', ->
+    google.maps.event.addListener autocomplete, 'place_changed', ->
       infowindow.close()
       search_marker.setVisible(false)
       place = autocomplete.getPlace()
@@ -114,6 +114,14 @@ $( ->
         ].join(' ')
       infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address + '</div>')
       infowindow.open(map, search_marker)
-    )
-  )
-)
+  # end google location map
+
+  $('.toggle-side-menu,.side-menu').click ->
+    menu = $('aside.side-menu')
+    toggle = $('.toggle-side-menu')
+    if menu.is(':visible')
+      menu.animate left: -255, -> $(@).hide()
+      toggle.animate left: 0, -> $(@).removeClass('open')
+    else
+      menu.show().animate left: 0
+      toggle.animate left: 222 - 30, -> $(@).addClass('open')

app/assets/javascripts/translations.js.coffee.erb

@@ -56,10 +56,11 @@
 
 @setTranslations = (selector) ->
   #list = $("#top-navigation-list")
+  locale = Qstorage.getItem('locale') || 'en'
   selector = $( selector || document)
   selector.find(".locale-select").show()
-  selector.find(".locale-select-" + $locale).hide()
-  moment.lang $locale
+  selector.find(".locale-select-" + locale).hide()
+  moment.lang locale
   if selector
     selector.find("[data-t]").each ->
       $(this).html t($(this).data("t"), $(this).data("tAttributes"))
@@ -74,8 +75,32 @@
     $("*[data-time]").each ->
       $(this).text moment($(this).data("time")).format($(this).data("timeFormat") or "dd D MMM HH:MM")
 
-  $(".datepicker").datepicker "option", $.datepicker.regional[$locale]
+  $(".datepicker").datepicker "option", $.datepicker.regional[locale] if $.fn.datepicker
+  if $.fn.pickadate
+    datepicker_object = $('.datepicker')
+    datepicker_object.pickadate('stop') if datepicker_object.data('pickadate')
+    $.extend( $.fn.pickadate.defaults, $pickadate_translations[locale] )
+    $('.pickadate-display').remove()
+    window.pickadate_options ||= {}
+    datepicker_object.pickadate(window.pickadate_options)
+    datepicker_object.change()
 
+
+@setupTranslations = (options = {})->
+  locale = options.locale || Qstorage.getItem('locale') || 'en'
+  if $.fn.pickadate
+    $('.datepicker').change ->
+      input = $(@)
+      input.next().remove() if input.next().hasClass('pickadate-display')
+      display_format = $pickadate_translations[$locale].displayFormat
+      display_date = input.data('pickadate').get('select', display_format)
+      display_date = ' '+display_date # add space between the icon and the date
+      display_tag = $('<span></span>').addClass('pickadate-display').append('<span class="fa fa-calendar fa-lg"></span>').append($('<span></span>').text(display_date))
+      #display_tag.click (e)->(e.preventDefault();input.click().focus();false )
+      display_tag.click (e)->(e.preventDefault();input.pickadate('open');false )
+      $(@).after(display_tag)
+  setLocale(locale)
+  $('.datepicker').change().hide()
 $transformation_mappings =
   downcase: "toLowerCase"
   upcase: "toUpperCase"

app/assets/javascripts/user/application.js.erb

@@ -196,22 +196,6 @@ $(function(){
     Qstorage.removeItem('list_closed');
   }
   setTranslations();
-  $('#toggle-side-menu').click(function(){
-    var body = $('body');
-    var menu = $('#side-menu-container');
-    if(menu.is(':visible')){
-      body.animate({paddingLeft: 0});
-      menu.animate({width: 0}, function(){$(this).hide()});
-
-    }else{
-      body.animate({paddingLeft: '222px'});
-      menu.show().animate({width: '222px'});
-    }
-    //if(body.css('margin-left') && body.css('margin-left') != '0px'){
-    //  body.animate('margin-left', '0')
-    //}else{
-    //}
-  });
 });
 function setLocale(locale){
   Qstorage.setItem('locale', locale);

app/assets/stylesheets/supplier/foundation1/application.css

@@ -0,0 +1,9 @@
+/*
+*= require ./foundation_and_overrides
+*= require 'jquery-ui-1.8.23.custom.css'
+*= require qtip
+*= require_directory ../base1-shared
+*= require pickdate
+*= require_directory .
+*= require_self
+*/

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

@@ -0,0 +1,87 @@
+@import constants
+@import font-awesome
+@import foundation_and_overrides
+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: 49px
+  padding-right: 52px 
+  .menu-content
+    background-color: white
+    background-repeat: repeat-x
+    background-position: center bottom
+    background-image: image-url('theme1/button-bar-middle.png')
+    //min-height: 61px
+    height: 100%
+    section
+      height: 52px
+      line-height: 48px
+      &.main-buttons
+        float: left
+        @media #{$medium-up}
+          padding-left: 14px
+      &.extra-info
+        float: right
+        .supplier-info-row
+          float: right
+          clear: right
+          line-height: 27px
+          padding-right: 7px
+        .table-number
+          display: inline-block
+          //text-transform: lowercase
+        .supplier-name
+          display: inline-block
+        .supplier-orders-placed-count
+          display: inline-block
+          margin-right: 15px
+        .supplier-orders-in-process-count
+          display: inline-block
+  .menu-list-item
+    margin-left: 20px
+    cursor: pointer
+    border: 0.08em solid #eee
+    padding: 5px
+    border-radius: 0.1em
+    display: inline-block
+    line-height: 1em
+    margin-top: 10px
+    color: #999
+    &.active
+      color: yellow
+      border-color: yellow
+      &.callout
+        color: #f70
+        border-color: #f70
+    @media #{$medium-only}
+      margin-left: 8px
+    @media #{$small-only}
+      margin-left: 5px
+.orders-placed-count-icon
+  @extend .fa
+  @extend .fa-clock-o
+  @extend .fa-lg
+  margin-left: 3px
+.orders-in-process-count-icon
+  @extend .fa
+  @extend .fa-check
+  @extend .fa-lg
+  margin-left: 3px
+.toggle-side-menu
+  position: absolute
+  width: 28px
+  height: 28px
+  color: white
+  left: 0
+  cursor: pointer
+  z-index: 100
+  &.open
+    color: white
+  span
+    @extend .fa
+    @extend .fa-bars
+    @extend .fa-lg

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

@@ -0,0 +1,13 @@
+@import constants
+aside.side-menu
+  background-color: #444
+  position: fixed
+  display: none
+  left: -222px
+  top: 0
+  width: 222px
+  height: 100%
+  > ul
+    list-style: none
+    a
+      color: white

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

@@ -0,0 +1,30 @@
+@import font-awesome
+#product-category-list
+  list-style: none
+  li
+    clear: both
+    margin-bottom: 8px
+    .name
+      padding: 5px 5px
+#week_days-group
+  .btn
+    opacity: 0.4
+    &.active
+      opacity: 1
+#full_day-controller
+  @extend .fa
+  @extend .fa-clock-o
+  margin: 0 10px
+  color: #f70
+  &.active
+    // Full day active is not special, highlight when not active,
+    // because it indicates the being active of a time range
+    color: #444
+    
+#sub-day-container
+  display: inline-block
+  &.hide
+    display: none
+  select
+    width: 70px
+    margin-right: 14px

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

@@ -0,0 +1,17 @@
+.products_preview-date
+  .products_preview-time-container
+  float: left
+  input
+    width: 120px
+.products_preview-hour
+  float: left
+  margin-left: 10px
+  select
+    width: 50px
+  &:after
+    content: " :"
+.products_preview-minute
+  float: left
+  margin-left: 10px
+  select
+    width: 50px

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

@@ -0,0 +1,56 @@
+$side-spacing: 0px
+@import constants
+@import ./foundation_and_overrides
+html
+body
+  label
+    &.number
+      display: inline
+      padding: 4px 10px
+  input
+    &.number
+      width: 40px
+.supplier-is-closed
+  .alert
+    form
+      margin: 0
+.location_picker_search
+  float: left
+.draggable
+  cursor: move !important
+input.dimension
+  width: 40px
+.location_picker_map
+  width: 600px
+  height: 500px
+  border: 1px solid black
+  padding: 2px
+  display: inline-block
+  float: left
+  clear: left
+  img
+    max-width: none
+  label
+    width: auto
+    display:inline
+.handle
+  cursor: move
+  font-size: 0.8em
+  color: #777
+form
+  &.form-inline
+    display: inline-block
+    padding: 4px
+.clear
+  clear: both
+body
+  background-image: $wood
+  background-repeat: repeat
+main.main-section
+  +panel($bg:rgba(200,200,200,0.8))
+  min-height: 100%
+  padding: 0
+  margin: 0
+
+.hide, .hidden
+  display: none

app/controllers/suppliers/tables_controller.rb

@@ -88,7 +88,7 @@ module Suppliers
     end
 
     def qr_codes
-      @tables = current_supplier.tables
+      @tables = Table.for_supplier(current_supplier, from_number: params[:from_number], to_number: params[:to_number])
       @tables.select!{|t| t.section_id == params[:section_id]} if params[:section_id].present?
       render layout: 'qr_sheet'
     end

app/views/layouts/tablet.html.slim

@@ -10,69 +10,42 @@ html lang="en"
     /! Le HTML5 shim, for IE6-8 support of HTML elements
     /[if lt IE 9]
       = javascript_include_tag "http://html5shim.googlecode.com/svn/trunk/html5.js"
-    = stylesheet_link_tag "supplier/wood1/application", media: "all"
+    = stylesheet_link_tag "supplier/foundation1/application", media: "all"
     link href="/favicon.ico" rel="shortcut icon"
     = render 'suppliers/application/head'
-    = javascript_include_tag "supplier/application"
+    = javascript_include_tag "supplier/foundation1/application"
     = yield :head
 
   body
-    .navbar.navbar-fixed-top.navbar-inverse
-      .navbar-inner
-        .container
-          a.btn.btn-navbar data-target=".nav-collapse" data-toggle="collapse"
-            span.icon-bar
-            span.icon-bar
-            span.icon-bar
-          a.brand href=supplier_root_path = image_tag 'icons/logo-small.png', alt: application_title
-          ul.nav.pull-right
-            li.dropdown
-              a.dropdown-toggle href="#" data-toggle="dropdown"
-                = current_supplier.name.presence || current_supplier.email
-                b.caret
-                ul.dropdown-menu
-                  - if current_supplier.open?
-                    li
-                      = form_tag supplier_mark_as_closed_path do
-                        = submit_tag t('supplier.close'), class: [:btn, 'btn-danger'], onClick: %|$(this).parents('form').submit()|
-                  li= link_to 'Settings', supplier_settings_path
-                  li= link_to 'Logout', destroy_supplier_session_path, method: :delete
-          .container.nav-collapse
-            ul.nav#top-navigation-list
-              //li= link_to t('supplier.menu.active_orders', orders: Order.model_name.human_plural), supplier_active_orders_path
-              //li= link_to t('supplier.menu.active_lists', lists: List.model_name.human_plural), supplier_active_lists_path
-              li= link_to ProductCategory.model_name.human_plural, suppliers_product_categories_path, data: {t: 'models.plural.product_category'}
-              li= link_to Product.model_name.human_plural, suppliers_products_path, data: {t: 'models.plural.product'}
-              li= link_to Section.model_name.human_plural, suppliers_sections_path, data: {t: 'models.plural.section'}
-              li= link_to Table.model_name.human_plural, suppliers_tables_path, data: {t: 'models.plural.table'}
-              li= link_to List.model_name.human_plural, suppliers_lists_path, data: {t: 'models.plural.list'}
-    .container
-      .content.main-content
-        - if flash[:alert].present?
-          .alert.alert-error
-            a.close data-dismiss="alert" ×
-            div= flash[:alert]
-        - if flash[:notice].present?
-          .alert.alert-success
-            a.close data-dismiss="alert" ×
-            div= flash[:notice]
-        - if current_supplier.closed?
-          .row.supplier-is-closed
+    = render 'suppliers/application/top_menu'
+    main.main-section
+      .container
+        .content.main-content
+          - if flash[:alert].present?
+            .alert.alert-error
+              a.close data-dismiss="alert" ×
+              div= flash[:alert]
+          - if flash[:notice].present?
+            .alert.alert-success
+              a.close data-dismiss="alert" ×
+              div= flash[:notice]
+          - if current_supplier.closed?
+            .row.supplier-is-closed
+              .span12
+                .alert.alert-block
+                  button.close{data-dismiss="alert"} x
+                  p = t('supplier.you_are_currently_closed_alert')
+                  = form_tag supplier_mark_as_open_path do
+                    = submit_tag t('supplier.mark_as_open_button'), class: [:btn, 'btn-primary']
+          .row
             .span12
-              .alert.alert-block
-                button.close{data-dismiss="alert"} x
-                p = t('supplier.you_are_currently_closed_alert')
-                = form_tag supplier_mark_as_open_path do
-                  = submit_tag t('supplier.mark_as_open_button'), class: [:btn, 'btn-primary']
-        .row
-          .span12
-            = content_for?(:content) ? yield(:content) : yield
-        - if content_for?(:row)
-          .row= yield :row
-        .row
-          .span12
-            #ember-app-container
-    script#alert-template[type="text/html"]= mustache_template 'supplier/alert'
-    = yield :footer
-    javascript:
-      jQuery(function(){#{onload_javascript}});
+              = content_for?(:content) ? yield(:content) : yield
+          - if content_for?(:row)
+            .row= yield :row
+          .row
+            .span12
+              #ember-app-container
+      script#alert-template[type="text/html"]= mustache_template 'supplier/alert'
+      = yield :footer
+      javascript:
+        jQuery(function(){#{onload_javascript}});

app/views/suppliers/application/_top_menu.html.slim

@@ -0,0 +1,63 @@
+header.top-menu
+  .toggle-side-menu
+    span
+  .menu-content
+    section.main-buttons
+      //li= link_to t('supplier.menu.active_orders', orders: Order.model_name.human_plural), supplier_active_orders_path
+      //li= link_to t('supplier.menu.active_lists', lists: List.model_name.human_plural), supplier_active_lists_path
+      = link_to image_tag('icons/logo-small.png'), supplier_root_path
+      = link_to ProductCategory.model_name.human_plural, suppliers_product_categories_path, data: {t: 'models.plural.product_category'}
+      = link_to Product.model_name.human_plural, suppliers_products_path, data: {t: 'models.plural.product'}
+      = link_to Section.model_name.human_plural, suppliers_sections_path, data: {t: 'models.plural.section'}
+      = link_to Table.model_name.human_plural, suppliers_tables_path, data: {t: 'models.plural.table'}
+      = link_to List.model_name.human_plural, suppliers_lists_path, data: {t: 'models.plural.list'}
+    section.extra-info
+      .supplier-info-row
+        .supplier-name= current_supplier.name.presence || current_supplier.email
+        .table-number
+      .supplier-info-row
+        .counter.supplier-orders-placed-count
+          = current_supplier.orders_placed_count
+          span.orders-placed-count-icon
+        .counter.supplier-orders-in-process-count
+          = current_supplier.orders_in_process_count
+          span.orders-in-process-count-icon
+aside.side-menu
+  ul
+    li
+      label Menu
+    - if current_supplier.open?
+      li
+        = form_tag supplier_mark_as_closed_path do
+          = submit_tag t('supplier.close'), class: [:btn, 'btn-danger'], onClick: %|$(this).parents('form').submit()|
+    li= link_to 'Settings', supplier_settings_path
+    li= link_to 'Logout', destroy_supplier_session_path, method: :delete
+/.navbar.navbar-fixed-top.navbar-inverse
+  .navbar-inner
+    .container
+      a.btn.btn-navbar data-target=".nav-collapse" data-toggle="collapse"
+        span.icon-bar
+        span.icon-bar
+        span.icon-bar
+      a.brand href=supplier_root_path = image_tag 'icons/logo-small.png', alt: application_title
+      ul.nav.pull-right
+        li.dropdown
+          a.dropdown-toggle href="#" data-toggle="dropdown"
+            = current_supplier.name.presence || current_supplier.email
+            b.caret
+            ul.dropdown-menu
+              - if current_supplier.open?
+                li
+                  = form_tag supplier_mark_as_closed_path do
+                    = submit_tag t('supplier.close'), class: [:btn, 'btn-danger'], onClick: %|$(this).parents('form').submit()|
+              li= link_to 'Settings', supplier_settings_path
+              li= link_to 'Logout', destroy_supplier_session_path, method: :delete
+      .container.nav-collapse
+        ul.nav#top-navigation-list
+          //li= link_to t('supplier.menu.active_orders', orders: Order.model_name.human_plural), supplier_active_orders_path
+          //li= link_to t('supplier.menu.active_lists', lists: List.model_name.human_plural), supplier_active_lists_path
+          li= link_to ProductCategory.model_name.human_plural, suppliers_product_categories_path, data: {t: 'models.plural.product_category'}
+          li= link_to Product.model_name.human_plural, suppliers_products_path, data: {t: 'models.plural.product'}
+          li= link_to Section.model_name.human_plural, suppliers_sections_path, data: {t: 'models.plural.section'}
+          li= link_to Table.model_name.human_plural, suppliers_tables_path, data: {t: 'models.plural.table'}
+          li= link_to List.model_name.human_plural, suppliers_lists_path, data: {t: 'models.plural.list'}

app/views/suppliers/product_categories/_form.html.slim

@@ -18,7 +18,7 @@
           button.week-day-toggle.btn type="button" data-day=day_name data-t="product_category.week_days.abbreviation.#{day_name}"
 
 
-      span#full_day-controller.icon.icon-time
+      span#full_day-controller
       #sub-day-container.hide
         = f.input_field :start_from, as: :select, collection: (1..24).map{|h| ["#{h}:00", h*60]}
         = f.input_field :end_on, as: :select, collection: (1..24).map{|h| ["#{h}:00", h*60]}

app/views/suppliers/product_categories/index.html.slim

@@ -5,7 +5,7 @@
     ul#product-category-list data-update-url=sort_suppliers_product_categories_path
       - for product_category in @product_categories
         = content_tag_for :li, product_category do
-          span.handle.icon-move.icon-white
+          span.handle.fa.fa-arrows
           span.name= link_to product_category.name, [:suppliers, product_category]
           span= product_category.visible_on
           .pull-right.actions

app/views/suppliers/tables/index.html.slim

@@ -33,4 +33,4 @@ div.page-header= title :index, model_class
 .form-actions
   = link_to t("helpers.links.new"), new_suppliers_table_path, class: 'btn btn-primary', data: {t: 'helpers.links.new'}
   '
-  = link_to t('supplier.tables.qr_codes.link'), qr_codes_suppliers_tables_path, class: 'btn btn-info', data: {t: 'tables.qr_codes.link'}
+  = link_to t('supplier.tables.qr_codes.link'), qr_codes_suppliers_tables_path(params.slice(:from_number, :to_number)), class: 'btn btn-info', data: {t: 'tables.qr_codes.link'}, target: :_blank