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
max = $('#log').height() - $('#tail').height() + 5
offset = max if offset > max
if offset > 0
tail.css(top: offset - 2)
else
tail.css(top: 0)
if offset > 0
tail.css(position: 'fixed', right: 32)
else
tail.css(position: 'absolute', right: 2)

View File

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

View File

@ -97,8 +97,9 @@ Travis.reopen
window.history.pushState({ path: path }, null, path);
@set('controller.lineNumber', number)
toTop: () ->
$(window).scrollTop(0)
actions:
toTop: () ->
$(window).scrollTop(0)
noop: -> # TODO required?

View File

@ -86,44 +86,58 @@ pre#log
#log-container
position: relative
#log-container #tail
z-index: 99
position: absolute
display: block
top: 0
right: 2px
margin: 13px 10px 0 0
padding: 0 2px 0 3px
color: #666
text-shadow: 0px 1px 0px #fff
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
font-size: $font-size-tiny
line-height: 14px
text-decoration: none
white-space: nowrap
border: 1px solid #bbb
border-top-color: #ddd
border-bottom-color: #bbb
@include border-radius(8px)
@include background(linear-gradient(#fff, #e0e0e0))
#log-container
#tail
z-index: 99
position: absolute
display: block
top: 0
right: 2px
margin: 13px 10px 0 0
padding: 0 2px 0 3px
color: #666
text-shadow: 0px 1px 0px #fff
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
font-size: $font-size-tiny
line-height: 14px
text-decoration: none
white-space: nowrap
border: 1px solid #bbb
border-top-color: #ddd
border-bottom-color: #bbb
@include border-radius(8px)
@include background(linear-gradient(#fff, #e0e0e0))
label
display: none
cursor: pointer
&:hover
padding: 1px 4px 1px 6px
label
display: inline
display: none
cursor: pointer
.status
&:hover
padding: 1px 4px 1px 6px
label
display: inline
.status
display: inline-block
margin-right: 1px
width: 8px
height: 8px
background-color: #aaa
@include border-radius(4px)
@include box-shadow(white 1px 1px 2px)
&.active .status
background-color: #6b0
.to-top
position: fixed
display: inline-block
margin-right: 1px
width: 8px
height: 8px
background-color: #aaa
@include border-radius(4px)
@include box-shadow(white 1px 1px 2px)
&.active .status
background-color: #6b0
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
margin-top: 0
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