From 3c5f8b32a2eeecfa713e09af1e944740add34f5c Mon Sep 17 00:00:00 2001
From: Anthony Truskinger <anthony.truskinger@gmail.com>
Date: Tue, 11 Feb 2014 14:40:27 +1000
Subject: [PATCH] Style tweaks from peer review

---
 src/app/annotationViewer/annotationViewer.js       | 9 ++++++---
 src/app/annotationViewer/gridLines/_gridLines.scss | 8 ++++++--
 src/app/annotationViewer/gridLines/gridLines.js    | 6 +++++-
 src/app/listen/_listen.scss                        | 2 ++
 4 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/app/annotationViewer/annotationViewer.js b/src/app/annotationViewer/annotationViewer.js
index a808fa8e..be4ee4cb 100644
--- a/src/app/annotationViewer/annotationViewer.js
+++ b/src/app/annotationViewer/annotationViewer.js
@@ -51,7 +51,7 @@ avModule.controller('AnnotationViewerCtrl', ['$scope', '$element', '$attrs', '$t
                 min: 0,
                 step: 1000,
                 height: 256,
-                labelFormatter: function(value) {
+                labelFormatter: function(value, index, min, max) {
                     return (value / 1000).toFixed(1);
                 },
                 title: "Frequency (KHz)"
@@ -63,8 +63,11 @@ avModule.controller('AnnotationViewerCtrl', ['$scope', '$element', '$attrs', '$t
                 min: 0,
                 step: 1,
                 width: 1292,
-                labelFormatter: function(value) {
-                    return value.toFixed(0);
+                labelFormatter: function(value, index, min, max) {
+                    // show 'absolute' time.... i.e. seconds of the minute
+                    var offset = (value % 60);
+
+                    return (offset).toFixed(0);
                 },
                 title: "Time offset (seconds)"
             }
diff --git a/src/app/annotationViewer/gridLines/_gridLines.scss b/src/app/annotationViewer/gridLines/_gridLines.scss
index fcf1309b..db9e71b2 100644
--- a/src/app/annotationViewer/gridLines/_gridLines.scss
+++ b/src/app/annotationViewer/gridLines/_gridLines.scss
@@ -1,12 +1,13 @@
-$gridLines: rgba(0, 0, 255, 0.30);
+$gridLines: rgba(66, 139, 202, 0.40);
 $scale-background:  #f5f5f5; //#7eff5f
 
 @mixin scale-base() {
   background-color: $scale-background;
   font-family: $font-family-monospace;
-  font-size: $font-size-small;
+  font-size: $font-size-small;;
   line-height: 1.0;
   position: absolute;
+  color: $gray;
 }
 
 & .gridLines {
@@ -71,6 +72,9 @@ $scale-background:  #f5f5f5; //#7eff5f
       position: absolute;
       @include vendor-prefix(transform, translateY(-50%) translateX(-100%));
       background-color: $scale-background;
+      &:first-child {
+        left: -0.5em;
+      }
     }
   }
 
diff --git a/src/app/annotationViewer/gridLines/gridLines.js b/src/app/annotationViewer/gridLines/gridLines.js
index 209ecb18..d66afed1 100644
--- a/src/app/annotationViewer/gridLines/gridLines.js
+++ b/src/app/annotationViewer/gridLines/gridLines.js
@@ -67,6 +67,10 @@ bawGLs.directive('gridLines',
                 }
                 result.push({value: max, position: size});
 
+                // lastly tag return object with data - a bit hacky
+                result.min = min;
+                result.max = max;
+
                 return result;
             }
 
@@ -96,7 +100,7 @@ bawGLs.directive('gridLines',
                     var element = container.children[j - start];
 
                     if (innerText) {
-                        element.innerText = formatter(steps[j].value);
+                        element.innerText = formatter(steps[j].value, j, steps.min, steps.max);
                     }
 
                     var position = steps[j].position;
diff --git a/src/app/listen/_listen.scss b/src/app/listen/_listen.scss
index 34081093..3d6b171e 100644
--- a/src/app/listen/_listen.scss
+++ b/src/app/listen/_listen.scss
@@ -125,12 +125,14 @@
     position: absolute;
     left: 0px;
     top: 0px;
+    @include vendor-prefix(transform, translateX(-50%));
   }
 
   & .right {
     position: absolute;
     right: 0px;
     top: 0px;
+    @include vendor-prefix(transform, translateX(50%));
   }
 
   & .btn-toolbar {