Update header and footer, use cards for problems

app/assets/stylesheets/application.css.scss

@@ -39,13 +39,16 @@ body {
   width: 100%;
   /* Set the fixed height of the footer here */
   height: 40px;
+  line-height: 40px;
   background-color: $light;
 }
 
-.container .text-muted {
-  margin: 10px 0;
+/* Custom style for navbar toggler due to CSP problems */
+.navbar-toggler-icon {
+  background-image: none !important;
 }
 
+/* Style for buttons in the corner of problems/translations */
 .problem-buttons {
   position: relative;
   display: block;

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

@@ -3,7 +3,7 @@
 <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>
+<div class="alert alert-info" role="alert">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 />
   <br />

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

@@ -1,29 +1,31 @@
 <% provide(:title, t('problems.show.problem_subtitle', id: @translation.problem_id)) %>
 
 <div class="pb-2 mt-4 mb-2">
-  <p class="text-muted">
-    <%= render 'shared/authors', authors: Array(@translation.author) %>
-  </p>
-  <h1><%= @translation.title %> <small><%= t 'problems.show.problem_subtitle', id: @translation.problem_id %></small></h1>
+  <h1><%= @translation.title %></h1>
 </div>
 
-<% if @translation.pending? %>
-  <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 %>
-
 <div class="card mb-3">
-    <div class="card-body problem-content">
-        <%= sanitize @translation.content, scrubber: TranslationContentScrubber.new %>
+  <div class="card-header">
+    <%= t 'problems.show.problem_subtitle', id: @translation.problem_id %>
+  </div>
+  <% if @translation.pending? %>
+    <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 %>
+  <div class="card-body problem-content">
+      <%= sanitize @translation.content, scrubber: TranslationContentScrubber.new %>
+  </div>
+  <div class="card-footer text-muted">
+    <%= render 'shared/authors', authors: Array(@translation.author) %>
+  </div>
 </div>
 
 <% if @translation.problem.is_translated? %>

app/views/layouts/_footer.html.erb

@@ -1,9 +1,10 @@
 <footer class="footer">
-  <div class="container">
-    <p class="text-muted text-center">
+  <div class="container text-center">
+    <span class="text-muted">
       <%= link_to t('application.legal'), about_legal_path %>
       | <%= link_to t('application.privacy'), about_privacy_path %>
       | <%= link_to t('application.copyright'), about_copyright_path %>
-      | <%= t('application.bootstrap_html')%></p>
+      | <%= t('application.bootstrap_html')%>
+    </span>
   </div>
 </footer>

app/views/layouts/_header.html.erb

@@ -1,7 +1,10 @@
 <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">
-      <span class="navbar-toggler-icon"></span>
+      <span class="navbar-toggler-icon">
+        <%= icon('fas', 'bars') %>
+      </span>
     </button>
     <div class="collapse navbar-collapse" id="navbarSupportedContent">
         <ul class="navbar-nav mr-auto">
@@ -37,4 +40,5 @@
           <% end %>
         </ul>
     </div>
+  </div>
 </nav>

app/views/problems/show.html.erb

@@ -1,10 +1,7 @@
 <% provide(:title, t('problems.show.problem_subtitle', id: @problem.id)) %>
 
 <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>
-  <h1><%= @problem.title %> <small><%= t '.problem_subtitle', id: @problem.id %></small></h1>
+  <h1><%= @problem.title %></h1>
 </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 %>
@@ -16,15 +13,21 @@
     <%= icon('fas', 'chevron-right') %>
   <% end %>
 <% end %>
-<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>
+  <div class="card-header">
+    <%= t '.problem_subtitle', id: @problem.id %>
+  </div>
+  <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-body problem-content">
+    <%= sanitize @problem.content, scrubber: TranslationContentScrubber.new %>
+  </div>
+  <div class="card-footer text-muted">
+    <%= render 'shared/authors', authors: @problem.authors, has_anonymous_author: @problem.has_anonymous_author? %>
+  </div>
 </div>
 <div class="text-center">
   <%= link_to t('.view_original_problem'), @problem.original_url, target: '_blank' %>

app/views/problems/untranslated.html.erb

@@ -5,6 +5,6 @@
 </div>
 
 <%= t 'problems.not_yet_translated' %>
-<%= link_to new_problem_translation_path(@problem), class: 'btn btn-default btn-xs' do %>
+<%= link_to new_problem_translation_path(@problem), class: 'btn btn-primary btn-sm' do %>
     <%= icon('fas', 'edit') %> <%= t 'problems.index.suggest_translation' %>
 <% end %>

app/views/translations/_form.html.erb

@@ -13,7 +13,7 @@
       <%= f.text_area :content, placeholder: t('.translation_source_explanation') %>
     </div>
     <div class="tab-pane" id="preview" role="tabpanel" aria-labelledby="preview-tab">
-      <div class="card">
+      <div class="card mb-3">
         <div class="card-body problem-content">
         </div>
       </div>

test/integration/translator_flow_test.rb

@@ -4,7 +4,7 @@ class TranslatorFlowTest < ActionDispatch::IntegrationTest
   test "can view a problem" do
     get '/problems/1'
     assert_response :success
-    assert_select "h1", "First title Problem 1"
+    assert_select "h1", "First title"
   end
 
   test "can login via github" do