Use popovers for the product list help/details

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 %]

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;

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" />

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>
+            [% WRAPPER makePopover title="Help" classes="btn-mini" %]
-            <div class="well hide productDetails">
+              <p>If you have Nix installed on your machine, this failed build output and
-                  <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>
-                  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>The build output can then be found in the path <tt>[% product.path %]</tt>.</p>
-
+            [% END %]
-              </p>
-            </div>
             </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>
+            [% WRAPPER makePopover title="Help" classes="btn-mini" %]
-            <div class="well hide productDetails">
               <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>.
+              the Nix store, e.g., run the command as <tt>root</tt>.</p>
-
+            [% END %]
-              </p>
-            </div>
-
             </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>
+            [% WRAPPER makePopover title="Help" classes="btn-mini" %]
-            <div class="well hide productDetails">
               <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>
+        [% WRAPPER makePopover title="Details" classes="btn-mini" %]
-        <div class="well hide productDetails">
+          <table class="info-table">
-          <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>

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;
+}