Главная Обзор Помощь
Вход
taddeus
/
tvgids
1
0
Ответвить 0
Файлы Задачи 0 Запросы на слияние 0 Вики
Просмотр исходного кода

Navbar and timeline now have fixed positions

Taddeus Kroes 12 лет назад
Родитель
6be5b093b7
Сommit
5b729ea02c
3 измененных файлов с 37 добавлено и 17 удалено
Единый вид Показать статистику Diff
  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 #yesterday': -> @loadDay(-1)
 
         'click #today': -> @loadDay(0)
 
         'click #today': -> @loadDay(0)
 
         'click #tomorrow': -> @loadDay(1)
 
         'click #tomorrow': -> @loadDay(1)
 
+        'scroll': 'moveTimeline'
 
+
 
+    moveTimeline: ->
 
+        if @$el.scrollTop() != @prevScrollTop
 
+            @prevScrollTop = @$el.scrollTop()
 
+            @$('.timeline').css('top', (@$el.scrollTop() + 38) + 'px')
 
 
 
     initialize: ->
 
     initialize: ->
 
-        @updateIndicator()
 
-        @centerIndicator()
 
-        @listenTo(Channels, 'reset', @addChannels)
 
+        @prevScrollTop = null
 
 
 
-        Channels.fetch()
 
+        @listenTo(Channels, 'reset', @addChannels)
 
         @listenTo(Settings, 'change:day', @fetchPrograms)
 
         @listenTo(Settings, 'change:day', @fetchPrograms)
 
 
 
+        @updateIndicator()
 
+        @centerIndicator()
 
+        Channels.fetch()
 
         setInterval((=> @updateIndicator()), 3600000 / HOUR_WIDTH)
 
         setInterval((=> @updateIndicator()), 3600000 / HOUR_WIDTH)
 
 
 
     addChannels: () ->
 
     addChannels: () ->
 
@@ -181,7 +188,7 @@ AppView = Backbone.View.extend(
 
         @$('.indicator').css('left', time2px(seconds_today(Date.now())) + 'px')
 
         @$('.indicator').css('left', time2px(seconds_today(Date.now())) + 'px')
 
 
 
     centerIndicator: ->
 
     centerIndicator: ->
 
-        @el.scrollLeft = @$('.indicator').position().left - @$el.width() / 2
 
+        @$el.scrollLeft(@$('.indicator').position().left - @$el.width() / 2)
 
 
 
     fetchPrograms: ->
 
     fetchPrograms: ->
 
         Channels.fetchPrograms(Settings.get('day'))
 
         Channels.fetchPrograms(Settings.get('day'))

+ 9 - 8
index.html
Просмотреть файл 

@@ -6,12 +6,9 @@
 
     </head>
 
     </head>
 
     <body>
 
     <body>
 
         <div id="guide" class="guide">
 
         <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="timeline">
 
                 <div class="hour">00:00</div>
 
                 <div class="hour">00:00</div>
 
                 <div class="hour">01:00</div>
 
                 <div class="hour">01:00</div>
 
@@ -38,8 +35,12 @@
 
                 <div class="hour">22:00</div>
 
                 <div class="hour">22:00</div>
 
                 <div class="hour">23:00</div>
 
                 <div class="hour">23:00</div>
 
             </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>
 
         </div>
 
 
 
         <script src="lib/jquery-1.10.2.min.js" type="text/javascript"></script>
 
         <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
 
     margin: 0
 
     padding: 0
 
     padding: 0
 
 
 
-
 
 .navbar
 
 .navbar
 
     background-color: #232323
 
     background-color: #232323
 
-    width: 24 * $hour-width
 
+    width: 100%
 
+    position: fixed
 
+    top: 0
 
 
 
     .navitem
 
     .navitem
 
         color: #9a9a9a
 
         color: #9a9a9a
 
@@ -30,13 +31,23 @@ html, body
 
 
 
 .guide
 
 .guide
 
     width: 100%
 
     width: 100%
 
-    overflow-x: scroll
 
     height: 100%
 
     height: 100%
 
+    overflow-x: scroll
 
     position: relative
 
     position: relative
 
 
 
+.timeline-bg
 
+    width: 100%
 
+    height: 21px
 
+    top: 38px
 
+    position: fixed
 
+    background-color: #fdfdfd
 
+
 
 .timeline
 
 .timeline
 
     width: 24 * $hour-width
 
     width: 24 * $hour-width
 
     height: 26px
 
     height: 26px
 
+    position: absolute
 
+    top: 38px
 
+    background-color: #fdfdfd
 
 
 
     .hour
 
     .hour
 
         font: normal 13px Helvetica
 
         font: normal 13px Helvetica
 
@@ -52,6 +63,7 @@ html, body
 
     //    text-align: center
 
     //    text-align: center
 
 
 
 .channels
 
 .channels
 
+    margin-top: 66px
 
     width: 24 * $hour-width
 
     width: 24 * $hour-width
 
     overflow: hidden
 
     overflow: hidden
 
 
 
@@ -82,5 +94,5 @@ html, body
 
     position: absolute
 
     position: absolute
 
     width: 1px
 
     width: 1px
 
     height: 100%
 
     height: 100%
 
-    top: 64px
 
+    top: 66px
 
     background-color: $indicator-color
 
     background-color: $indicator-color