Skip to content

Commit

Permalink
Make header and footer responsive and fixed height
Browse files Browse the repository at this point in the history
  • Loading branch information
@rkent
rkent committed Oct 16, 2024
1 parent b7c380a commit ce0ed46
Show file tree
Hide file tree
Showing 4 changed files with 90 additions and 132 deletions.
33 changes: 15 additions & 18 deletions _includes/footer.html
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,22 @@
<footer class="site-footer">
<div class="wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4 col-md-4">
{% if site.github_username %}
<a href="https://github.com/{{ site.github_username }}" title="Find rosindex in Github">
<span class="icon icon--github">
<svg viewBox="0 0 16 16">
<path fill="#828282" d="M7.999,0.431c-4.285,0-7.76,3.474-7.76,7.761 c0,3.428,2.223,6.337,5.307,7.363c0.388,0.071,0.53-0.168,0.53-0.374c0-0.184-0.007-0.672-0.01-1.32 c-2.159,0.469-2.614-1.04-2.614-1.04c-0.353-0.896-0.862-1.135-0.862-1.135c-0.705-0.481,0.053-0.472,0.053-0.472 c0.779,0.055,1.189,0.8,1.189,0.8c0.692,1.186,1.816,0.843,2.258,0.645c0.071-0.502,0.271-0.843,0.493-1.037 C4.86,11.425,3.049,10.76,3.049,7.786c0-0.847,0.302-1.54,0.799-2.082C3.768,5.507,3.501,4.718,3.924,3.65 c0,0,0.652-0.209,2.134,0.796C6.677,4.273,7.34,4.187,8,4.184c0.659,0.003,1.323,0.089,1.943,0.261 c1.482-1.004,2.132-0.796,2.132-0.796c0.423,1.068,0.157,1.857,0.077,2.054c0.497,0.542,0.798,1.235,0.798,2.082 c0,2.981-1.814,3.637-3.543,3.829c0.279,0.24,0.527,0.713,0.527,1.437c0,1.037-0.01,1.874-0.01,2.129 c0,0.208,0.14,0.449,0.534,0.373c3.081-1.028,5.302-3.935,5.302-7.362C15.76,3.906,12.285,0.431,7.999,0.431z"/>
</svg>
</span>
<div style="float:left;">
{% if site.github_username %}
<a href="https://github.com/{{ site.github_username }}" title="Find rosindex in Github">
<span class="icon icon--github">
<svg viewBox="0 0 16 16">
<path fill="#828282" d="M7.999,0.431c-4.285,0-7.76,3.474-7.76,7.761 c0,3.428,2.223,6.337,5.307,7.363c0.388,0.071,0.53-0.168,0.53-0.374c0-0.184-0.007-0.672-0.01-1.32 c-2.159,0.469-2.614-1.04-2.614-1.04c-0.353-0.896-0.862-1.135-0.862-1.135c-0.705-0.481,0.053-0.472,0.053-0.472 c0.779,0.055,1.189,0.8,1.189,0.8c0.692,1.186,1.816,0.843,2.258,0.645c0.071-0.502,0.271-0.843,0.493-1.037 C4.86,11.425,3.049,10.76,3.049,7.786c0-0.847,0.302-1.54,0.799-2.082C3.768,5.507,3.501,4.718,3.924,3.65 c0,0,0.652-0.209,2.134,0.796C6.677,4.273,7.34,4.187,8,4.184c0.659,0.003,1.323,0.089,1.943,0.261 c1.482-1.004,2.132-0.796,2.132-0.796c0.423,1.068,0.157,1.857,0.077,2.054c0.497,0.542,0.798,1.235,0.798,2.082 c0,2.981-1.814,3.637-3.543,3.829c0.279,0.24,0.527,0.713,0.527,1.437c0,1.037-0.01,1.874-0.01,2.129 c0,0.208,0.14,0.449,0.534,0.373c3.081-1.028,5.302-3.935,5.302-7.362C15.76,3.906,12.285,0.431,7.999,0.431z"/>
</svg>
</span>

<span class="username">{{ site.github_username }}</span>
</a>
|
<em>generated on {{ 'now' | date: "%F" }}</em>
{% endif %}
</div>
<div class="col-sm-8 col-md-8 text-right">
<p class="text">{{ site.description }} | <a href="{{site.baseurl}}/privacy.txt">privacy</a></p>
</div>
<span class="username">{{ site.github_username }}</span>
</a>
<em class="hidden-xs">| generated on {{ 'now' | date: "%F" }}</em>
{% endif %}
</div>
<div style="float:right;">
<p class="text"><span class="hidden-xs">{{ site.description }} | </span><a href="{{site.baseurl}}/privacy.txt">privacy</a></p>
</div>
</div>
</div>
Expand Down
175 changes: 71 additions & 104 deletions _includes/header.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,117 +2,84 @@

<div class="wrapper">
<div class="container-fluid" style="margin-bottom: 10px">

<div align="center">
<br>
<table id="topnav-table">
<tr>
<td valign="middle">
ROS Resources:
<a href="http://docs.ros.org/">Documentation</a>
|
<a href="http://wiki.ros.org/Support">Support</a>
|
<a href="http://discourse.ros.org/">Discussion Forum</a>
|
<a href="http://status.ros.org/">Service Status</a>
|
<a href="https://robotics.stackexchange.com/questions/tagged/ros">ros @ Robotics Stack Exchange</a>
</td>
</tr>
</table> <!-- topnav-table -->
</div>

<div class="row">

<div class="col-sm-12 col-md-9" style="margin-top: 8px">
<div class="row">
<!-- title -->
<div class="col-xs-12 col-sm-3 col-md-3" style="white-space:nowrap;">
<a class="site-title" href="{{site.baseurl}}/">{{ site.title }}</a>
<!-- title -->
<div class="col-xs-3" style="white-space:nowrap">
<a class="site-title" href="{{site.baseurl}}/">
<img src="{{ site.baseurl }}/assets/rosindex_logo.svg" width="26" height="26" alt="ROS index logo" style="padding-bottom: 3px"/>
{{ site.title }}</a>
</div>
<!-- main internal links -->
<div class="col-xs-6 text-center" style="padding:0px">
<div class="btn-group hidden-xs" role="group" aria-label="..." style="padding: 6px">
<div class="btn-group" role="group">
<a href="{{site.baseurl}}/packages" class="btn btn-default" role="button">Package List</a>
</div>

<!-- main links -->
<div class="col-xs-12 col-sm-9 col-md-9 text-right">
<ul class="list-inline" style="margin-bottom:0px;">
<li><a class="btn btn-link" href="{{site.baseurl}}/about">About</a></li>

<li class="dropdown">
<button id="dLabel" class="btn btn-link" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Index <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li><a href="{{site.baseurl}}/packages/page/1/time/">Package List</a></li>
<li><a href="{{site.baseurl}}/repos/page/1/time/">Repository List</a></li>

<li class="hidden" class="divider"></li>


<li class="hidden"><a href="/srvs/">Nodes</a></li>
<li class="hidden"><a href="/msgs/">Messages</a></li>
<li class="hidden"><a href="/srvs/">Services</a></li>
<li class="hidden"><a href="/srvs/">Plugins</a></li>

<li class="divider"></li>

<li><a href="{{site.baseurl}}/deps/">System Dependencies</a></li>
</ul>
</li>

<li><a class="btn btn-link" href="{{site.baseurl}}/contribute">Contribute</a></li>
<li><a class="btn btn-link" href="{{site.baseurl}}/stats">Stats</a></li>
</ul>

<div class="btn-group" role="group">
<a href="{{site.baseurl}}/repos" class="btn btn-default" role="button">Repository List</a>
</div>
<div class="btn-group" role="group">
<a href="{{site.baseurl}}/deps" class="btn btn-default" role="button">System Dependencies</a>
</div>
</div>
<div class="hidden-lg hidden-md hidden-sm">
<button id="hLabel" class="btn btn-link dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Lists <span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="hLabel">
<li><a href="{{site.baseurl}}/packages">Package List</a></li>
<li><a href="{{site.baseurl}}/repos">Repository List</a></li>
<li><a href="{{site.baseurl}}/deps">System Dependencies</a></li>
</ul>
</div>
</div>

<!-- searchbox -->
<div class="col-sm-12 col-md-3" style="margin-top: 12px">
<form id="top-searchbox" action="{{site.baseurl}}/search/" role="form" method="get">
<div class="input-group input-group-sm">
<input type="text" class="form-control" name="term" placeholder="Search ROS">
<span class="input-group-btn">
<button class="btn btn-default btn-sm" title="Search ROS" type="submit">
<span class="glyphicon glyphicon-search"></span>
</button>
<a href="https://lunrjs.com/guides/searching.html"
title="Help to Search" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-question-sign"></span>
</a>
</span>
</div>
</form>
<!-- additional links -->
<div class="col-xs-3 text-right" style="white-space:nowrap; padding:0px">
<ul class="list-inline" style="margin-bottom:0px;">
<li class="dropdown hidden-xs hidden-sm">
<button id="rLabel" class="btn btn-link" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
ROS Resources <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="rLabel">
<li><a href="http://docs.ros.org/">Documentation</a></li>
<li><a href="http://wiki.ros.org/Support">Support</a></li>
<li><a href="http://discourse.ros.org/">Discussion Forum</a></li>
<li><a href="http://status.ros.org/">Service Status</a></li>
<li><a href="https://robotics.stackexchange.com/questions/tagged/ros">ros @ Robotics Stack Exchange</a></li>
<li><a href="https://docs.ros.org/en/ros2_packages/">Package API</a></li>
</ul>
</li>
<li class="dropdown hidden-xs hidden-sm">
<button id="aLabel" class="btn btn-link" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
About <span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="aLabel">
<li><a href="{{site.baseurl}}/about">About </a></li>
<li><a href="{{site.baseurl}}/contribute">Contribute</a></li>
<li><a href="{{site.baseurl}}/stats">Stats</a></li>
</ul>
</li>
<li class="dropdown hidden-md hidden-lg">
<button id="qLabel" class="btn btn-link" type="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Resources <span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="qLabel">
<li><a href="{{site.baseurl}}/about">About </a></li>
<li><a href="{{site.baseurl}}/contribute">Contribute</a></li>
<li><a href="{{site.baseurl}}/stats">Stats</a></li>
<hr style="margin:7px" />
<li><a href="http://docs.ros.org/">Documentation</a></li>
<li><a href="http://wiki.ros.org/Support">Support</a></li>
<li><a href="http://discourse.ros.org/">Discussion Forum</a></li>
<li><a href="http://status.ros.org/">Service Status</a></li>
<li><a href="https://robotics.stackexchange.com/questions/tagged/ros">ros @ Robotics Stack Exchange</a></li>
<li><a href="https://docs.ros.org/en/ros2_packages/">Package API</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>

<!--
<a class="site-title" href="{{ site.baseurl }}/">{{ site.title }}</a>
<nav class="site-nav">
<a href="#" class="menu-icon">
<svg viewBox="0 0 18 15">
<path fill="#424242" d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.031C17.335,0,18,0.665,18,1.484L18,1.484z"/>
<path fill="#424242" d="M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0c0-0.82,0.665-1.484,1.484-1.484 h15.031C17.335,6.031,18,6.696,18,7.516L18,7.516z"/>
<path fill="#424242" d="M18,13.516C18,14.335,17.335,15,16.516,15H1.484C0.665,15,0,14.335,0,13.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.031C17.335,12.031,18,12.696,18,13.516L18,13.516z"/>
</svg>
</a>
<div class="trigger">
<a class="page-link" href="/packages">Packages</a>
<a class="page-link" href="/repos">Repositories</a>
<a class="page-link" href="/search">Search</a>
</div>
</nav>
-->

</div>
<script type="text/javascript">
$('#top-searchbox').submit(function() {
return $('#top-searchbox input:text').filter(function() {
return $(this).val() == "";
}).length == 0;
});
</script>
</header>
4 changes: 4 additions & 0 deletions _sass/_layout.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,10 @@
position: relative;
}

.site-header .btn-link {
font-size: 14px;
}

.site-title {
font-size: 26px;
/*line-height: 56px;*/
Expand Down
10 changes: 0 additions & 10 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,6 @@
---

<div class="container-fluid" style="margin:20px">
<div class="row">
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group" role="group">
<a href="packages" class="btn btn-default" role="button">Package List</a>
</div>
<div class="btn-group" role="group">
<a href="repos" class="btn btn-default" role="button">Repository List</a>
</div>
</div>
</div>
<div class="row">
&nbsp;
</div>
Expand Down

0 comments on commit ce0ed46

Please sign in to comment.