make the back to top fixed and fluidify the follow scrolls

Fixes #89
This commit is contained in:
Damien Mathieu 2013-12-05 16:01:51 +01:00
parent 07e0620b23
commit a431b68c28
5 changed files with 67 additions and 53 deletions

View File

@ -45,8 +45,9 @@ $.extend Travis.Tailing.prototype,
offset = $(window).scrollTop() - $('#log').offset().top offset = $(window).scrollTop() - $('#log').offset().top
max = $('#log').height() - $('#tail').height() + 5 max = $('#log').height() - $('#tail').height() + 5
offset = max if offset > max offset = max if offset > max
if offset > 0
tail.css(top: offset - 2) if offset > 0
else tail.css(position: 'fixed', right: 32)
tail.css(top: 0) else
tail.css(position: 'absolute', right: 2)

View File

@ -1,7 +1,14 @@
<div id="log-container"> <div id="log-container">
<a href="#" id="tail" {{action "toggleTailing" target="view"}}> <a href="#" id="tail" {{action "toggleTailing" target="view"}}>
<span class="status"></span> <span class="status"></span>
<label>Follow logs</label>
<label>
{{#if view.job.isFinished}}
Scroll to end of logs
{{else}}
Follow logs
{{/if}}
</label>
</a> </a>
<pre id="log" class="ansi"></pre> <pre id="log" class="ansi"></pre>

View File

@ -97,6 +97,7 @@ Travis.reopen
window.history.pushState({ path: path }, null, path); window.history.pushState({ path: path }, null, path);
@set('controller.lineNumber', number) @set('controller.lineNumber', number)
actions:
toTop: () -> toTop: () ->
$(window).scrollTop(0) $(window).scrollTop(0)

View File

@ -86,7 +86,8 @@ pre#log
#log-container #log-container
position: relative position: relative
#log-container #tail #log-container
#tail
z-index: 99 z-index: 99
position: absolute position: absolute
display: block display: block
@ -127,3 +128,16 @@ pre#log
&.active .status &.active .status
background-color: #6b0 background-color: #6b0
.to-top
position: fixed
display: inline-block
bottom: 5px
right: 35px
width: 50px
float: right
margin-right: 2px
padding-right: 16px
text-align: right
color: #999
background: inline-image('ui/to-top.png') no-repeat right 6px

View File

@ -3,12 +3,3 @@
// float: left // float: left
margin-top: 0 margin-top: 0
color: #999 color: #999
.to-top
display: inline-block
width: 50px
float: right
margin-right: 2px
padding-right: 16px
text-align: right
color: #999
background: inline-image('ui/to-top.png') no-repeat right 6px