Switch to Bootstrap 4

Gemfile

@@ -37,18 +37,16 @@ gem 'web-console', '~> 4.0.1', group: :development
 # Use Codacy for coverage
 gem 'codacy-coverage', :require => false
 
-gem 'bootstrap-sass', '~> 3.4.1'
-gem 'autoprefixer-rails', '~> 9.6.1'
-
-gem 'bh', '~> 1.3.6'
+gem 'bootstrap', '~> 4.4.1'
+gem "bootstrap_form", "~> 4.0"
+gem 'font-awesome-sass', '~> 5.12.0'
 
 # Use Diffy for showing translation diffs
 gem 'diffy'
 gem 'diff-lcs'
 
 gem 'will_paginate', '~> 3.1.8'
-gem 'will-paginate-i18n', '~> 0.1.15'
-gem 'will_paginate-bootstrap', '~> 1.0.2'
+gem 'will_paginate-bootstrap4', '~> 0.2.2'
 
 gem 'devise', '~> 4.7.1'
 gem 'omniauth'

Gemfile.lock

@@ -56,18 +56,19 @@ GEM
       minitest (~> 5.1)
       tzinfo (~> 1.1)
       zeitwerk (~> 2.2)
-    autoprefixer-rails (9.6.5)
+    autoprefixer-rails (9.7.3)
       execjs
     bcrypt (3.1.13)
-    bh (1.3.6)
-      actionpack
-      activesupport
     bindex (0.8.1)
     bootsnap (1.4.5)
       msgpack (~> 1.0)
-    bootstrap-sass (3.4.1)
-      autoprefixer-rails (>= 5.2.1)
-      sassc (>= 2.0.0)
+    bootstrap (4.4.1)
+      autoprefixer-rails (>= 9.1.0)
+      popper_js (>= 1.14.3, < 2)
+      sassc-rails (>= 2.0.0)
+    bootstrap_form (4.3.0)
+      actionpack (>= 5.0)
+      activemodel (>= 5.0)
     builder (3.2.3)
     codacy-coverage (2.1.5)
       simplecov
@@ -94,6 +95,8 @@ GEM
     faraday (0.17.0)
       multipart-post (>= 1.2, < 3)
     ffi (1.11.2)
+    font-awesome-sass (5.12.0)
+      sassc (>= 1.11)
     globalid (0.4.2)
       activesupport (>= 4.2.0)
     hashie (3.6.0)
@@ -143,6 +146,7 @@ GEM
       oauth2 (~> 1.1)
       omniauth (~> 1.9)
     orm_adapter (0.5.0)
+    popper_js (1.14.5)
     rack (2.0.8)
     rack-test (1.1.0)
       rack (>= 1.0, < 3)
@@ -227,25 +231,24 @@ GEM
     websocket-driver (0.7.1)
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.4)
-    will-paginate-i18n (0.1.15)
     will_paginate (3.1.8)
-    will_paginate-bootstrap (1.0.2)
-      will_paginate (>= 3.0.3)
+    will_paginate-bootstrap4 (0.2.2)
+      will_paginate (~> 3.0, >= 3.0.0)
     zeitwerk (2.2.1)
 
 PLATFORMS
   ruby
 
 DEPENDENCIES
-  autoprefixer-rails (~> 9.6.1)
-  bh (~> 1.3.6)
   bootsnap
-  bootstrap-sass (~> 3.4.1)
+  bootstrap (~> 4.4.1)
+  bootstrap_form (~> 4.0)
   codacy-coverage
   coffee-rails (~> 5.0.0)
   devise (~> 4.7.1)
   diff-lcs
   diffy
+  font-awesome-sass (~> 5.12.0)
   jbuilder (~> 2.9.1)
   jquery-rails (~> 4.3.5)
   mysql2 (~> 0.5.2)
@@ -261,9 +264,8 @@ DEPENDENCIES
   tzinfo-data
   uglifier (~> 4.1.20)
   web-console (~> 4.0.1)
-  will-paginate-i18n (~> 0.1.15)
   will_paginate (~> 3.1.8)
-  will_paginate-bootstrap (~> 1.0.2)
+  will_paginate-bootstrap4 (~> 0.2.2)
 
 BUNDLED WITH
    2.0.2

app/assets/javascripts/application.js

@@ -10,9 +10,10 @@
 // Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
 // about supported directives.
 //
-//= require jquery
-//= require jquery_ujs
 //= require turbolinks
+//= require jquery3
+//= require rails-ujs
+//= require popper
 //= require bootstrap-sprockets
 //= require codemirror/codemirror
 //= require codemirror/addon/display/placeholder

app/assets/javascripts/init.coffee

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

app/assets/stylesheets/application.css.scss

@@ -15,11 +15,13 @@
  *= require_tree .
  */
 
-@import "bootstrap-sprockets";
 @import "bootstrap";
+@import "rails_bootstrap_forms";
+@import "font-awesome-sprockets";
+@import "font-awesome";
 
 .turbolinks-progress-bar {
-  background-color: $brand-primary;
+  background-color: $primary;
 }
 /* Sticky footer styles
 -------------------------------------------------- */
@@ -37,21 +39,33 @@ body {
   width: 100%;
   /* Set the fixed height of the footer here */
   height: 40px;
-  background-color: $navbar-default-bg;
+  background-color: $light;
 }
 
 .container .text-muted {
   margin: 10px 0;
 }
 
+.problem-buttons {
+  position: relative;
+  display: block;
+}
+
+.problem-buttons .problem-buttons-inner {
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 10;
+}
+
 /* Style for links to previous and next problem */
 .problem-prev {
-  @extend .pull-left;
+  float: left;
   margin: 20px -30px 0;
 }
 
 .problem-next {
-  @extend .pull-right;
+  float: right;
   margin: 20px -30px 0;
 }
 

app/helpers/application_helper.rb

@@ -27,4 +27,12 @@ module ApplicationHelper
       page_title + ' - ' + base_title
     end
   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'
+    end
+  end
+
 end

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

@@ -1,6 +1,8 @@
 <% provide(:title, 'Copyright') %>
 
-<div class="page-header"><h1>Copyright</h1></div>
+<div class="pb-2 mt-4 mb-2 border-bottom">
+  <h1>Copyright</h1>
+</div>
 <div class="bs-callout bs-callout-info">Dieser Artikel dient gleichzeitig der Übersetzung der <a href="https://projecteuler.net/copyright">"Copyright Information" auf projecteuler.net</a> sowie der tatsächlich geltenden Copyright-Informationen für diese Seite.</div>
 <h2>Kann ich die Probleme woanders benutzen?</h2>
 <p>Ja! Es ist nicht nur erlaubt, sondern beherzt, das Material zu teilen und frei zu benutzen - für nichtkommerzielle Zwecke. Aber bitte lesen Sie weiter...<br />

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

@@ -1,12 +1,10 @@
 <div class="jumbotron">
-  <div class="container">
-    <h1>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>
-      <%= link_to about_info_path, class: 'btn btn-primary btn-lg' do %>
-          Mehr erfahren &raquo;
-      <% end %>
-  </div>
+  <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">
+    <%= link_to about_info_path, class: 'btn btn-primary btn-lg' do %>
+        Mehr erfahren &raquo;
+    <% end %>
 </div>
 
 <div class="container">
@@ -16,7 +14,7 @@
       <h2>Ansehen</h2>
       <p>Sehen Sie sich die mathematischen Probleme in deutscher Sprache an.</p>
       <p>
-        <%= link_to problems_path, class: 'btn btn-default' do %>
+        <%= link_to problems_path, class: 'btn btn-primary' do %>
             Zu den Problemen &raquo;
         <% end %>
       </p>
@@ -28,7 +26,7 @@
     <div class="col-md-4">
       <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-default" href="https://github.com/projekteuler/projekteuler" target="_blank" role="button">Projekt Euler auf GitHub &raquo;</a></p>
+      <p><a class="btn btn-primary" href="https://github.com/projekteuler/projekteuler" target="_blank">Projekt Euler auf GitHub &raquo;</a></p>
     </div>
   </div>
 </div>

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

@@ -1,8 +1,8 @@
 <% provide(:title, 'Über Project Euler') %>
-
-<div class="page-header">
-  <h1>Über Project Euler</h1>
+<div class="pb-2 mt-4 mb-2 border-bottom">
+    <h1>Über Project Euler</h1>
 </div>
+
 <h2>Was ist Project Euler?</h2>
 <%= image_tag 'euler_main.jpg', alt: 'Leonhard Euler (1707-1783)', width: '150px', style: 'border:1px solid black;margin:10px;float:right' %>
 <p>Project Euler ist eine Serie von herausfordernden mathematischen bzw. Programmier-Problemen, die mehr als nur mathematische Einblicke zum Lösen erfordern. Obwohl die Mathematik Ihnen helfen wird, auf elegante und effiziente Lösungswege zu kommen, ist der Gebrauch von Computer- und Programmierkenntnissen nötig, um den Großteil der Probleme zu lösen.<br /><br />Die Motivation für das Starten und die Instandhaltung von Project Euler ist die, dem Forschergeist eine Plattform bereitzustellen, die sich mit unbekannten Gebieten befasst, und neue Konzepte in einem spaßigen und freizeitlichen Kontext zu erlernen.</p>
@@ -18,4 +18,4 @@
 </p>
 <p>Aber wenn die Probleme nach einer Herausforderung klingen, dann können Sie sich die <%= link_to 'Probleme', problems_path %> ansehen, bevor Sie sich registrieren.
 </p>
-<blockquote><p>&quot;Project Euler existiert zum Begeistern, Herausfordern und Entwickeln der Fähigkeiten und des Genusses von jedem mit einem Interesse für die faszinierende Welt der Mathematik.&quot;</p></blockquote>
+<blockquote class="blockquote"><p>&quot;Project Euler existiert zum Begeistern, Herausfordern und Entwickeln der Fähigkeiten und des Genusses von jedem mit einem Interesse für die faszinierende Welt der Mathematik.&quot;</p></blockquote>

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

@@ -1,6 +1,8 @@
 <% provide(:title, 'Impressum') %>
 
-<div class="page-header"><h1>Impressum</h1></div>
+<div class="pb-2 mt-4 mb-2 border-bottom">
+  <h1>Impressum</h1>
+</div>
 <p>Angaben gemäß § 5 TMG:<br/><br/></p>
 <p>Philipp Fischbeck<br />
   Großbeerenstraße 48<br />

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

@@ -1,6 +1,8 @@
 <% provide(:title, 'Datenschutz') %>
 
-<div class="page-header"><h1>Datenschutz</h1></div>
+<div class="pb-2 mt-4 mb-2 border-bottom">
+  <h1>Datenschutz</h1>
+</div>
 
 <p>Diese Datenschutz-Information gilt für die Datenverarbeitung durch:<br /></p>
 <p>Philipp Fischbeck<br />

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

@@ -1,6 +1,6 @@
 <%= provide(:title, 'Über römische Zahlen') %>
 
-<div class="page-header">
+<div class="pb-2 mt-4 mb-2 border-bottom">
   <h1>Über... römische Zahlen</h1>
 </div>
 <h3>Wie liest und schreibt man römische Zahlen?</h3>

app/views/admin/dashboard/index.html.erb

@@ -1,6 +1,8 @@
 <% provide(:title, t('.administration')) %>
-<h1><%= t('.administration') %></h1>
-<%= link_to t('.view_translations'), admin_translations_path, class: 'btn btn-default' %>
+<div class="pb-2 mt-4 mb-2 border-bottom">
+  <h1><%= t('.administration') %></h1>
+</div>
+<%= link_to t('.view_translations'), admin_translations_path, class: 'btn btn-primary' %>
 
 <h1><%= t('.update_problem_count') %></h1>
 <%= form_tag '/admin/update_problem_count', method: :post, class: 'form-inline' do %>

app/views/admin/translations/_translation_pagination.html.erb

@@ -1 +1 @@
-<%= will_paginate @translations, renderer: BootstrapPagination::Rails %>
+<%= will_paginate @translations, renderer: WillPaginate::ActionView::BootstrapLinkRenderer %>

app/views/admin/translations/index.html.erb

@@ -1,6 +1,8 @@
 <% provide(:title, Translation.model_name.human(count: 2)) %>
 
-<h1><%= Translation.model_name.human(count: 2) %></h1>
+<div class="pb-2 mt-4 mb-2 border-bottom">
+  <h1><%= Translation.model_name.human(count: 2) %></h1>
+</div>
 
 <%= render 'translation_pagination' %>
 <table class="table table-striped table-bordered">

app/views/admin/translations/show.html.erb

@@ -1,6 +1,6 @@
 <% provide(:title, t('problems.show.problem_subtitle', id: @translation.problem_id)) %>
 
-<div class="page-header">
+<div class="pb-2 mt-4 mb-2">
   <p class="text-muted">
     <%= render 'shared/authors', authors: Array(@translation.author) %>
   </p>
@@ -8,19 +8,23 @@
 </div>
 
 <% if @translation.pending? %>
-  <%= link_to admin_translation_decline_path(@translation), method: :post, class: 'btn btn-default btn-sm pull-right' do %>
-    <%= icon :remove %> <%= t '.decline_translation' %>
-  <% end %>
-  <%= link_to admin_translation_accept_path(@translation), method: :post, class: 'btn btn-default btn-sm pull-right' do %>
-    <%= icon :ok %> <%= t '.accept_translation' %>
-  <% end %>
+  <div class="problem-buttons">
+    <div class="btn-group problem-buttons-inner">
+    <%= link_to admin_translation_decline_path(@translation), method: :post, class: 'btn btn-danger btn-sm' do %>
+      <%= icon('fas', 'times') %> <%= t '.decline_translation' %>
+    <% end %>
+    <%= link_to admin_translation_accept_path(@translation), method: :post, class: 'btn btn-success btn-sm' do %>
+      <%= icon('fas', 'check') %> <%= t '.accept_translation' %>
+    <% end %>
+    </div>
+  </div>
 <% end %>
 
-<%= panel do %>
-    <div class="panel-body problem-content">
+<div class="card mb-3">
+    <div class="card-body problem-content">
         <%= sanitize @translation.content, scrubber: TranslationContentScrubber.new %>
     </div>
-<% end %>
+</div>
 
 <% if @translation.problem.is_translated? %>
   <% if @translation.title != @translation.problem.title %>

app/views/layouts/_header.html.erb

@@ -1,33 +1,40 @@
-<%= navbar position: :static do %>
-    <%= vertical do %>
-        <%= link_to t('application.site_title'), root_path %>
-    <% end %>
-    <%= horizontal do %>
-        <%= nav class: 'navbar-left' do %>
-            <%= link_to t('application.info'), about_info_path %>
-            <%= link_to Problem.model_name.human(count: 2), problems_path %>
+<nav class="navbar navbar-expand-lg navbar-light bg-light">
+    <%= 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">
+      <span class="navbar-toggler-icon"></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? %>
-                <%= link_to t('admin.dashboard.index.administration'), admin_dashboard_index_path %>
-                <%= link_to admin_translations_path do %>
-                  <%= t('admin.dashboard.index.translations') %> <span class="badge"><%= Translation.pending.count %></span>
+                <%= 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 %>
-        <% end %>
-        <%= nav class: 'navbar-right' do %>
-            <% if user_signed_in? %>
+        </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 :star %></b>
+                  <b><%= icon('fas', 'star') %></b>
                 <% end %>
               </span>
-              <%= link_to(t('application.sign_out'), destroy_user_session_path, method: :delete) %>
-            <% else %>
+            </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) %>
+                <%= link_to t('application.sign_in_with_github'), user_developer_omniauth_authorize_path, class: 'nav-link' %>
               <% else %>
-                <%= link_to(t('application.sign_in_with_github'), user_github_omniauth_authorize_path) %>
+                <%= link_to t('application.sign_in_with_github'), user_github_omniauth_authorize_path, class: 'nav-link' %>
               <% end %>
-            <% end %>
-        <% end %>
-    <% end %>
-<% end %>
+            </li>
+          <% end %>
+        </ul>
+    </div>
+</nav>

app/views/layouts/application.html.erb

@@ -15,11 +15,9 @@
 <body>
 <main role="main">
   <%= render 'layouts/header' %>
-  <div class="container">
+  <div class="container mt-3 mb-3">
     <%= flash_messages %>
-    <div class="row">
-      <%= yield %>
-    </div>
+    <%= yield %>
   </div>
 </main>
 

app/views/problems/_problem_pagination.erb

@@ -1 +1 @@
-<%= will_paginate @problems, renderer: BootstrapPagination::Rails %>
+<%= will_paginate @problems, renderer: WillPaginate::ActionView::BootstrapLinkRenderer %>

app/views/problems/index.html.erb

@@ -1,9 +1,15 @@
 <% provide(:title, Problem.model_name.human(count: 2)) %>
 
-<div class="page-header"><h1><%= Problem.model_name.human(count: 2) %></h1></div>
+<div class="pb-2 mt-4 mb-2 border-bottom">
+  <h1><%= Problem.model_name.human(count: 2) %></h1>
+</div>
 
 <p><%= t('problems.index.translated_count', translated: Problem.translated_count, total: Problem.count) %></p>
-<%= progress_bar percentage: @translated_percentage, label: true, striped: true %>
+<div class="progress mb-3">
+  <div class="progress-bar progress-bar-striped bg-primary" role="progressbar" style="width: <%= @translated_percentage %>%" aria-valuenow="<%= @translated_percentage %>>" aria-valuemin="0" aria-valuemax="100">
+    <%= @translated_percentage %>%
+  </div>
+</div>
 
 <%= render 'problem_pagination' %>
 <table class="table table-striped table-bordered">
@@ -23,8 +29,8 @@
             <%= link_to problem.title, problem %>
           <% else %>
               <i><%= t 'problems.not_yet_translated' %></i>
-              <%= link_to new_problem_translation_path(problem), class: 'btn btn-default btn-xs' do %>
-                  <%= icon :pencil %> <%= t '.suggest_translation' %>
+              <%= link_to new_problem_translation_path(problem), class: 'btn btn-primary btn-sm' do %>
+                  <%= icon('fas', 'edit') %> <%= t '.suggest_translation' %>
               <% end %>
           <% end %>
 

app/views/problems/show.html.erb

@@ -1,6 +1,6 @@
 <% provide(:title, t('problems.show.problem_subtitle', id: @problem.id)) %>
 
-<div class="page-header">
+<div class="pb-2 mt-4 mb-2">
   <p class="text-muted">
     <%= render 'shared/authors', authors: @problem.authors, has_anonymous_author: @problem.has_anonymous_author? %>
   </p>
@@ -8,22 +8,24 @@
 </div>
 <% if Problem.exists?(@problem.id-1) %>
   <%= link_to problem_path(@problem.id-1), title: t('problems.show.problem_subtitle', id: @problem.id-1), class: 'problem-prev' do %>
-    <%= icon :menu_left %>
+    <%= icon('fas', 'chevron-left') %>
   <% end %>
 <% end %>
 <% if Problem.exists?(@problem.id+1) %>
   <%= link_to problem_path(@problem.id+1), title: t('problems.show.problem_subtitle', id: @problem.id+1), class: 'problem-next' do %>
-    <%= icon :menu_right %>
+    <%= icon('fas', 'chevron-right') %>
   <% end %>
 <% end %>
-<%= link_to new_problem_translation_path(@problem), class: 'btn btn-default btn-sm pull-right' do %>
-  <%= icon :pencil %> <%= t '.improve_translation' %>
-<% end %>
-<%= panel do %>
-    <div class="panel-body problem-content">
+<div class="problem-buttons">
+  <%= link_to new_problem_translation_path(@problem), class: 'problem-buttons-inner btn btn-primary btn-sm' do %>
+    <%= icon('fas', 'edit') %> <%= t '.improve_translation' %>
+  <% end %>
+</div>
+<div class="card mb-3">
+    <div class="card-body problem-content">
       <%= sanitize @problem.content, scrubber: TranslationContentScrubber.new %>
     </div>
-<% end %>
+</div>
 <div class="text-center">
   <%= link_to t('.view_original_problem'), @problem.original_url, target: '_blank' %>
 </div>

app/views/problems/untranslated.html.erb

@@ -1,10 +1,10 @@
 <% provide(:title, t('problems.show.problem_subtitle', id: @problem.id)) %>
 
-<div class="page-header">
+<div class="pb-2 mt-4 mb-2 border-bottom">
   <h1><%= t 'problems.show.problem_subtitle', id: @problem.id %></h1>
 </div>
 
 <%= t 'problems.not_yet_translated' %>
 <%= link_to new_problem_translation_path(@problem), class: 'btn btn-default btn-xs' do %>
-    <%= icon :pencil %> <%= t 'problems.index.suggest_translation' %>
+    <%= icon('fas', 'edit') %> <%= t 'problems.index.suggest_translation' %>
 <% end %>

app/views/translations/_form.html.erb

@@ -1,17 +1,23 @@
-<%= form_for [@problem, @translation], layout: :basic do |f| %>
+<%= bootstrap_form_for [@problem, @translation], layout: :basic do |f| %>
   <%= f.text_field :title %>
-  <%= nav id: 'translationNav' do %>
-    <%= link_to t('.source_code'), '#source', data: {toggle: 'tab'} %>
-    <%= link_to t('.preview'), '#preview', data: {toggle: 'tab'} %>
-  <% end %>
-  <div class="tab-content">
-    <div class="tab-pane active" id="source">
+  <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' %>
+    </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' %>
+    </li>
+  </ul>
+  <div class="tab-content" id="translationTabContent">
+    <div class="tab-pane show active" id="source" role="tabpanel" aria-labelledby="source-tab">
       <%= f.text_area :content, placeholder: t('.translation_source_explanation') %>
     </div>
-    <%= panel class: 'tab-pane', id: 'preview' do %>
-      <div class="panel-body problem-content">
+    <div class="tab-pane" id="preview" role="tabpanel" aria-labelledby="preview-tab">
+      <div class="card">
+        <div class="card-body problem-content">
+        </div>
       </div>
-    <% end %>
+    </div>
   </div>
   <div class="alert alert-info">
     <%= t '.copyright_warning_html' %>
@@ -19,8 +25,8 @@
       <%= t '.not_logged_in_warning' %>
     <% end %>
   </div>
-  <%= f.submit %>
+  <%= f.primary %>
   <% if user_signed_in? and current_user.admin? %>
-    <%= f.button t('.save_and_accept'), type: :submit, name: "accept", value: true, class: "btn-success" %>
+    <%= f.button t('.save_and_accept'), type: :submit, name: "accept", value: true, class: "btn btn-success" %>
   <% end %>
 <% end %>

app/views/translations/_translation-tips.de.html.erb

@@ -1,5 +1,8 @@
-<%= panel heading: 'Hinweise zur Erstellung von Übersetzungen', context: :info do %>
-  <div class='panel-body'>
+<div class="card">
+  <div class="card-header">
+    Hinweise zur Erstellung von Übersetzungen
+  </div>
+  <div class='card-body'>
     <ul>
       <li>Als Basis für jede Übersetzung dient der HTML-Quelltext von projecteuler.net.
         Dazu gehen Sie auf die entsprechende <%= link_to "Problem-Seite", @problem.original_url, target: '_blank' %>.
@@ -12,4 +15,4 @@
       <li>Die Sie-Form benutzen.</li>
     </ul>
   </div>
-<% end %>
+</div>

test/controllers/admin/translations_controller_test.rb

@@ -7,6 +7,8 @@ class Admin::TranslationsControllerTest < ActionDispatch::IntegrationTest
     login_admin
     @translation = translations(:translation_one)
     @translation_alternative = translations(:translation_two_alternative)
+    @translation_outdated = translations(:translation_two_outdated)
+    @translation_declined = translations(:translation_two_declined)
   end
   test "should get index" do
     get admin_translations_url
@@ -14,11 +16,26 @@ class Admin::TranslationsControllerTest < ActionDispatch::IntegrationTest
     assert_not_nil assigns(:translations)
   end
 
-  test "should show translation" do
+  test "should show current_translation" do
     get admin_translation_url(translation_id: @translation)
     assert_response :success
   end
 
+  test "should show alternative_translation" do
+    get admin_translation_url(translation_id: @translation_alternative)
+    assert_response :success
+  end
+
+  test "should show outdated_translation" do
+    get admin_translation_url(translation_id: @translation_outdated)
+    assert_response :success
+  end
+
+  test "should show declined_translation" do
+    get admin_translation_url(translation_id: @translation_declined)
+    assert_response :success
+  end
+
   test "should accept translation" do
     post admin_translation_accept_path(@translation_alternative)
     assert_redirected_to problem_path(2)

test/fixtures/translations.yml

@@ -18,6 +18,19 @@ translation_two_alternative:
   content: The changed content for the second problem
   status: 0
 
+translation_two_outdated:
+  problem_id: 2
+  title: Second title
+  content: The old content for the second problem
+  status: 2
+
+
+translation_two_declined:
+  problem_id: 2
+  title: Second title
+  content: The content for the second problem with typo
+  status: 3
+
 translation_with_html:
   problem_id: 4
   title: Some title