Use popovers for the product list help/details
This commit is contained in:
Eelco Dolstra
parent
ea4c88bda1
commit
80e0e7c84a
|
|
@ -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 %]
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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" />
|
||||
|
|
|
|||
|
|
@ -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 < [% filename %] | nix-store --import</pre>
|
||||
<pre><span class="shell-prompt">$ </span>gunzip < [% 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>
|
||||
|
|
|
|||
|
|
@ -79,3 +79,7 @@ div.page-header h1 {
|
|||
div.page-header h1 small {
|
||||
font-size: 45%;
|
||||
}
|
||||
|
||||
.shell-prompt {
|
||||
color: gray;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue