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 %] [% IF node.refs.size > 0 %]
<a href="javascript:" class="tree-toggle"></a> <a href="javascript:" class="tree-toggle"></a>
[% END %] [% END %]
<span class="dep-tree-line" id="[% done.${node.path} %]"> <span id="[% done.${node.path} %]"><span class="dep-tree-line">
[% IF node.buildStep %] [% IF node.buildStep %]
<a href="[% c.uri_for('/build' node.buildStep.get_column('build')) %]"><tt>[% node.name %]</tt></a> [% <a href="[% c.uri_for('/build' node.buildStep.get_column('build')) %]"><tt>[% node.name %]</tt></a> [%
IF log_exists(node.buildStep.drvpath); IF log_exists(node.buildStep.drvpath);
@ -25,7 +25,7 @@
[% ELSE %] [% ELSE %]
<tt>[% node.name %]</tt> (<em>no info</em>) <tt>[% node.name %]</tt> (<em>no info</em>)
[% END %] [% END %]
</span> </span></span>
[% IF node.refs.size > 0 %] [% IF node.refs.size > 0 %]
<ul class="subtree"> <ul class="subtree">
[% FOREACH ref IN node.refs; INCLUDE renderNode node=ref; END %] [% FOREACH ref IN node.refs; INCLUDE renderNode node=ref; END %]
@ -35,8 +35,7 @@
</li> </li>
[% END %] [% END %]
<a name="runtime"></a> <h2 id="runtime">Runtime dependency graph</h2>
<h2>Runtime dependency graph</h2>
[% IF available %] [% IF available %]
<ul class="tree"> <ul class="tree">
[% done={}; FOREACH node IN runtimeGraph; INCLUDE renderNode; END %] [% done={}; FOREACH node IN runtimeGraph; INCLUDE renderNode; END %]
@ -45,8 +44,8 @@
<p><em>No longer available.</em></p> <p><em>No longer available.</em></p>
[% END %] [% END %]
<a name="buildtime"></a> <h2 id="buildtime">Build-time dependency graph</h2>
<h2>Build-time dependency graph</h2>
[% IF drvAvailable %] [% IF drvAvailable %]
<ul class="tree"> <ul class="tree">
[% INCLUDE renderNode node=buildTimeGraph %] [% 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/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> <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" /> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<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> <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="/static/bootstrap/js/bootstrap-tab.js"></script> <link href="/static/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
<script type="text/javascript" src="/static/bootstrap/js/bootstrap-alert.js"></script> <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/hydra.css" type="text/css" />
<link rel="stylesheet" href="/static/css/tree.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" /> <img src="[% logo %]" alt="Hydra Logo" class="logo" />
[% END %] [% END %]
</a> </a>
<div class="nav-collapse"> <div class="nav-collapse collapse">
[% PROCESS topbar.tt %] [% PROCESS topbar.tt %]
</div><!--/.nav-collapse --> </div>
</div> </div>
</div> </div>
</div> </div>

View file

@ -1,6 +1,5 @@
body { body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */ padding-top: 60px;
padding-bottom: 0px; /* 60px to make the container go all the way to the bottom of the topbar */
} }
.logo { .logo {
@ -25,7 +24,13 @@ table.productList {
border-spacing: 0em 1em; border-spacing: 0em 1em;
} }
span.dep-tree-line:target { span:target > span.dep-tree-line {
background-color: #f8f8e0;
font-style: italic; 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 %] [% BLOCK menuItem %]
<li class="[% IF "${root}${curUri}" == uri %]active[% END %]"> <li class="[% IF "${root}${curUri}" == uri %]active[% END %]">
<a href="[% uri %]">[% title %]</a> <a href="[% uri %]">[% title %]</a>