Skip to content

Upgrade CSS from bootstrap 3 to bootstrap 5 #627

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

Draft
rkent wants to merge 1 commit into
base: ros2
Choose a base branch
from
+384 −361
Draft

Upgrade CSS from bootstrap 3 to bootstrap 5 #627

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
8 changes: 4 additions & 4 deletions 404.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<div class="container-fluid" style="margin-top:20px">
<div class="container-fluid">
<div class="row">
<div class="well" style="background-color: #EEE">
<div class="card bg-light p-3 mb-3">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
Expand All @@ -21,16 +21,16 @@ <h2>Move along.</h2>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-xs-offset-3 col-xs-6 text-center">
<div class="offset-3 col-6 text-center">
Did you get here from a link on ROS Index?
</div>
</div>
<div class="row">
&nbsp;
</div>
<div class="row">
<div class="col-xs-offset-3 col-xs-6 text-center">
<a id="github_issue_link" target="_blank" href="" class="btn btn-sm btn-default btn-block">Report Broken Link</a>
<div class="offset-3 col-6 text-center">
<a id="github_issue_link" target="_blank" href="" class="btn btn-sm btn-secondary d-block">Report Broken Link</a>
</div>
</div>
<div class="row">
Expand Down
9 changes: 4 additions & 5 deletions _includes/distro_switch.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,22 @@


<div id="distro-switch" class="btn-group btn-group-justified" data-toggle="buttons">
<div id="distro-switch" class="btn-group d-flex" role="group" data-bs-toggle="buttons">
{% for distro in site.distros %}
<label id="{{ distro }}-option" class="distro-button btn btn-xs {% if page.available_distros[distro] %}btn-primary{% else %}btn-default{% endif %}" href="#{{ distro }}" data="{{ distro }}">
<label id="{{ distro }}-option" class="distro-button btn btn-sm flex-fill {% if page.available_distros[distro] %}btn-primary{% else %}btn-secondary{% endif %}" href="#{{ distro }}" data="{{ distro }}">
<input type="radio" name="options" id="{{ distro }}-radio" autocomplete="off"> {{ distro }}
</label>
{% endfor %}

<!-- Older distros -->
<div class="btn-group dropdown">
<label type="button" class="btn btn-xs dropdown-toggle {% if page.n_available_older_distros > 0 %}btn-primary{% else %}btn-default{% endif %}" data-toggle="dropdown" id="older-distro-button">
<label type="button" class="btn btn-sm dropdown-toggle {% if page.n_available_older_distros > 0 %}btn-primary{% else %}btn-secondary{% endif %}" data-bs-toggle="dropdown" id="older-distro-button">
<input type="radio" name="options" autocomplete="off">
<span id="older-label">Older</span>
<span class="caret"></span>
</label>
<ul class="dropdown-menu" role="menu">
{% for distro in site.old_distros %}
<li data="{{ distro }}" id="{{ distro }}-option" class="{% unless page.available_older_distros[distro] %}disabled{% endunless %} older-distro-option" href="#{{ distro }}">
<a href="#{{ distro }}" data="{{ distro }}" id="{{ distro }}-button">{{ distro }}</a>
<a class="dropdown-item" href="#{{ distro }}" data="{{ distro }}" id="{{ distro }}-button">{{ distro }}</a>
</li>
{% endfor %}
</ul>
Expand Down
7 changes: 3 additions & 4 deletions _includes/distro_switch_pills.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,20 +5,19 @@
<div class="btn-group btn-group-sm" role="group" aria-label="...">
<!-- Older distros -->
<div class="btn-group btn-group-sm" role="group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Older
<span class="caret"></span>
</button>

<ul class="dropdown-menu" role="menu">
{% for distro in site.old_distros %}
<li><a href="#">{{ distro }}</a></li>
<li><a class="dropdown-item" href="#">{{ distro }}</a></li>
{% endfor %}
</ul>
</div>

<!-- Current distros -->
{% for distro in site.distros %}
<button type="button" class="btn btn-default">{{ distro }}</button>
<button type="button" class="btn btn-secondary">{{ distro }}</button>
{% endfor %}
</div>
4 changes: 2 additions & 2 deletions _includes/footer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,11 @@

<span class="username">{{ site.github_username }}</span>
</a>
<em class="hidden-xs">| generated on {{ 'now' | date: "%F" }}</em>
<em class="d-none d-sm-inline">| 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>
<p class="text"><span class="d-none d-sm-inline">{{ site.description }} | </span><a href="{{site.baseurl}}/privacy.txt">privacy</a></p>
</div>
</div>
</div>
Expand Down
92 changes: 46 additions & 46 deletions _includes/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,79 +4,79 @@
<div class="container-fluid" style="margin-bottom: 10px">
<div class="row">
<!-- title -->
<div class="col-xs-3" style="white-space:nowrap">
<div class="col-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="col-6 text-center" style="padding:0px">
<div class="btn-group d-none d-sm-inline-flex" role="group" aria-label="..." style="padding: 6px">
<div class="btn-group" role="group">
<a href="{{site.baseurl}}/?search_packages=true" class="btn btn-default" role="button">Package List</a>
<a href="{{site.baseurl}}/?search_packages=true" class="btn btn-secondary" role="button">Package List</a>
</div>
<div class="btn-group" role="group">
<a href="{{site.baseurl}}/?search_repos=true" class="btn btn-default" role="button">Repository List</a>
<a href="{{site.baseurl}}/?search_repos=true" class="btn btn-secondary" role="button">Repository List</a>
</div>
<div class="btn-group" role="group">
<a href="{{site.baseurl}}/search_deps" class="btn btn-default" role="button">System Dependencies</a>
<a href="{{site.baseurl}}/search_deps" class="btn btn-secondary" 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>
<div class="dropdown d-sm-none">
<button id="hLabel" class="btn btn-link dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Lists
</button>
<ul class="dropdown-menu" aria-labelledby="hLabel">
<li><a href="{{site.baseurl}}/?search_packages=true">Package List</a></li>
<li><a href="{{site.baseurl}}/?search_repos=true">Repository List</a></li>
<li><a href="{{site.baseurl}}/search_deps">System Dependencies</a></li>
<li><a class="dropdown-item" href="{{site.baseurl}}/?search_packages=true">Package List</a></li>
<li><a class="dropdown-item" href="{{site.baseurl}}/?search_repos=true">Repository List</a></li>
<li><a class="dropdown-item" href="{{site.baseurl}}/search_deps">System Dependencies</a></li>
</ul>
</div>
</div>
<!-- additional links -->
<div class="col-xs-3 text-right" style="white-space:nowrap; padding:0px">
<div class="col-3 text-end" 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>
<li class="list-inline-item dropdown d-none d-md-inline">
<button id="rLabel" class="btn btn-link dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
ROS Resources
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="rLabel">
<li><a href="http://docs.ros.org/">Documentation</a></li>
<li><a href="https://docs.ros.org/en/rolling/Contact.html#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>
<li><a class="dropdown-item" href="http://docs.ros.org/">Documentation</a></li>
<li><a class="dropdown-item" href="https://docs.ros.org/en/rolling/Contact.html#support">Support</a></li>
<li><a class="dropdown-item" href="http://discourse.ros.org/">Discussion Forum</a></li>
<li><a class="dropdown-item" href="http://status.ros.org/">Service Status</a></li>
<li><a class="dropdown-item" href="https://robotics.stackexchange.com/questions/tagged/ros">ros @ Robotics Stack Exchange</a></li>
<li><a class="dropdown-item" 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>
<li class="list-inline-item dropdown d-none d-md-inline">
<button id="aLabel" class="btn btn-link dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
About
</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}}/help">Help</a></li>
<li><a href="{{site.baseurl}}/stats">Stats</a></li>
<ul class="dropdown-menu dropdown-menu-end" role="menu" aria-labelledby="aLabel">
<li><a class="dropdown-item" href="{{site.baseurl}}/about">About </a></li>
<li><a class="dropdown-item" href="{{site.baseurl}}/contribute">Contribute</a></li>
<li><a class="dropdown-item" href="{{site.baseurl}}/help">Help</a></li>
<li><a class="dropdown-item" 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>
<li class="list-inline-item dropdown d-md-none">
<button id="qLabel" class="btn btn-link dropdown-toggle" type="button"
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Resources
</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}}/help">Help</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="https://docs.ros.org/en/rolling/Contact.html#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 class="dropdown-menu dropdown-menu-end" role="menu" aria-labelledby="qLabel">
<li><a class="dropdown-item" href="{{site.baseurl}}/about">About </a></li>
<li><a class="dropdown-item" href="{{site.baseurl}}/contribute">Contribute</a></li>
<li><a class="dropdown-item" href="{{site.baseurl}}/help">Help</a></li>
<li><a class="dropdown-item" href="{{site.baseurl}}/stats">Stats</a></li>
<li><hr class="dropdown-divider" /></li>
<li><a class="dropdown-item" href="http://docs.ros.org/">Documentation</a></li>
<li><a class="dropdown-item" href="https://docs.ros.org/en/rolling/Contact.html#support">Support</a></li>
<li><a class="dropdown-item" href="http://discourse.ros.org/">Discussion Forum</a></li>
<li><a class="dropdown-item" href="http://status.ros.org/">Service Status</a></li>
<li><a class="dropdown-item" href="https://robotics.stackexchange.com/questions/tagged/ros">ros @ Robotics Stack Exchange</a></li>
<li><a class="dropdown-item" href="https://docs.ros.org/en/ros2_packages/">Package API</a></li>
</ul>
</li>
</ul>
Expand Down
Loading