mumuki-laboratory 9.0.6 → 9.2.0

data/app/views/layouts/exercise_inputs/editors/_multiple_choice.html.erb

@@ -1,10 +1,8 @@
-<div class="form-group">
-  <input id="solution_content" type="text" name="solution[content]" style="display: none">
-  <% @exercise.pretty_choices.each do |choice| %>
-    <div class="field checkbox complementary complementary-checkbox">
-      <%= check_box_tag(choice.id, '1', checked?(choice, @current_content), class: 'solution-choice', 'data-index' => choice.index) %>
-      <%= label_tag(choice.id, choice.text) %>
-    </div>
-  <% end %>
-</div>
+<input class="d-none" id="solution_content" type="text" name="solution[content]">
+<% @exercise.pretty_choices.each do |choice| %>
+  <div class="form-check">
+    <%= check_box_tag(choice.id, '1', checked?(choice, @current_content), class: 'solution-choice form-check-input', 'data-index' => choice.index) %>
+    <%= label_tag(choice.id, choice.text, class: 'form-check-label') %>
+  </div>
+<% end %>
 

data/app/views/layouts/exercise_inputs/editors/_multiple_files.html.erb

@@ -1,22 +1,22 @@
-<div class="field form-group editor-code">
-
+<div class="editor-code">
   <div class="editor-files">
     <span class="files-tabs">
-      <ul class="nav nav-tabs">
+      <ul class="nav nav-tabs" role="tablist">
         <% @files.each_with_index do |file, index| %>
-          <li role="presentation" class="file-tab <%= 'active' if index == 0 %>" data-target="#editor-file-<%= index %>" tabindex='0' data-toggle='tab'>
-            <a class="file-name" href="#"><%= file.name %></a> <i class="delete-file-button fas fa-times"></i>
+          <li class="nav-item file-tab" role="presentation">
+            <a class="file-name nav-link <%= 'active' if index == 0 %>" href="#" role="tab" data-bs-target="#editor-file-<%= index %>"
+               tabindex='0' data-bs-toggle='tab'><%= file.name %></a> <i class="delete-file-button fas fa-times"></i>
           </li>
         <% end %>
       </ul>
-      <i class="add-file-button fas fa-plus"></i>
+      <%= fa_icon :plus, class: 'add-file-button' %>
     </span>
 
     <%= multifile_hidden_inputs %>
 
     <div class="tab-content">
       <% @files.each_with_index do |file, index| %>
-        <div role="tabpanel" class="file-editor tab-pane mu-input-panel <%= 'fade in active' if index == 0 %>" id="editor-file-<%= index %>">
+        <div role="tabpanel" class="file-editor tab-pane mu-input-panel <%= 'fade show active' if index == 0 %>" id="editor-file-<%= index %>">
           <%= form.editor "content[#{file.name}]", file.highlight_mode,
                           placeholder: t(:editor_placeholder),
                           class: 'form-control editor',
@@ -27,9 +27,9 @@
     </div>
 
     <div class="mu-overlapped multiple-files">
-      <a class="editor-resize"> <%= expand_icon %></a>
-      <a class="editor-format"><%= format_icon %></a>
-      <a class="editor-reset submission-reset" data-confirm="<%= t(:confirm_reset) %>" data-multiple-files="true"><%= restart_icon %></a>
+      <%= expand_icon %>
+      <%= format_icon %>
+      <%= restart_icon 'editor', {'data-confirm': t(:confirm_reset), 'data-multiple-files': 'true'} %>
     </div>
   </div>
 </div>

data/app/views/layouts/exercise_inputs/editors/_single_choice.html.erb

@@ -1,8 +1,6 @@
-<div class="form-group">
-  <% @exercise.pretty_choices.each do |choice| %>
-    <div class="field radio complementary complementary-radio">
-      <%= form.radio_button(:content, choice.value, checked: checked?(choice, @current_content), id: choice.id, required: true) %>
-      <%= label_tag(choice.id, choice.text) %>
-    </div>
-  <% end %>
-</div>
+<% @exercise.pretty_choices.each do |choice| %>
+  <div class="form-check">
+    <%= form.radio_button(:content, choice.value, checked: checked?(choice, @current_content), id: choice.id, required: true, class: 'form-check-input') %>
+    <%= label_tag(choice.id, choice.text, class: 'form-check-label' ) %>
+  </div>
+<% end %>

data/app/views/layouts/exercise_inputs/editors/_text.html.erb

@@ -1,7 +1,6 @@
-<div class="field form-group mu-editor-one-liner">
+<div class="mu-editor-one-liner">
   <%= form.editor :content, 'dynamic',
-                  class: 'form-control editor',
+                  class: 'form-control editor d-none',
                   value: @current_content,
-                  style: 'display: none',
                   data: {lines: 1} %>
 </div>

data/app/views/layouts/exercise_inputs/editors/_upload.html.erb

@@ -1,13 +1,13 @@
-<div class="form-group">
+<div>
   <% @max_file_size = 256000 %>
 
-  <textarea id="solution_content" type="text" name="solution[content]" class="hidden"></textarea>
-  <input id="mu-upload-input" type="file" class="upload submission-control hidden" mu-upload-file-limit=<%= @max_file_size %> accept=".<%= @exercise.language.extension %>" />
+  <textarea id="solution_content" type="text" name="solution[content]" class="d-none"></textarea>
+  <input id="mu-upload-input" type="file" class="upload submission-control d-none" mu-upload-file-limit=<%= @max_file_size %> accept=".<%= @exercise.language.extension %>" />
   <div>
-    <label id="mu-upload-label" for="mu-upload-input" class="btn btn-success">
+    <label id="mu-upload-label" for="mu-upload-input" class="btn btn-complementary">
       <%= fa_icon(:upload, text: t(:select_file), id: "mu-upload-icon") %>
     </label>
-    <div id="mu-upload-file-limit-exceeded" class="hidden">
+    <div id="mu-upload-file-limit-exceeded" class="d-none">
       <%= fa_icon("exclamation-triangle", text: t(:file_exceeds_max_size, size_kb: (@max_file_size / 1000))) %></div>
   </div>
 </div>

data/app/views/layouts/exercise_inputs/forms/_form.html.erb

@@ -9,6 +9,6 @@
   <p><%= t :you_must_sign_in_before_submitting %></p>
 
   <div class="actions">
-    <%= login_button class: 'btn btn-success btn-block' %>
+    <%= login_button class: 'btn btn-complementary w-100' %>
   </div>
 <% end %>

data/app/views/layouts/exercise_inputs/forms/_interactive_form.html.erb

@@ -11,7 +11,7 @@
 <% end %>
 
 <div class="tab-content">
-  <div role="tabpanel" class="tab-pane mu-input-panel fade in active <%= pending_messages_filter(@assignment) %>" id="console">
+  <div role="tabpanel" class="tab-pane mu-input-panel fade show active <%= pending_messages_filter(@assignment) %>" id="console">
     <% if @assignment.pending_messages? %>
         <span class="pending-messages-text"> <%= t :pending_messages_explanation %>
           <a href="javascript:{}"
@@ -25,7 +25,7 @@
     <div class="console">
     </div>
     <div class="mu-overlapped">
-      <a class="console-reset submission-reset"><%= restart_icon %></a>
+      <%= restart_icon %>
     </div>
    </div>
   <div role="tabpanel" class="tab-pane mu-input-panel fade mu-elipsis" id="visible-extra">

data/app/views/layouts/exercise_inputs/forms/_kids_form.html.erb

@@ -8,5 +8,5 @@
   </div>
   <div class="actions mu-kids-reset-button"></div>
   <img class="mu-kids-compass-rose" src="/compass_rose.svg">
-  <div class="mu-kids-overlay" style="display: none"></div>
+  <div class="mu-kids-overlay d-none"></div>
 <% end %>

data/app/views/layouts/exercise_inputs/forms/_playground_form.html.erb

@@ -10,11 +10,11 @@
 <% end %>
 
 <div class="tab-content">
-  <div role="tabpanel" class="tab-pane mu-input-panel in active fade" id="console">
+  <div role="tabpanel" class="tab-pane mu-input-panel show active fade" id="console">
     <div class="console">
     </div>
     <div class="mu-overlapped">
-      <a class="console-reset submission-reset"><%= restart_icon %></a>
+      <%= restart_icon %>
     </div>
   </div>
   <div role="tabpanel" class="tab-pane mu-input-panel fade mu-elipsis" id="visible-extra">

data/app/views/layouts/exercise_inputs/forms/_problem_form.html.erb

@@ -3,8 +3,10 @@
 
 <% if should_render_problem_tabs? exercise, current_user %>
   <ul class="nav nav-tabs" role="tablist">
-    <li role="presentation" class="active">
-      <a data-target="#editor" aria-controls="editor" tabindex="0" role="tab" data-toggle="tab" class="editor-tab"><%= fa_icon 'pen-square' %> <%= t :solution %></a>
+    <li role="presentation">
+      <a class="editor-tab nav-link active" data-bs-target="#editor" aria-controls="editor" tabindex="0" role="tab" data-bs-toggle="tab">
+        <%= fa_icon 'pen-square', text: (t :solution) %>
+      </a>
     </li>
     <% if exercise.extra_visible? %>
       <%= extra_code_tab %>
@@ -17,7 +19,7 @@
 <% end %>
 
 <div class="tab-content">
-  <div role="tabpanel" class="tab-pane mu-input-panel fade in active" id="editor">
+  <div role="tabpanel" class="tab-pane mu-input-panel fade show active" id="editor">
     <% if @assignment.pending_messages? %>
         <span class="pending-messages-text"> <%= t :pending_messages_explanation %>
           <a href="javascript:{}"
@@ -30,8 +32,10 @@
     <% end %>
     <%= form_for([exercise, @solution],
                  remote: true,
-                 html: {role: 'form', class: "new_solution mu-editor mu-editor-overlap #{pending_messages_filter(@assignment)}"}) do |f| %>
-      <%= render_exercise_input_editor f, exercise %>
+                 html: {role: 'form', class: "new_solution mu-editor mu-editor-overlap mu-form #{pending_messages_filter(@assignment)}"}) do |f| %>
+      <div class="mb-3">
+        <%= render_exercise_input_editor f, exercise %>
+      </div>
 
       <div class="actions mu-submit-button">
         <%= render_submit_button(@assignment) %>
@@ -43,12 +47,12 @@
       <div class="console">
       </div>
       <div class="mu-overlapped">
-        <a class="console-reset submission-reset"><%= restart_icon %></a>
+        <%= restart_icon %>
       </div>
     </div>
-    <div class="field checkbox complementary complementary-checkbox mu-editor">
-      <input checked="checked" data-index="1" id="include_solution" type="checkbox">
-      <label for="include_solution"><p><%= t(:load_solution_into_console) %></p></label>
+    <div class="form-check">
+      <input checked="checked" data-index="1" id="include_solution" type="checkbox" class="form-check-input">
+      <label class="form-check-label" for="include_solution"><p><%= t(:load_solution_into_console) %></p></label>
     </div>
   </div>
   <div role="tabpanel" class="tab-pane mu-input-panel fade mu-elipsis" id="visible-extra">

data/app/views/layouts/exercise_inputs/layouts/_input_primary.html.erb

@@ -20,10 +20,10 @@
 
         <div class="mu-kids-states mu-multiple-scenarios">
           <div class="mu-scenarios">
-            <a class="mu-scenario-control previous hidden">
+            <a class="mu-scenario-control previous d-none">
               <%= fa_icon('caret-left', class: 'fa-lg fa-2x') %>
             </a>
-            <a class="mu-scenario-control next hidden">
+            <a class="mu-scenario-control next d-none">
               <%= fa_icon('caret-right', class: 'fa-lg fa-2x') %>
             </a>
             <div class="mu-kids-state mu-state-initial mu-kids-gbs-board-initial mu-initial-state">

data/app/views/layouts/exercise_inputs/layouts/_input_right.html.erb

@@ -1,8 +1,8 @@
 <div class="row">
-  <div class="col-md-6 exercise-assignment">
+  <div class="col-lg-6 exercise-assignment">
     <%= yield :assignment %>
   </div>
-  <div class="mu-exercise-content col-md-6 ace-editor-col">
+  <div class="mu-exercise-content col-lg-6 ace-editor-col">
     <%= yield :exercise_content %>
   </div>
 </div>

data/app/views/layouts/exercise_inputs/read_only_editors/_code.html.erb

@@ -1,3 +1,3 @@
-<div class="field form-group">
+<div>
   <%= read_only_editor content, exercise.language.name %>
 </div>

data/app/views/layouts/exercise_inputs/read_only_editors/_free_form.html.erb

@@ -1,4 +1,4 @@
-<div class="form-group">
+<div>
   <%= hidden_field_tag :solution_content, content %>
   <%= raw exercise.free_form_editor_source %>
 </div>

data/app/views/layouts/exercise_inputs/read_only_editors/_multiple_choice.html.erb

@@ -1,8 +1,8 @@
-<div class="form-group">
+<div class="mu-form">
   <% exercise.pretty_choices.each do |choice| %>
-    <div class="field checkbox complementary complementary-checkbox">
-      <%= check_box_tag(choice.id, '1', checked?(choice, content), disabled: true, class: 'solution-choice mu-read-only', 'data-index' => choice.index) %>
-      <%= label_tag(choice.id, choice.text) %>
+    <div class="form-check">
+      <%= check_box_tag(choice.id, '1', checked?(choice, content), disabled: true, class: 'solution-choice form-check-input mu-read-only-input', 'data-index' => choice.index) %>
+      <%= label_tag(choice.id, choice.text, class: 'form-check-label') %>
     </div>
   <% end %>
 </div>

data/app/views/layouts/exercise_inputs/read_only_editors/_multiple_files.html.erb

@@ -1,4 +1,4 @@
-<div class="field form-group editor-code">
+<div class="editor-code">
 
   <% files = exercise.files_for(content) %>
 
@@ -6,7 +6,7 @@
     <span class="files-tabs">
       <ul class="nav nav-tabs">
         <% files.each_with_index do |file, index| %>
-          <li role="presentation" class="file-tab <%= 'active' if index == 0 %>" data-target="#editor-file-<%= index %>" tabindex='0' data-toggle='tab'>
+          <li role="presentation" class="file-tab <%= 'active' if index == 0 %>" data-bs-target="#editor-file-<%= index %>" tabindex='0' data-bs-toggle='tab'>
             <a class="file-name" href="#"><%= file.name %></a>
           </li>
         <% end %>

data/app/views/layouts/exercise_inputs/read_only_editors/_single_choice.html.erb

@@ -1,8 +1,8 @@
-<div class="form-group">
+<div class="mu-form">
   <% exercise.pretty_choices.each do |choice| %>
-    <div class="field radio complementary complementary-radio">
-      <%= radio_button_tag :content, choice.value, checked?(choice, content), disabled: true, class: 'mu-read-only' %>
-      <%= label_tag(choice.id, choice.text) %>
+    <div class="form-check">
+      <%= radio_button_tag :content, choice.value, checked?(choice, content), disabled: true, class: 'form-check-input mu-read-only-input' %>
+      <%= label_tag(choice.id, choice.text, class: 'form-check-label') %>
     </div>
   <% end %>
 </div>

data/app/views/layouts/exercise_inputs/read_only_editors/_text.erb

@@ -1,3 +1,3 @@
-<div class="field form-group">
+<div>
   <%= Mumukit::ContentType::Markdown.to_html(Mumukit::ContentType::Markdown.code(content)) %>
 </div>

data/app/views/layouts/modals/_avatar_picker.html.erb

@@ -2,11 +2,8 @@
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          <span aria-hidden="true">&times;</span></button>
-        <div class="modal-title">
-          <h3 class="text-left" id="gridSystemModalLabel"><%= t :choose_your_avatar %> </h3>
-        </div>
+        <h3 class="modal-title"><%= t :choose_your_avatar %></h3>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
       <div class="modal-body">
         <%= render partial: 'avatar_list' %>

data/app/views/layouts/modals/_guide_corollary.html.erb

@@ -2,21 +2,17 @@
   <div class="modal-dialog">
     <div class="modal-content">
       <% if Organization.current.kids? %>
-        <button type="button" class="mu-kids-modal-button mu-close" data-dismiss="modal" aria-label="Close">
+        <button type="button" class="mu-kids-modal-button mu-close" data-bs-dismiss="modal" aria-label="Close">
           <span aria-hidden="true">
             <i class="fas fa-fw fa-times fa-3x"></i>
           </span>
         </button>
       <% end %>
       <div class="modal-header">
+        <h3 class="modal-title"><%= t :guide_finished, guide: guide.name %></h3>
         <% if Organization.current.grown_ups? %>
-          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-            <span aria-hidden="true">&times;</span>
-          </button>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
         <% end %>
-        <div class="guide-corollary-title">
-          <h3 class="text-left" id="gridSystemModalLabel"><%= t :guide_finished, guide: guide.name %> </h3>
-        </div>
       </div>
       <div class="modal-body">
         <div class="container-fluid">
@@ -27,8 +23,8 @@
           </div>
           <div class="row">
             <div class="col-md-12 mu-last-box">
-              <hr>
               <% if should_display_medal? @guide, Organization.current %>
+                <hr>
                 <p><%= t :unlocked_medal_as_avatar %></p>
                 <%= corollary_medal_for guide %>
               <% end %>

data/app/views/layouts/modals/_kids_context.html.erb

@@ -1,11 +1,13 @@
-<div class="modal fade mu-kids-context mu-kids-modal-border" id="mu-kids-context" tabindex="-1" role="dialog" aria-hidden="true">
+<div class="modal fade mu-kids-context mu-kids-modal" id="mu-kids-context" tabindex="-1" role="dialog" aria-hidden="true">
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
-        <h4 class="text-center">
+        <h4 class="text-center d-flex">
           <strong><%= "#{exercise.number}. #{exercise.name}" %></strong>
-          <%= teacher_info_button exercise %>
-          <%= link_to_bibliotheca_exercise exercise %>
+          <div class="d-flex ms-2">
+            <%= teacher_info_button exercise %>
+            <%= link_to_bibliotheca_exercise exercise %>
+          </div>
         </h4>
       </div>
       <div class="modal-body">
@@ -19,7 +21,7 @@
         </div>
       </div>
       <div class="modal-footer">
-        <button class="btn btn-success btn-block" data-waiting="<%= t :loading %>" data-dismiss="modal" aria-label="<%= t :continue_exercise %>"> <%= t :continue_exercise %> </button>
+        <button class="btn btn-complementary w-100" data-waiting="<%= t :loading %>" data-bs-dismiss="modal" aria-label="<%= t :continue_exercise %>"> <%= t :continue_exercise %> </button>
       </div>
     </div>
   </div>

data/app/views/layouts/modals/_kids_results.html.erb

@@ -1,7 +1,7 @@
-<div class="modal fade mu-kids-results mu-kids-modal-border" id="kids-results" tabindex="-1" role="dialog" aria-hidden="true">
+<div class="modal fade mu-kids-results mu-kids-modal" id="kids-results" tabindex="-1" role="dialog" aria-hidden="true">
   <div class="modal-dialog">
     <div class="modal-content success">
-      <button type="button" class="mu-kids-modal-button mu-previous hidden" onclick="mumuki.kids.resultsCarrousel.prevSlide()" aria-label="Previous">
+      <button type="button" class="mu-kids-modal-button mu-previous d-none" onclick="mumuki.kids.resultsCarrousel.prevSlide()" aria-label="Previous">
         <span aria-hidden="true">
           <i class="fas fa-fw fa-arrow-left fa-3x"></i>
         </span>

data/app/views/layouts/modals/_kids_results_aborted.html.erb

@@ -1,4 +1,4 @@
-<div class="modal fade mu-kids-results mu-kids-results-aborted" id="kids-results-aborted" tabindex="-1" role="dialog" aria-hidden="true">
+<div class="modal fade mu-kids-results mu-kids-results-aborted mu-kids-modal" id="kids-results-aborted" tabindex="-1" role="dialog" aria-hidden="true">
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
@@ -18,7 +18,7 @@
         </div>
       </div>
       <div class="modal-footer">
-        <button class="btn btn-success btn-block submission_control" data-dismiss="modal" aria-label="<%= t :retry_exercise %>"> <%= t :retry_exercise %> </button>
+        <button class="btn btn-complementary w-100 submission_control" data-bs-dismiss="modal" aria-label="<%= t :retry_exercise %>"> <%= t :retry_exercise %> </button>
       </div>
     </div>
   </div>

data/app/views/layouts/modals/_kindergarten_context.html.erb

@@ -1,12 +1,12 @@
-<div class="modal fade mu-kids-modal-border" id="mu-kids-context" tabindex="-1" role="dialog" aria-hidden="true">
+<div class="modal fade mu-kids-modal" id="mu-kids-context" tabindex="-1" role="dialog" aria-hidden="true">
   <div class="modal-dialog">
     <div class="modal-content kindergarten">
-      <button type="button" class="mu-kids-modal-button mu-close" data-waiting="" data-dismiss="modal" aria-label="Close">
+      <button type="button" class="mu-kids-modal-button mu-close" data-waiting="" data-bs-dismiss="modal" aria-label="Close">
         <span aria-hidden="true">
           <i class="fas fa-fw fa-times fa-3x"></i>
         </span>
       </button>
-      <button type="button" class="mu-kids-modal-button mu-previous hidden" onclick="mumuki.kids.context.prevSlide()" aria-label="Previous">
+      <button type="button" class="mu-kids-modal-button mu-previous d-none" onclick="mumuki.kids.context.prevSlide()" aria-label="Previous">
         <span aria-hidden="true">
           <i class="fas fa-fw fa-arrow-left fa-3x"></i>
         </span>

data/app/views/layouts/modals/_kindergarten_results.html.erb

@@ -1,12 +1,12 @@
-<div class="modal fade mu-kids-results mu-kids-modal-border" id="kids-results" tabindex="-1" role="dialog" aria-hidden="true">
+<div class="modal fade mu-kids-results mu-kids-modal" id="kids-results" tabindex="-1" role="dialog" aria-hidden="true">
   <div class="modal-dialog">
     <div class="modal-content kindergarten">
-      <button type="button" class="mu-kids-modal-button mu-close" data-waiting="" data-dismiss="modal" aria-label="Close">
+      <button type="button" class="mu-kids-modal-button mu-close" data-waiting="" data-bs-dismiss="modal" aria-label="Close">
         <span aria-hidden="true">
           <i class="fas fa-fw fa-times fa-3x"></i>
         </span>
       </button>
-      <button type="button" class="mu-kids-modal-button mu-previous hidden" onclick="mumuki.kids.resultsCarrousel.prevSlide()" aria-label="Previous">
+      <button type="button" class="mu-kids-modal-button mu-previous d-none" onclick="mumuki.kids.resultsCarrousel.prevSlide()" aria-label="Previous">
         <span aria-hidden="true">
           <i class="fas fa-fw fa-arrow-left fa-3x"></i>
         </span>

data/app/views/layouts/modals/_kindergarten_results_aborted.html.erb

@@ -1,7 +1,7 @@
-<div class="modal fade mu-kids-results-aborted mu-kids-modal-border" id="kids-results-aborted" tabindex="-1" role="dialog" aria-hidden="true">
+<div class="modal fade mu-kids-results-aborted mu-kids-modal" id="kids-results-aborted" tabindex="-1" role="dialog" aria-hidden="true">
   <div class="modal-dialog">
     <div class="modal-content broken kindergarten">
-      <button type="button" class="mu-kids-modal-button mu-close" data-dismiss="modal" aria-label="Close" data-waiting="">
+      <button type="button" class="mu-kids-modal-button mu-close" data-bs-dismiss="modal" aria-label="Close" data-waiting="">
             <span aria-hidden="true">
               <i class="fas fa-fw fa-times fa-3x"></i>
             </span>