Fix for #22 - Adding tooltip to device show stream values

zettajs · Nov 14, 2014 · 36b2c70 · 36b2c70
1 parent 8abbc6a
commit 36b2c70
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 34 deletions.
diff --git a/src/partials/device.html b/src/partials/device.html
@@ -11,7 +11,9 @@ <h1><b class="back" onclick="window.history.back()">previous</b>{{ device.proper
         <section class="vis stream numerical pure-g">
           <div class="meta pure-u-1 pure-u-md-1-3">
             <div class="value" ng-if="stream.type === 'numerical' || stream.type === 'categorical'">
-              <span>{{ stream.current }}</span>
+              <span mac-tooltip="{{ stream.name | capitalize }} : {{ stream.current }}" 
+                    mac-tooltip-direction="bottom"
+                    >{{ stream.current }}</span>
             </div>
             <div class="value server-loading" ng-if="stream.type === null || stream.type === undefined">
               <b>stop</b><b>stop</b><b>stop</b>

diff --git a/src/styles/styles.css b/src/styles/styles.css
@@ -889,13 +889,14 @@ header nav,
   margin-top: 2.5rem;
   background-color: #fff;
   padding: 0 0 1rem 0;
+  z-index: 100;
   padding-left: 1rem;
   padding-right: 1rem;
   transition: box-shadow 0.2s ease;
   box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.13), 0px 0px 2px rgba(0, 0, 0, 0.13);
 }
 .page_content header h1 {
-  margin: 2rem 0 0rem 0;
+  margin: 2rem 0 1rem 0;
 }
 @media screen and (min-width: 48.1em) {
   .page_content header {
@@ -929,9 +930,6 @@ header nav,
 .serverError {
   color: #ff4300;
 }
-.front-door header {
-  padding-bottom: 1rem;
-}
 /* footer */
 footer {
   background-color: #0b1a1f;
@@ -1533,8 +1531,11 @@ button.icon:disabled:hover {
 /* Device Show */
 .focus {
   background-color: #fff;
+  transition: box-shadow 0.2s ease;
   box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.13), 0px 0px 2px rgba(0, 0, 0, 0.13);
-  z-index: -10;
+}
+.focus:hover {
+  box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
 }
 .focus .streams {
   padding: 0;
@@ -1578,17 +1579,6 @@ button.icon:disabled:hover {
   overflow: hidden;
   margin-top: 1.0rem;
 }
-.focus .streams .stream .value span:hover {
-  position: absolute;
-  overflow: visible;
-  white-space: pre-wrap;
-  max-width: 80%;
-  padding: 1rem;
-  background-color: #fff;
-  box-shadow: 0px 0px 5px #59595b;
-  font-size: 2rem;
-  line-height: 2rem;
-}
 .focus .streams .stream .name {
   color: rgba(0, 0, 0, 0.3);
 }

diff --git a/src/styles/styles.less b/src/styles/styles.less
@@ -207,6 +207,7 @@ a {
   background-color: @white;
   header {
     .centered();
+
   }
   #cta {
     .content {
@@ -572,7 +573,8 @@ header nav, #wampum {
     margin-top: 2.5rem;
     background-color: #fff;
     padding: 0 0 1rem 0;
-    h1 {margin: 2rem 0 0rem 0;}
+    z-index: 100;
+    h1 {margin: 2rem 0 1rem 0;}
     .smallPadding();
     .content {
 
@@ -607,7 +609,6 @@ header nav, #wampum {
 
 }
 .serverError {color: @orange;}
-.front-door header { padding-bottom: 1rem; }
 /* footer */
 
 footer {
@@ -639,8 +640,11 @@ footer {
 
 .focus {
   background-color: #fff;
+  transition: box-shadow .2s ease;
   .shadow(2);
-    z-index: -10;
+  &:hover {.shadow(4);}
+
+
   .streams {
 
     padding: 0;
@@ -660,20 +664,6 @@ footer {
         height: 4rem;
         .dotdot();
         margin-top: 1.0rem;
-        span:hover {
-           position: absolute;
-           overflow: visible;
-           white-space: pre-wrap;
-           max-width: 80%;
-           padding: 1rem;
-           background-color: #fff;
-
-           box-shadow: 0px 0px 5px @apigee-grey;
-
-           font-size: 2rem;
-           line-height: 2rem;
-        }
-
       }
 
       .name {