GH41457 Upgrade Bootstrap to v5.0 (#41651)

Author: calvh

web/pandas/_templates/layout.html

@@ -14,8 +14,8 @@
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
         <link rel='shortcut icon' type='image/x-icon' href='{{ base_url }}/static/img/favicon.ico'/>
         <link rel="stylesheet"
-              href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
-              integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
+              href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
+              integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
               crossorigin="anonymous">
         {% for stylesheet in static.css %}
             <link rel="stylesheet"
@@ -27,14 +27,14 @@
         <header>
             <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
                 <div class="container">
-                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation">
+                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation">
                         <span class="navbar-toggler-icon"></span>
                     </button>
 
                     {% if static.logo %}<a class="navbar-brand" href="{{ base_url }}/"><img alt="" src="{{ base_url }}{{ static.logo }}"/></a>{% endif %}
 
                     <div class="collapse navbar-collapse" id="nav-content">   
-                        <ul class="navbar-nav ml-auto">
+                        <ul class="navbar-nav ms-auto">
                             {% for item in navbar %}
                                 {% if not item.has_subitems %}
                                     <li class="nav-item">
@@ -43,7 +43,7 @@
                                 {% else %}
                                     <li class="nav-item dropdown">
                                         <a class="nav-link dropdown-toggle"
-                                           data-toggle="dropdown"
+                                           data-bs-toggle="dropdown"
                                            id="{{ item.slug }}"
                                            href="#"
                                            role="button"
@@ -68,7 +68,7 @@
             </div>
         </main>
         <footer class="container pt-4 pt-md-5 border-top">
-            <ul class="list-inline social-buttons float-right">
+            <ul class="list-inline social-buttons float-end">
                 <li class="list-inline-item">
                     <a href="https://twitter.com/pandas_dev/">
                         <i class="fab fa-twitter"></i>
@@ -89,15 +89,9 @@
                 pandas is a fiscally sponsored project of <a href="https://numfocus.org">NumFOCUS.</a>
             </p>
         </footer>
-                
-        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
-                integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
-                crossorigin="anonymous"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
-                integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
-                crossorigin="anonymous"></script>
-        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
-                integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
+        
+        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" 
+                integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" 
                 crossorigin="anonymous"></script>
     </body>
 </html>

web/pandas/contribute.md

@@ -14,7 +14,7 @@ and about current sponsors in the [sponsors page](about/sponsors.html).
             <i class="fas fa-circle fa-stack-2x pink"></i>
             <i class="fas fa-building fa-stack-1x fa-inverse"></i>
           </span>
-          <h4 class="service-heading mt-3 font-weight-bold blue">Corporate support</h4>
+          <h4 class="service-heading mt-3 fw-bold blue">Corporate support</h4>
           <p class="text-muted">
             pandas depends on companies and institutions using the software to support its development. Hiring
             people to work on pandas, or letting existing employees to contribute to the
@@ -28,7 +28,7 @@ and about current sponsors in the [sponsors page](about/sponsors.html).
             <i class="fas fa-circle fa-stack-2x pink"></i>
             <i class="fas fa-users fa-stack-1x fa-inverse"></i>
           </span>
-          <h4 class="service-heading mt-3 font-weight-bold blue">Individual contributors</h4>
+          <h4 class="service-heading mt-3 fw-bold blue">Individual contributors</h4>
           <p class="text-muted">
             pandas is mostly developed by volunteers. All kind of contributions are welcome,
             such as contributions to the code, to the website (including graphical designers),
@@ -42,7 +42,7 @@ and about current sponsors in the [sponsors page](about/sponsors.html).
             <i class="fas fa-circle fa-stack-2x pink"></i>
             <i class="fas fa-dollar-sign fa-stack-1x fa-inverse"></i>
           </span>
-          <h4 class="service-heading mt-3 font-weight-bold blue">Donations</h4>
+          <h4 class="service-heading mt-3 fw-bold blue">Donations</h4>
           <p class="text-muted">
             Individual donations are appreciated, and are used for things like the project
             infrastructure, travel expenses for our volunteer contributors to attend

web/pandas/index.html

@@ -3,7 +3,7 @@
     <div class="container">
         <div class="row">
             <div class="col-md-9">
-                <section class="jumbotron text-center">
+                <section class="h-30 p-5 bg-light border rounded-3 text-center mb-4">
                     <h1>pandas</h1>
                     <p>
                         <strong>pandas</strong> is a fast, powerful, flexible and easy to use open source data analysis and manipulation tool,<br/>
@@ -98,7 +98,7 @@ <h4>Previous versions</h4>
                 {% endif %}
                 {% if releases[5:] %}
                     <p class="text-center">
-                        <a data-toggle="collapse" href="#show-more-releases" role="button" aria-expanded="false" aria-controls="show-more-releases">Show more</a>
+                        <a data-bs-toggle="collapse" href="#show-more-releases" role="button" aria-expanded="false" aria-controls="show-more-releases">Show more</a>
                     </p>
                     <ul id="show-more-releases" class="collapse">
                         {% for release in releases[5:] %}

web/pandas/static/css/pandas.css

@@ -42,6 +42,18 @@ ol ol, ol ul, ul ol, ul ul {
 a.navbar-brand img {
     height: 3rem;
 }
+a:link:not(.btn):not(.dropdown-item):not(.nav-link) {
+text-decoration: none;
+}
+a:visited:not(.btn):not(.dropdown-item):not(.nav-link) {
+text-decoration: none;
+}
+a:hover:not(.btn):not(.dropdown-item):not(.nav-link) {
+text-decoration: underline;
+}
+a:active:not(.btn):not(.dropdown-item):not(.nav-link) {
+text-decoration: underline;
+}
 div.card {
     margin: 0 0 .2em .2em !important;
 }