From c2e5bec1e11f7206e86cc5565b0c17748cf1514e Mon Sep 17 00:00:00 2001
From: Eelco Dolstra <eelco.dolstra@logicblox.com>
Date: Wed, 20 Feb 2013 13:56:41 +0100
Subject: [PATCH] Evil CSS hackery to prevent link targets from being under the
 navbar

http://stackoverflow.com/questions/9047703/fixed-position-navbar-obscures-anchors
---
 src/root/deps.tt              | 11 +++++------
 src/root/layout.tt            | 14 +++++++-------
 src/root/static/css/hydra.css | 13 +++++++++----
 src/root/topbar.tt            |  1 -
 4 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/src/root/deps.tt b/src/root/deps.tt
index 241d2e11..2929b760 100644
--- a/src/root/deps.tt
+++ b/src/root/deps.tt
@@ -16,7 +16,7 @@
       [% IF node.refs.size > 0 %]
         <a href="javascript:" class="tree-toggle"></a>
       [% END %]
-      <span class="dep-tree-line" id="[% done.${node.path} %]">
+      <span id="[% done.${node.path} %]"><span class="dep-tree-line">
         [% IF node.buildStep %]
           <a href="[% c.uri_for('/build' node.buildStep.get_column('build')) %]"><tt>[% node.name %]</tt></a> [%
             IF log_exists(node.buildStep.drvpath);
@@ -25,7 +25,7 @@
         [% ELSE %]
           <tt>[% node.name %]</tt> (<em>no info</em>)
         [% END %]
-      </span>
+      </span></span>
       [% IF node.refs.size > 0 %]
         <ul class="subtree">
           [% FOREACH ref IN node.refs; INCLUDE renderNode node=ref; END %]
@@ -35,8 +35,7 @@
   </li>
 [% END %]
 
-<a name="runtime"></a>
-<h2>Runtime dependency graph</h2>
+<h2 id="runtime">Runtime dependency graph</h2>
 [% IF available %]
 <ul class="tree">
   [% done={}; FOREACH node IN runtimeGraph; INCLUDE renderNode; END %]
@@ -45,8 +44,8 @@
 <p><em>No longer available.</em></p>
 [% END %]
 
-<a name="buildtime"></a>
-<h2>Build-time dependency graph</h2>
+<h2 id="buildtime">Build-time dependency graph</h2>
+
 [% IF drvAvailable %]
 <ul class="tree">
   [% INCLUDE renderNode node=buildTimeGraph %]
diff --git a/src/root/layout.tt b/src/root/layout.tt
index 85a7d4ca..9bf8af50 100644
--- a/src/root/layout.tt
+++ b/src/root/layout.tt
@@ -14,11 +14,11 @@
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
 
-    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css" type="text/css" />
-    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap-responsive.css" type="text/css" />
-    <script type="text/javascript" src="/static/bootstrap/js/bootstrap-dropdown.js"></script>
-    <script type="text/javascript" src="/static/bootstrap/js/bootstrap-tab.js"></script>
-    <script type="text/javascript" src="/static/bootstrap/js/bootstrap-alert.js"></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
+    <link href="/static/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
+    <script type="text/javascript" src="/static/bootstrap/js/bootstrap.min.js"></script>
 
     <link rel="stylesheet" href="/static/css/hydra.css" type="text/css" />
     <link rel="stylesheet" href="/static/css/tree.css" type="text/css" />
@@ -95,9 +95,9 @@
               <img src="[% logo %]" alt="Hydra Logo" class="logo" />
           [% END %]
           </a>
-          <div class="nav-collapse">
+          <div class="nav-collapse collapse">
             [% PROCESS topbar.tt %]
-          </div><!--/.nav-collapse -->
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/root/static/css/hydra.css b/src/root/static/css/hydra.css
index 8d1868c9..0eaeefb4 100644
--- a/src/root/static/css/hydra.css
+++ b/src/root/static/css/hydra.css
@@ -1,6 +1,5 @@
 body {
-    padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
-    padding-bottom: 0px; /* 60px to make the container go all the way to the bottom of the topbar */
+    padding-top: 60px;
 }
 
 .logo {
@@ -25,7 +24,13 @@ table.productList {
     border-spacing: 0em 1em;
 }
 
-span.dep-tree-line:target {
-    background-color: #f8f8e0;
+span:target > span.dep-tree-line {
     font-style: italic;
+    font-weight: bold;
+}
+
+:target {
+  padding-top: 40px;
+  margin-top: -40px;
+  display: inline-block; /* required for webkit browsers */
 }
diff --git a/src/root/topbar.tt b/src/root/topbar.tt
index 3446420f..2411fee5 100644
--- a/src/root/topbar.tt
+++ b/src/root/topbar.tt
@@ -1,4 +1,3 @@
-
 [% BLOCK menuItem %]
   <li class="[% IF "${root}${curUri}" == uri %]active[% END %]">
     <a href="[% uri %]">[% title %]</a>