Switch to Bootstrap 4

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;
 }