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
Hide 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(
'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'))
......
index.html
View file @ 5b729ea0
......@@ -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>
......
style.sass
View file @ 5b729ea0
......@@ -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
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