From 80e0e7c84a8798d683960fa57ef8cb3f2456b745 Mon Sep 17 00:00:00 2001
From: Eelco Dolstra <eelco.dolstra@logicblox.com>
Date: Fri, 26 Apr 2013 17:47:30 +0200
Subject: [PATCH] Use popovers for the product list help/details

---
 src/root/build.tt             |  4 +--
 src/root/common.tt            |  2 +-
 src/root/layout.tt            |  4 +++
 src/root/product-list.tt      | 55 ++++++++++++-----------------------
 src/root/static/css/hydra.css |  4 +++
 5 files changed, 29 insertions(+), 40 deletions(-)

diff --git a/src/root/build.tt b/src/root/build.tt
index be8fdc5e..53dd9ae0 100644
--- a/src/root/build.tt
+++ b/src/root/build.tt
@@ -78,7 +78,7 @@
   <div id="tabs-summary" class="tab-pane active">
 
     [% IF build.nixexprinput %]
-      [% WRAPPER makePopover title="Reproduce locally" %]
+      [% WRAPPER makePopover title="Reproduce locally" classes="btn-info pull-right" placement="left" %]
         [% url = c.uri_for('/build' build.id 'reproduce') %]
 
         <p>You can reproduce this build on your own machine by
@@ -91,7 +91,7 @@
         run the following command:</p>
 
 <pre>
-bash <(curl <a [% HTML.attributes(href => url) %]>[% HTML.escape(url) %]</a>)
+<span class="shell-prompt">$ </span>bash <(curl <a [% HTML.attributes(href => url) %]>[% HTML.escape(url) %]</a>)
 </pre>
 
       [% END %]
diff --git a/src/root/common.tt b/src/root/common.tt
index dcc50c9f..f2d4b601 100644
--- a/src/root/common.tt
+++ b/src/root/common.tt
@@ -493,7 +493,7 @@ BLOCK makeLazyTab %]
 
 
 BLOCK makePopover %]
-  <div class="btn btn-info pull-right hydra-popover" data-toggle="popover" data-placement="left" data-html="true" [% HTML.attributes('data-content' => content) %]>
+  <div class="btn hydra-popover [% classes %]" data-toggle="popover" data-html="true" [% HTML.attributes('data-content' => content, 'data-placement' => placement || 'bottom') %]>
     [% title %]
   </div>
 [% END;
diff --git a/src/root/layout.tt b/src/root/layout.tt
index addbb0f4..3935cfd1 100644
--- a/src/root/layout.tt
+++ b/src/root/layout.tt
@@ -24,6 +24,10 @@
     <link rel="stylesheet" href="/static/css/hydra.css" type="text/css" />
     <link href="/static/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" />
 
+    <style>
+      .popover { max-width: 40%; }
+    </style>
+
     <script type="text/javascript" src="/static/js/bootbox.min.js"></script>
 
     <link rel="stylesheet" href="/static/css/tree.css" type="text/css" />
diff --git a/src/root/product-list.tt b/src/root/product-list.tt
index cb12969f..3f3a9d1c 100644
--- a/src/root/product-list.tt
+++ b/src/root/product-list.tt
@@ -24,17 +24,14 @@
               <img src="/static/images/error_32.png" alt="Source" />
               Failed build produced output. Click here to inspect the output.
             </a>
-            <a class="productDetailsToggle btn btn-mini" href="javascript:">help</a>
-            <div class="well hide productDetails">
-                  <p>If you have Nix installed on your machine, this failed build output and
-                  all its dependencies can be unpacked into your local Nix store by doing:</p>
+            [% WRAPPER makePopover title="Help" classes="btn-mini" %]
+              <p>If you have Nix installed on your machine, this failed build output and
+              all its dependencies can be unpacked into your local Nix store by doing:</p>
 
-                  <pre>$ curl [% uri %] | gunzip | nix-store --import</pre>
+              <pre><span class="shell-prompt">$ </span>curl [% uri %] | gunzip | nix-store --import</pre>
 
-                  <p>The build output can then be found in the path <tt>[% product.path %]</tt>.</p>
-
-              </p>
-            </div>
+              <p>The build output can then be found in the path <tt>[% product.path %]</tt>.</p>
+            [% END %]
             </td>
           </tr>
 
@@ -46,8 +43,7 @@
               <img src="/static/images/nix-build.png" alt="Source" />
               One-click install of Nix package <tt>[% build.nixname %]</tt>
             </a>
-            <a class="productDetailsToggle btn btn-mini" href="javascript:">help</a> <a class="btn btn-mini" href="[% contents %]">contents</a>
-            <div class="well hide productDetails">
+            [% WRAPPER makePopover title="Help" classes="btn-mini" %]
               <p>If you have Nix installed on your machine, you can
               install this package and all its dependencies automatically
               by clicking on the link above.  This requires that you have
@@ -56,15 +52,12 @@
               browser.  Alternatively, you can install it from the
               command-line:</p>
 
-              <pre>$ nix-install-package --non-interactive --url [% uri %]</pre>
+              <pre><span class="shell-prompt">$ </span>nix-install-package --non-interactive --url [% uri %]</pre>
 
               <p>If you get an error message “Permission denied”, you
               should make sure that you have sufficient access rights to
-              the Nix store, e.g., run the command as <tt>root</tt>.
-
-              </p>
-            </div>
-
+              the Nix store, e.g., run the command as <tt>root</tt>.</p>
+            [% END %]
             </td>
           </tr>
           <tr class="product">
@@ -78,22 +71,21 @@
               Nix closure of path <tt>[% product.path %]</tt>
             </a>
 
-            <a class="productDetailsToggle btn btn-mini" href="javascript:">help</a>
-            <div class="well hide productDetails">
+            [% WRAPPER makePopover title="Help" classes="btn-mini" %]
               <p>If you have Nix installed on your machine, this build and
               all its dependencies can be unpacked into your local Nix
               store by doing:</p>
 
-              <pre>$ gunzip &lt; [% filename %] | nix-store --import</pre>
+              <pre><span class="shell-prompt">$ </span>gunzip &lt; [% filename %] | nix-store --import</pre>
 
               <p>or to download and unpack in one command:</p>
 
-              <pre>$ curl [% uri %] | gunzip | nix-store --import</pre>
+              <pre><span class="shell-prompt">$ </span>curl [% uri %] | gunzip | nix-store --import</pre>
 
               <p>The package can then be found in the path <tt>[%
               product.path %]</tt>.  You’ll probably also want to do</p>
 
-              <pre>$ nix-env -i [% product.path %]</pre>
+              <pre><span class="shell-prompt">$ </span>nix-env -i [% product.path %]</pre>
 
               <p>to actually install the package in your Nix user environment.</p>
 
@@ -101,7 +93,7 @@
               archive lacks a signature”, you should make sure that you have
               sufficient access rights to the Nix store, e.g., run the
               command as <tt>root</tt>.</p>
-            </div>
+            [% END %]
 
             </td>
           </tr>
@@ -130,9 +122,8 @@
             File <tt>[% product.name %]</tt> of type <tt>[% product.subtype %]</tt>
           [% END %]
         </a>
-        <a class="productDetailsToggle btn btn-mini" href="javascript:">details</a> <a class="btn btn-mini" href="[% contents %]">contents</a>
-        <div class="well hide productDetails">
-          <table>
+        [% WRAPPER makePopover title="Details" classes="btn-mini" %]
+          <table class="info-table">
             <tr>
               <th>URL:</th>
               <td><a href="[% uri %]"><tt>[% uri %]</tt></a></td>
@@ -159,8 +150,7 @@
             <tr><th>SHA-256 hash:</th><td><tt>[% product.sha256hash %]</tt></td></tr>
             <tr><th>Full path:</th><td><tt>[% product.path %]</tt></td></tr>
           </table>
-        </div>
-
+        [% END %]
         </td>
       </tr>
 
@@ -219,12 +209,3 @@
   </table>
 
 [% END %]
-
-<script type="text/javascript">
-  $(document).ready(function() {
-    $('.productDetailsToggle').toggle(
-      function () { $(".productDetails", $(this).parents(".product")).fadeIn(); },
-      function () { $(".productDetails", $(this).parents(".product")).hide(); }
-    );
-  });
-</script>
diff --git a/src/root/static/css/hydra.css b/src/root/static/css/hydra.css
index a162cf6b..67a0a334 100644
--- a/src/root/static/css/hydra.css
+++ b/src/root/static/css/hydra.css
@@ -79,3 +79,7 @@ div.page-header h1 {
 div.page-header h1 small {
     font-size: 45%;
 }
+
+.shell-prompt {
+    color: gray;
+}