Run time now always shows, not just on hover

Also, rearranged some CSS
glacials · Apr 9, 2014 · 01cc15e · 01cc15e
1 parent 206caa0
commit 01cc15e
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 20 deletions.
diff --git a/app/assets/javascripts/split-inspector.js b/app/assets/javascripts/split-inspector.js
@@ -2,11 +2,11 @@ $(function() {
   $('.split').hover(
     function() {
       $('#inspect-' + this.id.split('-')[1]).fadeTo(0, 1);
-      $('#time').fadeTo(0, 1);
+      $('#time').addClass('bar');
     },
     function() {
       $('#inspect-' + this.id.split('-')[1]).fadeTo(0, 0);
-      $('#time').fadeTo(0, 0);
+      $('#time').removeClass('bar');
     }
   );
 });
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
@@ -147,7 +147,13 @@ footer a:hover {
   width: 100%;
 }
 
-.split, .inspect{
+.split, .inspect {
+    display: block;
+    color: #fff;
+    text-decoration: none;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
@@ -173,15 +179,6 @@ footer a:hover {
     background: rgb(243, 123, 29);
 }
 
-.split, .inspect {
-    display: block;
-    color: #fff;
-    text-decoration: none;
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
-}
-
 .split .title, .inspect .title {
   padding: 0.5em 0 0 0.5em;
 }
@@ -202,22 +199,28 @@ footer a:hover {
     display: block;
 }
 
-#time, .inspect, .inspect .bar {
+.inspect {
   color: #aaa;
 }
 
-#time, .inspect .bar {
+#time {
+  border-right: 1px solid;
+  color: #aaa;
+  text-align: center;
+  margin-bottom: .3em;
+}
+
+.bar {
   border-color: #aaa;
   border-left: 1px solid;
   border-right: 1px solid;
-  position: relative;
-  z-index: 1;
+  color: #aaa;
   overflow: hidden;
+  position: relative;
   text-align: center;
-  margin-bottom: .3em;
 }
 
-#time:before, #time:after, .inspect .bar:before, .inspect .bar:after {
+.bar:before, .bar:after {
   position: absolute;
   top: 51%;
   overflow: hidden;
@@ -227,7 +230,7 @@ footer a:hover {
   background-color: #aaa;
 }
 
-#time:before, .inspect .bar:before {
+.bar:before {
   margin-left: -50%;
   text-align: right;
 }
diff --git a/app/views/runs/show.html.haml b/app/views/runs/show.html.haml
@@ -12,7 +12,7 @@
 - colors = [:blue, :purple, :green, :red, :orange, :yellow]
 - c = 0
 - percentage = 0
-#time{style: 'opacity: 0;'}
+#time
   &nbsp;
   = render partial: 'shared/time', locals: {run: @run, time: @run.time}
   &nbsp;