Просмотр исходного кода

Navbar and timeline now have fixed positions

Taddeus Kroes 12 лет назад
Родитель
Сommit
5b729ea02c
3 измененных файлов с 37 добавлено и 17 удалено
  1. 12 5
      guide.coffee
  2. 9 8
      index.html
  3. 16 4
      style.sass

+ 12 - 5
guide.coffee

@@ -151,15 +151,22 @@ AppView = Backbone.View.extend(
         'click #yesterday': -> @loadDay(-1)
         'click #today': -> @loadDay(0)
         'click #tomorrow': -> @loadDay(1)
+        'scroll': 'moveTimeline'
+
+    moveTimeline: ->
+        if @$el.scrollTop() != @prevScrollTop
+            @prevScrollTop = @$el.scrollTop()
+            @$('.timeline').css('top', (@$el.scrollTop() + 38) + 'px')
 
     initialize: ->
-        @updateIndicator()
-        @centerIndicator()
-        @listenTo(Channels, 'reset', @addChannels)
+        @prevScrollTop = null
 
-        Channels.fetch()
+        @listenTo(Channels, 'reset', @addChannels)
         @listenTo(Settings, 'change:day', @fetchPrograms)
 
+        @updateIndicator()
+        @centerIndicator()
+        Channels.fetch()
         setInterval((=> @updateIndicator()), 3600000 / HOUR_WIDTH)
 
     addChannels: () ->
@@ -181,7 +188,7 @@ AppView = Backbone.View.extend(
         @$('.indicator').css('left', time2px(seconds_today(Date.now())) + 'px')
 
     centerIndicator: ->
-        @el.scrollLeft = @$('.indicator').position().left - @$el.width() / 2
+        @$el.scrollLeft(@$('.indicator').position().left - @$el.width() / 2)
 
     fetchPrograms: ->
         Channels.fetchPrograms(Settings.get('day'))

+ 9 - 8
index.html

@@ -6,12 +6,9 @@
     </head>
     <body>
         <div id="guide" class="guide">
-            <div class="navbar">
-                <a href="javascript:void(0);" id="yesterday" class="navitem">Gisteren</a>
-                <a href="javascript:void(0);" id="today" class="navitem active">Vandaag</a>
-                <a href="javascript:void(0);" id="tomorrow" class="navitem">Morgen</a>
-                <a href="settings.html" class="navitem">Selecteer zenders</a>
-            </div>
+            <div class="channels"></div>
+            <div class="indicator"></div>
+            <div class="timeline-bg"></div>
             <div class="timeline">
                 <div class="hour">00:00</div>
                 <div class="hour">01:00</div>
@@ -38,8 +35,12 @@
                 <div class="hour">22:00</div>
                 <div class="hour">23:00</div>
             </div>
-            <div class="channels"></div>
-            <div class="indicator"></div>
+        </div>
+        <div class="navbar">
+            <a href="javascript:void(0);" id="yesterday" class="navitem">Gisteren</a>
+            <a href="javascript:void(0);" id="today" class="navitem active">Vandaag</a>
+            <a href="javascript:void(0);" id="tomorrow" class="navitem">Morgen</a>
+            <a href="settings.html" class="navitem">Selecteer zenders</a>
         </div>
 
         <script src="lib/jquery-1.10.2.min.js" type="text/javascript"></script>

+ 16 - 4
style.sass

@@ -9,10 +9,11 @@ html, body
     margin: 0
     padding: 0
 
-
 .navbar
     background-color: #232323
-    width: 24 * $hour-width
+    width: 100%
+    position: fixed
+    top: 0
 
     .navitem
         color: #9a9a9a
@@ -30,13 +31,23 @@ html, body
 
 .guide
     width: 100%
-    overflow-x: scroll
     height: 100%
+    overflow-x: scroll
     position: relative
 
+.timeline-bg
+    width: 100%
+    height: 21px
+    top: 38px
+    position: fixed
+    background-color: #fdfdfd
+
 .timeline
     width: 24 * $hour-width
     height: 26px
+    position: absolute
+    top: 38px
+    background-color: #fdfdfd
 
     .hour
         font: normal 13px Helvetica
@@ -52,6 +63,7 @@ html, body
     //    text-align: center
 
 .channels
+    margin-top: 66px
     width: 24 * $hour-width
     overflow: hidden
 
@@ -82,5 +94,5 @@ html, body
     position: absolute
     width: 1px
     height: 100%
-    top: 64px
+    top: 66px
     background-color: $indicator-color