Skip to content

T
tvgids
Commit 5b729ea0 authored by Taddeüs Kroes's avatar Taddeüs Kroes
Browse files
Options

Navbar and timeline now have fixed positions

parent 6be5b093
Show whitespace changes
Inline Side-by-side
Showing with 37 additions and 17 deletions
guide.coffee
View file @ 5b729ea0
...@@ -151,15 +151,22 @@ AppView = Backbone.View.extend( ...@@ -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() @prevScrollTop = null
@centerIndicator()
@listenTo(Channels, 'reset', @addChannels)
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( ...@@ -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'))
......
index.html
View file @ 5b729ea0
...@@ -6,12 +6,9 @@ ...@@ -6,12 +6,9 @@
</head> </head>
<body> <body>
<div id="guide" class="guide"> <div id="guide" class="guide">
<div class="navbar"> <div class="channels"></div>
<a href="javascript:void(0);" id="yesterday" class="navitem">Gisteren</a> <div class="indicator"></div>
<a href="javascript:void(0);" id="today" class="navitem active">Vandaag</a> <div class="timeline-bg"></div>
<a href="javascript:void(0);" id="tomorrow" class="navitem">Morgen</a>
<a href="settings.html" class="navitem">Selecteer zenders</a>
</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 @@ ...@@ -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>
<div class="indicator"></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>
......
style.sass
View file @ 5b729ea0
...@@ -9,10 +9,11 @@ html, body ...@@ -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 ...@@ -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 ...@@ -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 ...@@ -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
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment