Fix flowr output to work with Bootstrap 4

app/assets/javascripts/editor/participantsupport.js.erb

@@ -1,15 +1,20 @@
 CodeOceanEditorFlowr = {
   isFlowrEnabled: <%= CodeOcean::Config.new(:code_ocean).read[:flowr][:enabled] %>,
   flowrResultHtml:
-    '<div class="panel panel-default">' +
+    '<div class="card mb-2">' +
-      '<div id="{{headingId}}" role="tab" class="panel-heading">' +
+      '<div id="{{headingId}}" role="tab" class="card-header">' +
-        '<h4 class="panel-title">' +
+        '<div class="card-title mb-0">' +
           '<a data-toggle="collapse" data-parent="#flowrHint" href="#{{collapseId}}" aria-expanded="true" aria-controls="{{collapseId}}">' +
+            '<div class="clearfix" role="button">' +
+              '<i class="fa" aria-hidden="true" />' +
+              '<span>' +
+              '</span>' +
+            '</div>' +
           '</a>' +
-        '</h4>' +
+        '</div>' +
       '</div>' +
-      '<div id="{{collapseId}}" role="tabpanel" aria-labelledby="{{headingId}}" class="panel-collapse collapse">' +
+      '<div id="{{collapseId}}" role="tabpanel" aria-labelledby="{{headingId}}" class="card card-collapse collapse">' +
-        '<div class="panel-body"></div>' +
+        '<div class="card-body"></div>' +
       '</div>' +
     '</div>',
 
@@ -80,7 +85,7 @@ CodeOceanEditorFlowr = {
   handleStderrOutputForFlowr: function () {
     if (! this.isFlowrEnabled) return;
 
-    var flowrHintBody = $('#flowrHint .panel-body');
+    var flowrHintBody = $('#flowrHint .card-body');
     flowrHintBody.empty();
     var self = this;
 
@@ -92,11 +97,11 @@ CodeOceanEditorFlowr = {
         var resultTile = $(collapsibleTileHtml);
         var questionUrl = 'https://stackoverflow.com/questions/' + result.question_id;
 
-        var header = resultTile.find('h4 > a');
+        var header = resultTile.find('span');
         header.text(result.title);
         header.on('click', self.createEventHandler('editor_flowr_expand_question', questionUrl));
 
-        var body = resultTile.find('.panel-body');
+        var body = resultTile.find('.card-body');
         body.html(result.body);
         body.append('<a target="_blank" href="' + questionUrl + '" class="btn btn-primary btn-block">' +
           '<%= I18n.t('exercises.implement.flowr.go_to_question') %></a>');

app/views/exercises/_editor_output.html.slim

@@ -57,4 +57,4 @@ div.h-100 id='output_sidebar_uncollapsed' class='d-none col-sm-12 enforce-bottom
         - if CodeOcean::Config.new(:code_ocean).read[:flowr][:enabled]
           #flowrHint.card.text-white.bg-info data-url=CodeOcean::Config.new(:code_ocean).read[:flowr][:url] role='tab'
             .card-header = t('exercises.implement.flowr.heading')
-            .card-body
+            .card-body.text-dark.bg-white

config/routes.rb

@@ -40,8 +40,6 @@ Rails.application.routes.draw do
     get 'dashboard', to: 'dashboard#show'
   end
 
-  get '/help', to: 'application#help'
-
   get '/insights', to: 'flowr#insights'
 
   get 'statistics/', to: 'statistics#show'