From a431b68c2858a2d96f35accfe577497344de98a2 Mon Sep 17 00:00:00 2001
From: Damien Mathieu <42@dmathieu.com>
Date: Thu, 5 Dec 2013 16:01:51 +0100
Subject: [PATCH] make the back to top fixed and fluidify the follow scrolls

Fixes #89
---
 assets/scripts/app/tailing.coffee         |  9 +--
 assets/scripts/app/templates/jobs/pre.hbs |  9 ++-
 assets/scripts/app/views/log.coffee       |  5 +-
 assets/styles/main/log.sass               | 88 +++++++++++++----------
 assets/styles/main/sponsors.sass          |  9 ---
 5 files changed, 67 insertions(+), 53 deletions(-)

diff --git a/assets/scripts/app/tailing.coffee b/assets/scripts/app/tailing.coffee
index fab3fec8..276b18c7 100644
--- a/assets/scripts/app/tailing.coffee
+++ b/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)
-    else
-      tail.css(top: 0)
+
+    if offset > 0
+      tail.css(position: 'fixed', right: 32)
+    else
+      tail.css(position: 'absolute', right: 2)
 
diff --git a/assets/scripts/app/templates/jobs/pre.hbs b/assets/scripts/app/templates/jobs/pre.hbs
index dd337a7e..457d9699 100644
--- a/assets/scripts/app/templates/jobs/pre.hbs
+++ b/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>
 
diff --git a/assets/scripts/app/views/log.coffee b/assets/scripts/app/views/log.coffee
index 2fccda0e..2bacdfe2 100644
--- a/assets/scripts/app/views/log.coffee
+++ b/assets/scripts/app/views/log.coffee
@@ -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?
 
diff --git a/assets/styles/main/log.sass b/assets/styles/main/log.sass
index f756655e..54e1067e 100644
--- a/assets/styles/main/log.sass
+++ b/assets/styles/main/log.sass
@@ -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
diff --git a/assets/styles/main/sponsors.sass b/assets/styles/main/sponsors.sass
index cfbbdc16..e5c79998 100644
--- a/assets/styles/main/sponsors.sass
+++ b/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