From cbecea881174e83d9b00ea72bcc13605b99c5006 Mon Sep 17 00:00:00 2001
From: Oliver Gorwits <oliver@cpan.org>
Date: Thu, 6 Dec 2012 18:47:18 +0000
Subject: [PATCH] use icon instead of help button

---
 Netdisco/public/css/netdisco.css     | 17 ++++++++++++-----
 Netdisco/views/ajax/device/netmap.tt | 25 +++++--------------------
 Netdisco/views/device.tt             | 11 +++++++++++
 3 files changed, 28 insertions(+), 25 deletions(-)

diff --git a/Netdisco/public/css/netdisco.css b/Netdisco/public/css/netdisco.css
index 3d29545c..f6d82e21 100644
--- a/Netdisco/public/css/netdisco.css
+++ b/Netdisco/public/css/netdisco.css
@@ -27,11 +27,6 @@ body {
   width: 100%;
 }
 
-#netmaphelp {
-  text-align: center;
-  padding-top: 5px;
-}
-
 /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
 /* various styles to adjust the hero box used for homepage + login */
 
@@ -336,6 +331,18 @@ form .clearfix.success input {
   display: none;
 }
 
+/* question mark image with popover for netmap instructions */
+#netmap_help_img {
+  position: fixed;
+  top: 160px;
+  right: 7px;
+  z-index: 1;
+  color: #555;
+  font-size: 20px;
+  cursor: pointer;
+  display: none;
+}
+
 /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
 /* sidebar placement and sizing */
 
diff --git a/Netdisco/views/ajax/device/netmap.tt b/Netdisco/views/ajax/device/netmap.tt
index be2fb663..7b7aae00 100644
--- a/Netdisco/views/ajax/device/netmap.tt
+++ b/Netdisco/views/ajax/device/netmap.tt
@@ -1,25 +1,10 @@
-<div id="netmaphelp">
-<button
-  class="btn btn-small btn-info" rel="popover"
-  data-title="Neighbor Map Controls"
-  data-html="true"
-  data-content="
-    <ul>
-      <li>Click and drag to pan</li>
-      <li>Mouse-wheel scroll to zoom</li>
-      <li>Hover to hightlight neighbors</li>
-      <li>Click to view device's map</li>
-    </ul>"
-  data-placement='top' data-trigger='click'>
-    Help
-</button>
-</div>
-
 <script>
 
+// show our help icon
+d3.select('#netmap_help_img').style('display', 'inline');
+
 var winHeight = window.innerHeight;
 var winWidth  = window.innerWidth;
-var helpHeight = document.getElementById("netmaphelp").getBoundingClientRect().height;
 
 var tree = d3.layout.tree()
     .size([360, winHeight])
@@ -38,9 +23,9 @@ var loc = {};
 var neighbors_data = {};
 
 // main SVG background, with support for pan/zoom
-var svg = d3.select("#netmap_pane").insert("svg", "#netmaphelp")
+var svg = d3.select("#netmap_pane").append("svg")
     .attr("width", winWidth - 50)
-    .attr("height", winHeight - (100 + helpHeight))
+    .attr("height", winHeight - 100)
     .attr("pointer-events", "all")
   .append('g')
     .call(d3.behavior.zoom().on("zoom", redraw))
diff --git a/Netdisco/views/device.tt b/Netdisco/views/device.tt
index d5c3afab..50e15796 100644
--- a/Netdisco/views/device.tt
+++ b/Netdisco/views/device.tt
@@ -1,5 +1,16 @@
 <i class="sidebar_toggle icon-wrench icon-large" id="sidebar_toggle_img_out"
   rel="tooltip" data-placement="left" data-offset="5" title="Show Sidebar"></i>
+<i class="icon-question-sign icon-large" id="netmap_help_img" rel="popover"
+  data-title="Neighbor Map Controls"
+  data-html="true"
+  data-content="
+    <ul>
+      <li>Click and drag to pan</li>
+      <li>Mouse-wheel scroll to zoom</li>
+      <li>Hover to hightlight neighbors</li>
+      <li>Click to view device's map</li>
+    </ul>"
+  data-placement='left' data-trigger='click'></i>
 <div class="container-fluid">
   <div class="sidebar sidebar_pinned">
     <div class="well">