Added touch scrolling for table/phone

guide.coffee

@@ -170,7 +170,7 @@ ProgramView = Backbone.View.extend(
 )
 
 ChannelLabelsView = Backbone.View.extend(
-    el: $('#guide .channel-labels')
+    el: $('#channel-labels')
 
     initialize: (options) ->
         @listenTo(Channels, 'reset', @addChannels)
@@ -235,6 +235,12 @@ AppView = Backbone.View.extend(
         @labelview = new ChannelLabelsView(app: @)
         @detailsview = new ProgramDetailsView(app: @)
 
+        #@$el.smoothTouchScroll(
+        #    scrollableAreaClass: 'channels'
+        #    scrollWrapperClass: 'guide'
+        #)
+        #@iscroll = new iScroll('guide', vScroll: false, hScrollbar: true)
+
         $('#beforeyesterday').click(-> Settings.set(day: -2))
         $('#yesterday').click(-> Settings.set(day: -1))
         $('#today').click(-> Settings.set(day: 0))

index.php

@@ -18,7 +18,6 @@ function getwday($day) {
             <div class="channels">
             </div>
             <div class="indicator"></div>
-            <div class="channel-labels"></div>
             <div class="timeline-bg"></div>
             <div class="timeline">
                 <div class="hour">00:00</div>
@@ -47,6 +46,7 @@ function getwday($day) {
                 <div class="hour">23:00</div>
             </div>
         </div>
+        <div id="channel-labels" class="channel-labels"></div>
 
         <div id="loading-screen" class="loading-screen">
             <div class="bg"></div>
@@ -87,6 +87,12 @@ function getwday($day) {
         <script src="lib/underscore-min.js" type="text/javascript"></script>
         <script src="lib/backbone-min.js" type="text/javascript"></script>
 
+        <!--<script src="lib/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
+        <script src="lib/jquery.kinetic.min.js" type="text/javascript"></script>
+        <script src="lib/jquery.smoothTouchScroll.min.js" type="text/javascript"></script>
+
+        <script src="lib/iscroll-lite.js" type="text/javascript"></script>-->
+
         <script src="channels.js" type="text/javascript"></script>
         <script src="guide.js" type="text/javascript"></script>
     </body>

style.sass

@@ -40,6 +40,12 @@ html, body
     max-height: 100%
     overflow-x: scroll
     position: relative
+    -webkit-overflow-scrolling: touch
+
+    .scroll-wrapper
+        width: 100%
+        height: 100%
+        position: relative
 
 .timeline-bg
     width: 100%
@@ -136,7 +142,7 @@ html, body
 
 .channel-labels
     width: $channel-label-width - 2px
-    position: fixed
+    position: absolute
     top: $header-height
     left: 0
     border-right: 2px solid #fff