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);