make the back to top fixed and fluidify the follow scrolls

Fixes #89

assets/scripts/app/tailing.coffee

@@ -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)
+    if offset > 0
-    else
+      tail.css(position: 'fixed', right: 32)
-      tail.css(top: 0)
+    else
+      tail.css(position: 'absolute', right: 2)
 

assets/scripts/app/templates/jobs/pre.hbs

@@ -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>
 

assets/scripts/app/views/log.coffee

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

assets/styles/main/log.sass

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

assets/styles/main/sponsors.sass

@@ -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