Add touch events

app/assets/javascripts/shared-ember-helpers/translation.js.coffee

@@ -1,4 +1,4 @@
-Ember.Handlebars.registerHelper 't', (path, params..., options)->
+Ember.Handlebars.helper 't', (path, params..., options)->
   text = t(path)
   tag = if options.hash.bare then text else "<span data-t='#{path}' data-t-attributes='{}'>#{text}</span>"
-  new Handlebars.SafeString tag
+  tag.htmlSafe()

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

@@ -1,4 +1,5 @@
 #= require_self
+#= require jquery.touchSwipe
 #= require handlebars
 #= require ember
 #= require ember-data

app/assets/javascripts/user/app/templates/application.emblem

@@ -1,5 +1,4 @@
-header.top-menu
-  .toggle-side-menu: span
+.top-menu
   .top-menu-bar
     .menu-content
       section.main-buttons
@@ -30,7 +29,8 @@ header.top-menu
         .counter.supplier-orders-in-process-count
           = list.supplier.orders_in_process_count
           span.orders-in-process-count-icon
-aside.side-menu
+.side-menu
+  .toggle-side-menu: span
   ul
     li.title: h3 Menu
     li
@@ -69,7 +69,7 @@ aside.side-menu
       a{action "openDebugger"}
         span.fa.fa-wrench.fa-lg
         span Debugger
-main.main-section
+.main-section
   .main-section-content
     if notice
       #notice.alert-box{action "clearNotice"} data-alert=true

app/assets/javascripts/user/app/views/application_view.js.coffee

@@ -1,13 +1,16 @@
 App.ApplicationView = Ember.View.extend
   didInsertElement: ->
-    $('.main-section').css 'min-height', $(window).height() - $('.top-menu').outerHeight()
-
-    $('.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')
+    # Side menu collapsing
+    targets = @$('.side-menu')
+    targets.addClass('closed').click -> targets.toggleClass('active').addClass('clicked').toggleClass('closed')
+    controller = @get('controller')
+    @$('.main-section').swipe
+      swipe: (event, direction, distance, duration, fingerCount) ->
+        if fingerCount is 2
+          if direction is "right"
+            targets.addClass('active clicked').removeClass('closed')
+          if direction is "left"
+            targets.removeClass('active').addClass('closed')
+        if fingerCount is 3 and direction is "up"
+          controller.transitionToRoute "settings"
+      fingers: 'all'

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

@@ -3,13 +3,7 @@
 #= require faye
 #= require moment
 #= require translations
-#= require_directory .
 #= require_self
-#
-#  (($) ->
-#    origAppend = $.fn.append
-#    $.fn.append = -> origAppend.apply(@, arguments).trigger("append")
-#  )(jQuery)
 
 @Qstorage = localStorage
 

app/assets/stylesheets/user/foundation/_structure.css.sass

@@ -1,6 +1,8 @@
 html, body
   margin: 0
   padding: 0
+  //width: 100%
+  //height: 100%
 body
   overflow-x: hidden
   @media #{$small-only}
@@ -9,14 +11,23 @@ body
   background-image: image-url('theme1/wall-bg.jpg')
   background-repeat: repeat
   padding-top: $top-menu-height
+  //height: 100%
+  > .ember-view
+    // application-view
+    //height: 100%
 
-main.main-section
+.main-section
   +panel($bg:rgba(200,200,200,0.8))
-  // height: 100%
+  position: absolute
   padding: 0
   margin: 0
+  width: 100%
+  top: $top-menu-height
+  bottom: 0
+  overflow-y: scroll
+  -webkit-overflow-scrolling: touch
   .main-section-content
-    min-height: calc(100% - #{$top-menu-height})
+    //nothing
 span.icon
   @extend .fa
   @extend .fa-lg

app/assets/stylesheets/user/foundation/components/_menu_main.css.sass

@@ -1,8 +1,8 @@
-header.top-menu
+.top-menu
   // Fixed styling rules copied from foundation top-menu fixed
   width: 100%
   #{$default-float}: 0
-  position: fixed
+  position: absolute
   top: 0
   z-index: 99
 

app/assets/stylesheets/user/foundation/components/_menu_side.css.sass

@@ -1,14 +1,23 @@
-aside.side-menu
+$side-menu-width: 222px
+.side-menu
   background-color: #444
   position: fixed
-  display: none
-  left: -222px
+  //display: none
+  left: -$side-menu-width
   top: 0
-  width: 222px
+  width: $side-menu-width
   height: 100%
   z-index: 157
   opacity: 0.9
   border-right: 2px solid black
+  &.active
+    left: 0
+    +animation(sideMenuActive 0.5s)
+    .toggle-side-menu
+      right: 5px
+  &.closed
+    &.clicked
+      +animation(sideMenuClosed 0.3s)
   > ul
     list-style: none
     a
@@ -42,18 +51,27 @@ aside.side-menu
   a.active
     color: $current-color
 
-.toggle-side-menu
-  position: absolute
-  width: 28px
-  height: 28px
-  color: white
-  left: 0
-  cursor: pointer
-  z-index: 100
-  font-size: 1.6em
-  &.open
+  .toggle-side-menu
+    position: absolute
+    width: 28px
+    height: 28px
     color: white
-  span
-    @extend .fa
-    @extend .fa-lg
-    @extend .fa-bars
+    right: -30px
+    cursor: pointer
+    //z-index: 158
+    font-size: 1.6em
+    span
+      @extend .fa
+      @extend .fa-lg
+      @extend .fa-bars
+
++keyframes(sideMenuActive)
+  from
+    left: -$side-menu-width
+  to
+    left: 0
++keyframes(sideMenuClosed)
+  from
+    left: 0
+  to
+    left: -$side-menu-width