Evil CSS hackery to prevent link targets from being under the navbar

http://stackoverflow.com/questions/9047703/fixed-position-navbar-obscures-anchors
This commit is contained in:
Eelco Dolstra 2013-02-20 13:56:41 +01:00
parent f550f1a1de
commit c2e5bec1e1
4 changed files with 21 additions and 18 deletions

View file

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

View file

@ -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>

View file

@ -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 */
}

View file

@ -1,4 +1,3 @@
[% BLOCK menuItem %]
<li class="[% IF "${root}${curUri}" == uri %]active[% END %]">
<a href="[% uri %]">[% title %]</a>