Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Make header and footer responsive and fixed height #437

Merged
merged 1 commit into from
Oct 30, 2024
Merged

Make header and footer responsive and fixed height #437

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 15 additions & 18 deletions _includes/footer.html
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading