Update HTML for Bootstrap 5

app/assets/javascripts/init.coffee

@@ -18,6 +18,6 @@ App.init = ->
 $(document).on "turbolinks:load", ->
   App.init()
 
-$(document).on "click", '#translationTab a[href="#preview"]', ->
+$(document).on "click", '#translationTab button[data-bs-target="#preview"]', ->
   $('#preview .problem-content').html(cm.getValue())
   MathJax.Hub.Queue(["Typeset",MathJax.Hub]);

app/helpers/application_helper.rb

@@ -7,11 +7,8 @@ module ApplicationHelper
     capture do
       flash.each do |msg_type, message|
         concat(content_tag(:div, message, class: "alert #{bootstrap_class_for(msg_type)} alert-dismissible", role: 'alert') do
-          concat(content_tag(:button, class: 'close', data: { dismiss: 'alert' }) do
-            concat content_tag(:span, '×'.html_safe, 'aria-hidden' => true)
-            concat content_tag(:span, 'Close', class: 'sr-only')
-          end)
           concat message
+          concat content_tag(:button, "", class: 'btn-close', data: { 'bs-dismiss': 'alert' }, 'aria-label': 'Close')
         end)
       end
       nil
@@ -29,9 +26,8 @@ module ApplicationHelper
   end
 
   def nav_link_to(body, url)
-    nav_options = { class: current_page?(url) ? 'nav-item active': 'nav-item' }
+    content_tag(:li, class: 'nav-item') do
-    content_tag(:li, nav_options) do
+      link_to body, url, class: current_page?(url) ? 'nav-link active': 'nav-link'
-      link_to body, url, class: 'nav-link'
     end
   end
 

app/views/about/index.de.html.erb

@@ -1,4 +1,4 @@
-<div class="jumbotron">
+<div class="bg-light p-5 rounded">
   <h1 class="display-4">Willkommen auf Projekt Euler!</h1>
   <p>Diese Seite ist eine Übersetzung der englischen Rätsel-Webseite <a href="https://projecteuler.net/">projecteuler.net</a>.</p>
   <p class="lead">
@@ -7,26 +7,27 @@
     <% end %>
 </div>
 
-<div class="container">
+<div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
-  <!-- Example row of columns -->
+  <div class="col d-flex align-items-start">
-  <div class="row">
+    <div>
-    <div class="col-md-4">
       <h2>Ansehen</h2>
       <p>Sehen Sie sich die mathematischen Probleme in deutscher Sprache an.</p>
-      <p>
       <%= link_to problems_path, class: 'btn btn-primary' do %>
           Zu den Problemen &raquo;
       <% end %>
-      </p>
     </div>
-    <div class="col-md-4">
+  </div>
+  <div class="col d-flex align-items-start">
+    <div>
       <h2>Übersetzen</h2>
       <p>Bisher wurden erst <%= Problem.translated_count %> der <%= Problem.count %> Probleme übersetzt. Helfen Sie mit, Übersetzungen zu erstellen und anzupassen!</p>
     </div>
-    <div class="col-md-4">
+  </div>
+  <div class="col d-flex align-items-start">
+    <div>
       <h2>Verbessern</h2>
       <p>Vermissen Sie eine Funktion auf der Webseite, oder ist Ihnen ein Fehler aufgefallen? Dann helfen Sie beim Entwickeln der Webseite in Ruby on Rails!</p>
-      <p><a class="btn btn-primary" href="https://github.com/projekteuler/projekteuler" target="_blank">Projekt Euler auf GitHub &raquo;</a></p>
+      <a class="btn btn-primary" href="https://github.com/projekteuler/projekteuler" target="_blank">Projekt Euler auf GitHub &raquo;</a>
     </div>
   </div>
 </div>

app/views/layouts/_header.html.erb

@@ -1,35 +1,37 @@
 <nav class="navbar navbar-expand-lg navbar-light bg-light">
   <div class="container">
-    <%= link_to t('application.site_title'), root_path, class: 'navbar-brand' %>
+    <%= link_to root_path, class: 'navbar-brand' do %>
-    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+      <%= image_tag "favicon.ico", alt: "", width: 24, height: 24, class: "d-inline-block align-text-top" %> <%= t('application.site_title') %>
+  <% end %>
+    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon">
         <%= icon('fas', 'bars') %>
       </span>
     </button>
     <div class="collapse navbar-collapse" id="navbarSupportedContent">
-        <ul class="navbar-nav mr-auto">
+      <ul class="navbar-nav me-auto">
           <%= nav_link_to t('application.info'), about_info_path %>
           <%= nav_link_to Problem.model_name.human(count: 2), problems_path %>
           <% if user_signed_in? and current_user.admin? %>
               <%= nav_link_to t('admin.dashboard.index.administration'), admin_dashboard_index_path %>
               <%= link_to admin_translations_path, class: 'nav-link' do %>
-                  <%= t('admin.dashboard.index.translations') %> <span class="badge badge-secondary"><%= Translation.pending.count %></span>
+                <%= t('admin.dashboard.index.translations') %> <span class="badge bg-secondary"><%= Translation.pending.count %></span>
               <% end %>
           <% end %>
       </ul>
-        <ul class="navbar-nav">
       <% if user_signed_in? %>
-            <li class="nav-item">
         <span class="navbar-text"><%= t 'application.logged_in_as_html', name: current_user.name %>
           <% if current_user.admin? %>
             <b><%= icon('fas', 'star') %></b>
           <% end %>
         </span>
-            </li>
+      <ul class="navbar-nav">
         <li class="nav-item">
           <%= link_to t('application.sign_out'), destroy_user_session_path, method: :delete, class: 'nav-link' %>
         </li>
+      </ul>
       <% else %>
+        <ul class="navbar-nav">
           <li class="nav-item">
             <% if Rails.env.development? %>
               <%= link_to t('application.sign_in_with_github'), user_developer_omniauth_authorize_path, method: :post, class: 'nav-link' %>
@@ -37,8 +39,8 @@
               <%= link_to t('application.sign_in_with_github'), user_github_omniauth_authorize_path, method: :post, class: 'nav-link' %>
             <% end %>
           </li>
-          <% end %>
         </ul>
+      <% end %>
     </div>
   </div>
 </nav>

app/views/translations/_form.html.erb

@@ -2,10 +2,10 @@
   <%= f.text_field :title %>
   <ul class="nav nav-tabs" id="translationTab" role="tablist">
     <li class="nav-item">
-      <%= link_to t('.source_code'), '#source', data: {toggle: 'tab'}, class:'nav-link active', id:'source-tab', role:'tab', 'aria-controls':'source', 'aria-selected':'true' %>
+      <button class="nav-link active" id="source-tab" data-bs-toggle="tab" data-bs-target="#source" type="button" role="tab" aria-controls="source" aria-selected="true"><%= t('.source_code') %></button>
     </li>
     <li class="nav-item">
-      <%= link_to t('.preview'), '#preview', data: {toggle: 'tab'}, class:'nav-link', id:'preview-tab', role:'tab', 'aria-controls':'preview', 'aria-selected':'false' %>
+      <button class="nav-link" id="preview-tab" data-bs-toggle="tab" data-bs-target="#preview" type="button" role="tab" aria-controls="preview" aria-selected="false"><%= t('.preview') %></button>
     </li>
   </ul>
   <div class="tab-content" id="translationTabContent">

test/helpers/application_helper_test.rb

@@ -8,6 +8,6 @@ class ApplicationHelperTest < ActionView::TestCase
 
   test "bootstrap flash messages should work" do
     flash[:error] = "Error"
-    assert_equal "<div class=\"alert alert-danger alert-dismissible\" role=\"alert\"><button class=\"close\" data-dismiss=\"alert\"><span aria-hidden=\"true\">&times;</span><span class=\"sr-only\">Close</span></button>Error</div>", flash_messages
+    assert_equal "<div class=\"alert alert-danger alert-dismissible\" role=\"alert\">Error<button class=\"btn-close\" data-bs-dismiss=\"alert\" aria-label=\"Close\"></button></div>", flash_messages
   end
 end