From f08254ffef39d4e5bfd4a5e04302093b288ae44e Mon Sep 17 00:00:00 2001
From: Philipp Fischbeck <philipp.fischbeck@hpi.de>
Date: Mon, 23 Dec 2019 17:49:54 +0100
Subject: [PATCH] Switch to Bootstrap 4

---
 Gemfile                                       | 10 ++--
 Gemfile.lock                                  | 32 +++++------
 app/assets/javascripts/application.js         |  5 +-
 app/assets/javascripts/init.coffee            |  2 +-
 app/assets/stylesheets/application.css.scss   | 24 +++++++--
 app/helpers/application_helper.rb             |  8 +++
 app/views/about/copyright.de.html.erb         |  4 +-
 app/views/about/index.de.html.erb             | 18 +++----
 app/views/about/info.de.html.erb              |  8 +--
 app/views/about/legal.de.html.erb             |  4 +-
 app/views/about/privacy.de.html.erb           |  4 +-
 app/views/about/roman_numerals.de.html.erb    |  2 +-
 app/views/admin/dashboard/index.html.erb      |  6 ++-
 .../_translation_pagination.html.erb          |  2 +-
 app/views/admin/translations/index.html.erb   |  4 +-
 app/views/admin/translations/show.html.erb    | 24 +++++----
 app/views/layouts/_header.html.erb            | 53 +++++++++++--------
 app/views/layouts/application.html.erb        |  6 +--
 app/views/problems/_problem_pagination.erb    |  2 +-
 app/views/problems/index.html.erb             | 14 +++--
 app/views/problems/show.html.erb              | 20 +++----
 app/views/problems/untranslated.html.erb      |  4 +-
 app/views/translations/_form.html.erb         | 30 ++++++-----
 .../_translation-tips.de.html.erb             |  9 ++--
 .../admin/translations_controller_test.rb     | 19 ++++++-
 test/fixtures/translations.yml                | 13 +++++
 26 files changed, 207 insertions(+), 120 deletions(-)

diff --git a/Gemfile b/Gemfile
index 34f4efe..2d71810 100644
--- a/Gemfile
+++ b/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'
diff --git a/Gemfile.lock b/Gemfile.lock
index 55e912d..d842ac2 100644
--- a/Gemfile.lock
+++ b/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
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 907c067..84f608f 100644
--- a/app/assets/javascripts/application.js
+++ b/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
diff --git a/app/assets/javascripts/init.coffee b/app/assets/javascripts/init.coffee
index fbac815..cabf848 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", '#translationNav a[href="#preview"]', ->
+$(document).on "click", '#translationTab a[href="#preview"]', ->
   $('#preview .problem-content').html(cm.getValue())
   MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
\ No newline at end of file
diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss
index da8e9b4..0e5ac21 100644
--- a/app/assets/stylesheets/application.css.scss
+++ b/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;
 }
 
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index ec958ef..66acd86 100644
--- a/app/helpers/application_helper.rb
+++ b/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
diff --git a/app/views/about/copyright.de.html.erb b/app/views/about/copyright.de.html.erb
index ebac61c..7f66d5a 100644
--- a/app/views/about/copyright.de.html.erb
+++ b/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 />
diff --git a/app/views/about/index.de.html.erb b/app/views/about/index.de.html.erb
index c0edcd1..f627490 100644
--- a/app/views/about/index.de.html.erb
+++ b/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>
\ No newline at end of file
diff --git a/app/views/about/info.de.html.erb b/app/views/about/info.de.html.erb
index 275d50e..ae9e17b 100644
--- a/app/views/about/info.de.html.erb
+++ b/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>
\ No newline at end of file
+<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>
\ No newline at end of file
diff --git a/app/views/about/legal.de.html.erb b/app/views/about/legal.de.html.erb
index 0512c08..6ca2ad4 100644
--- a/app/views/about/legal.de.html.erb
+++ b/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 />
diff --git a/app/views/about/privacy.de.html.erb b/app/views/about/privacy.de.html.erb
index da987bf..eaff58a 100644
--- a/app/views/about/privacy.de.html.erb
+++ b/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 />
diff --git a/app/views/about/roman_numerals.de.html.erb b/app/views/about/roman_numerals.de.html.erb
index c831cc3..567c611 100644
--- a/app/views/about/roman_numerals.de.html.erb
+++ b/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>
diff --git a/app/views/admin/dashboard/index.html.erb b/app/views/admin/dashboard/index.html.erb
index b6ab745..7e21c4b 100644
--- a/app/views/admin/dashboard/index.html.erb
+++ b/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 %>
diff --git a/app/views/admin/translations/_translation_pagination.html.erb b/app/views/admin/translations/_translation_pagination.html.erb
index d6e5b41..325d83c 100644
--- a/app/views/admin/translations/_translation_pagination.html.erb
+++ b/app/views/admin/translations/_translation_pagination.html.erb
@@ -1 +1 @@
-<%= will_paginate @translations, renderer: BootstrapPagination::Rails %>
\ No newline at end of file
+<%= will_paginate @translations, renderer: WillPaginate::ActionView::BootstrapLinkRenderer %>
\ No newline at end of file
diff --git a/app/views/admin/translations/index.html.erb b/app/views/admin/translations/index.html.erb
index 447c7de..e6d9090 100644
--- a/app/views/admin/translations/index.html.erb
+++ b/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">
diff --git a/app/views/admin/translations/show.html.erb b/app/views/admin/translations/show.html.erb
index 7e5bd73..f61e940 100644
--- a/app/views/admin/translations/show.html.erb
+++ b/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 %>
diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb
index 4964aa2..efbe8b4 100644
--- a/app/views/layouts/_header.html.erb
+++ b/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 %>
\ No newline at end of file
+            </li>
+          <% end %>
+        </ul>
+    </div>
+</nav>
\ No newline at end of file
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 90a821f..e820926 100644
--- a/app/views/layouts/application.html.erb
+++ b/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>
 
diff --git a/app/views/problems/_problem_pagination.erb b/app/views/problems/_problem_pagination.erb
index 4df9095..3b9fd53 100644
--- a/app/views/problems/_problem_pagination.erb
+++ b/app/views/problems/_problem_pagination.erb
@@ -1 +1 @@
-<%= will_paginate @problems, renderer: BootstrapPagination::Rails %>
\ No newline at end of file
+<%= will_paginate @problems, renderer: WillPaginate::ActionView::BootstrapLinkRenderer %>
\ No newline at end of file
diff --git a/app/views/problems/index.html.erb b/app/views/problems/index.html.erb
index 0250ae8..2704c7d 100644
--- a/app/views/problems/index.html.erb
+++ b/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 %>
 
diff --git a/app/views/problems/show.html.erb b/app/views/problems/show.html.erb
index 1b5d863..8414939 100644
--- a/app/views/problems/show.html.erb
+++ b/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>
\ No newline at end of file
diff --git a/app/views/problems/untranslated.html.erb b/app/views/problems/untranslated.html.erb
index 5aa1cb4..ab3838f 100644
--- a/app/views/problems/untranslated.html.erb
+++ b/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 %>
\ No newline at end of file
diff --git a/app/views/translations/_form.html.erb b/app/views/translations/_form.html.erb
index ce99b68..21a0dc6 100644
--- a/app/views/translations/_form.html.erb
+++ b/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 %>
diff --git a/app/views/translations/_translation-tips.de.html.erb b/app/views/translations/_translation-tips.de.html.erb
index ddc62f8..e0bb687 100644
--- a/app/views/translations/_translation-tips.de.html.erb
+++ b/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 %>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/test/controllers/admin/translations_controller_test.rb b/test/controllers/admin/translations_controller_test.rb
index 84fac82..99d67b6 100644
--- a/test/controllers/admin/translations_controller_test.rb
+++ b/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)
diff --git a/test/fixtures/translations.yml b/test/fixtures/translations.yml
index c5e6e33..d9140c1 100644
--- a/test/fixtures/translations.yml
+++ b/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