From e09a408d34030cd9030734b74fb03738f8cd7490 Mon Sep 17 00:00:00 2001
From: Philipp Fischbeck <philipp.fischbeck@hpi.de>
Date: Sun, 23 May 2021 13:46:15 +0200
Subject: [PATCH] Update HTML for Bootstrap 5

---
 app/assets/javascripts/init.coffee      |  2 +-
 app/helpers/application_helper.rb       | 10 ++--
 app/views/about/index.de.html.erb       | 27 ++++++-----
 app/views/layouts/_header.html.erb      | 64 +++++++++++++------------
 app/views/translations/_form.html.erb   |  4 +-
 test/helpers/application_helper_test.rb |  2 +-
 6 files changed, 54 insertions(+), 55 deletions(-)

diff --git a/app/assets/javascripts/init.coffee b/app/assets/javascripts/init.coffee
index cabf848..1f84e32 100644
--- a/app/assets/javascripts/init.coffee
+++ b/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]);
\ No newline at end of file
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index 66acd86..ef3fbc5 100644
--- a/app/helpers/application_helper.rb
+++ b/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, '&times;'.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, nav_options) do
-      link_to body, url, class: 'nav-link'
+    content_tag(:li, class: 'nav-item') do
+      link_to body, url, class: current_page?(url) ? 'nav-link active': 'nav-link'
     end
   end
 
diff --git a/app/views/about/index.de.html.erb b/app/views/about/index.de.html.erb
index f627490..0c9d6c7 100644
--- a/app/views/about/index.de.html.erb
+++ b/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">
-  <!-- Example row of columns -->
-  <div class="row">
-    <div class="col-md-4">
+<div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
+  <div class="col d-flex align-items-start">
+    <div>
       <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>
+      <%= link_to problems_path, class: 'btn btn-primary' do %>
+          Zu den Problemen &raquo;
+      <% end %>
     </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>
\ No newline at end of file
diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb
index 000b870..a3e50d5 100644
--- a/app/views/layouts/_header.html.erb
+++ b/app/views/layouts/_header.html.erb
@@ -1,44 +1,46 @@
 <nav class="navbar navbar-expand-lg navbar-light bg-light">
   <div class="container">
-    <%= link_to t('application.site_title'), root_path, class: 'navbar-brand' %>
-    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+    <%= link_to root_path, class: 'navbar-brand' do %>
+      <%= 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">
-            <%= 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>
-                <% 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>
-            <li class="nav-item">
-              <%= link_to t('application.sign_out'), destroy_user_session_path, method: :delete, class: 'nav-link' %>
-            </li>
-          <% else %>
-            <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' %>
-              <% else %>
-                <%= link_to t('application.sign_in_with_github'), user_github_omniauth_authorize_path, method: :post, class: 'nav-link' %>
+      <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 bg-secondary"><%= Translation.pending.count %></span>
               <% end %>
-            </li>
           <% end %>
+      </ul>
+      <% if user_signed_in? %>
+        <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>
+      <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' %>
+            <% else %>
+              <%= link_to t('application.sign_in_with_github'), user_github_omniauth_authorize_path, method: :post, class: 'nav-link' %>
+            <% end %>
+          </li>
         </ul>
+      <% end %>
     </div>
   </div>
 </nav>
\ No newline at end of file
diff --git a/app/views/translations/_form.html.erb b/app/views/translations/_form.html.erb
index 86aa359..4ade8a4 100644
--- a/app/views/translations/_form.html.erb
+++ b/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">
diff --git a/test/helpers/application_helper_test.rb b/test/helpers/application_helper_test.rb
index 4a29dc2..302e3c2 100644
--- a/test/helpers/application_helper_test.rb
+++ b/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