Upgrade to Bootstrap 5.3

lucaswerkmeister · lucaswerkmeister · commit 2ed0a20090df · 2025-02-18T20:43:56.000+01:00
Mainly following Wikidata Lexeme Forms commit 0d201ca1a4 for reference.
diff --git a/{{cookiecutter.tool_identifier}}/app.py b/{{cookiecutter.tool_identifier}}/app.py
@@ -105,13 +105,13 @@ def authentication_area(){% if cookiecutter.set_up_mypy == "True" %} -> Markup{%
 
     session = authenticated_session()
     if session is None:
-        return (Markup(r'<a id="login" class="navbar-text" href="') +
+        return (Markup(r'<span class="nav-item"><a id="login" class="nav-link navbar-text" href="') +
                 Markup.escape(flask.url_for('login')) +
-                Markup(r'">Log in</a>'))
+                Markup(r'">Log in</a></span>'))
 
     userinfo = session.get(action='query',
                            meta='userinfo')['query']['userinfo']
-    return (Markup(r'<span class="navbar-text">Logged in as ') +
+    return (Markup(r'<span class="nav-item navbar-text">Logged in as ') +
             user_link(userinfo['name']) +
             Markup(r'</span>'))
 
diff --git a/{{cookiecutter.tool_identifier}}/templates/base.html b/{{cookiecutter.tool_identifier}}/templates/base.html
@@ -5,19 +5,21 @@
     <meta charset="utf-8">
     <title>{% block title %}{% endraw %}{{ cookiecutter.tool_name }}{% raw %}{% endblock title %}</title>
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="https://tools-static.wmflabs.org/cdnjs/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://tools-static.wmflabs.org/cdnjs/ajax/libs/twitter-bootstrap/5.3.3/css/bootstrap.min.css" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
     {% endblock head %}
   </head>
   <body>
-    <a href="#main" class="sr-only sr-only-focusable">Skip to main content</a>
+    <a href="#main" class="visually-hidden visually-hidden-focusable">Skip to main content</a>
     <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
-      <a href="{{ url_for('index') }}" class="navbar-brand">{% endraw %}{{ cookiecutter.tool_name }}{% raw %}</a>
-      <ul class="navbar-nav mr-auto">
-        <li class="nav-item"><a href="https://{% endraw %}{{ cookiecutter.wiki_domain }}{% raw %}/wiki/User:{% endraw %}{{ cookiecutter.user_name | replace(' ', '_') }}/{{ cookiecutter.tool_name | replace(' ', '_') }}{% raw %}" class="nav-link">Documentation</a></li>
-        <li class="nav-item"><a href="https://toolforge.org/" class="nav-link">Wikimedia Toolforge</a></li>
-        <li class="nav-item"><a href="https://gitlab.wikimedia.org/toolforge-repos/{% endraw %}{{ cookiecutter.tool_identifier }}{% raw %}" class="nav-link">Source code</a></li>
-      </ul>
-      {{ authentication_area() }}
+      <div class="container-fluid">
+        <a href="{{ url_for('index') }}" class="navbar-brand">{% endraw %}{{ cookiecutter.tool_name }}{% raw %}</a>
+        <ul class="navbar-nav me-auto">
+          <li class="nav-item"><a href="https://{% endraw %}{{ cookiecutter.wiki_domain }}{% raw %}/wiki/User:{% endraw %}{{ cookiecutter.user_name | replace(' ', '_') }}/{{ cookiecutter.tool_name | replace(' ', '_') }}{% raw %}" class="nav-link">Documentation</a></li>
+          <li class="nav-item"><a href="https://toolforge.org/" class="nav-link">Wikimedia Toolforge</a></li>
+          <li class="nav-item"><a href="https://gitlab.wikimedia.org/toolforge-repos/{% endraw %}{{ cookiecutter.tool_identifier }}{% raw %}" class="nav-link">Source code</a></li>
+        </ul>
+        {{ authentication_area() }}
+      </div>
     </nav>
     <main id="main" class="container mt-3">
       {% block main %}
