mumuki-laboratory 9.0.2 → 9.1.0

data/app/views/discussions/index.html.erb

@@ -3,22 +3,20 @@
 <% end %>
 
 <div class="row">
-  <div class="mu-inline-block-left">
-    <h1><%= t :forum %></h1>
-  </div>
+  <h1><%= t :forum %></h1>
 </div>
-<div class="row">
-  <% if @debatable.respond_to? :language %>
-    <div class="mu-inline-block-right hidden-xs">
-      <h3><%= language_icon @debatable.language %></h3>
-    </div>
-  <% end %>
+<div class="d-flex">
   <div class="mu-inline-block-left">
     <h3>
-      <span class="hidden-xs"><%= t("#{@debatable_class.downcase}_number", number: @debatable.number) %>:&nbsp;</span>
+      <span class="d-none d-sm-inline"><%= t("#{@debatable_class.downcase}_number", number: @debatable.number) %>:&nbsp;</span>
       <span><%= @debatable.name %></span>
     </h3>
   </div>
+  <% if @debatable.respond_to? :language %>
+    <div class="d-none d-sm-block ms-3">
+      <h3><%= language_icon @debatable.language %></h3>
+    </div>
+  <% end %>
 </div>
 
 <% if @discussions.empty? %>

data/app/views/discussions/new.html.erb

@@ -22,12 +22,12 @@
         <div class="container-fluid">
           <div class="row">
             <div class="discussion-new-message-content">
-              <%= f.editor :description, '', {id: 'new-discussion-message', class: 'form-control', placeholder: t(:discussion_description_placeholder)} %>
+              <%= f.editor :description, '', {id: 'discussion-new-message', class: 'form-control', placeholder: t(:discussion_description_placeholder)} %>
             </div>
           </div>
         </div>
       </div>
     </div>
-    <%= f.submit t(:save), class: 'btn btn-success btn-block discussion-new-message-button' %>
+    <%= f.submit t(:save), class: 'btn btn-complementary w-100 discussion-new-message-button' %>
   <% end %>
 <% end %>

data/app/views/discussions/show.html.erb

@@ -11,16 +11,24 @@
 <% if @discussion.has_messages? || @discussion.commentable_by?(current_user) %>
   <hr class="message-divider">
 
-  <div>
-    <h3>
-      <%= t :messages %>
-      <% if @discussion.last_moderator_access_visible_for?(current_user) %>
-        <small class="pull-right">
-          <span><%= t :last_seen, name: @discussion.last_moderator_access_by.full_name %></span>
-          <span><%= t :time_since, time: time_ago_in_words(@discussion.last_moderator_access_at) %></span>
-        </small>
-      <% end %>
-    </h3>
+  <div class="d-flex flex-wrap">
+    <h3 class="flex-grow-1 me-3"><%= t :messages %></h3>
+    <% if current_user && @discussion.persisted? %>
+      <span class="d-flex">
+        <% if @discussion.subscribable? %>
+          <div class="discussion-subscription me-1">
+            <%= btn_toggle subscription_icon, unsubscription_icon, current_user.subscribed_to?(@discussion), class: 'btn-sm',
+                           onclick: "mumuki.Forum.discussionSubscription('#{subscription_discussion_url(@discussion)}')" %>
+          </div>
+        <% end %>
+        <% if @discussion.solved? %>
+          <div class="discussion-upvote">
+            <%= btn_toggle upvote_icon, undo_upvote_icon, current_user.upvoted?(@discussion), class: 'btn-sm',
+                           onclick: "mumuki.Forum.discussionUpvote('#{upvote_discussion_url(@discussion)}')" %>
+          </div>
+        <% end %>
+      </span>
+    <% end %>
   </div>
 
   <% if @discussion.has_messages? %>
@@ -28,8 +36,8 @@
       <% if @discussion.description.present? %>
         <%= render partial: 'discussions/description_message', locals: {discussion: @discussion} %>
       <% end %>
-      <% @discussion.messages.each do |message| %>
-        <%= render partial: 'discussions/message', locals: {user: message.sender_user, message: message} %>
+      <% @discussion.visible_messages.each do |message| %>
+          <%= render partial: 'discussions/message', locals: {user: message.sender_user, message: message} %>
       <% end %>
       <% if @discussion.commentable_by?(current_user) %>
         <hr class="message-divider">

data/app/views/exam_registrations/show.html.erb

@@ -20,18 +20,17 @@
         <%= t :exam_registration_explanation_html, date: l(@registration.end_time, format: :long) %>
       </p>
     </div>
-    <%= form_for @authorization_request do |f| %>
+    <%= form_for @authorization_request, html: {class: 'mu-form'} do |f| %>
       <%= f.hidden_field :exam_registration_id, value: @registration.id %>
-      <div class="form-group">
-        <%= f.label :exam_id, t(:exam_registration_choose_exam) %>
-        <% @registration.exams.each do |exam| %>
-          <div class="field radio complementary complementary-radio">
-            <%= f.radio_button(:exam_id, exam.id, id: exam.id, required: true, checked: @authorization_request.exam_id == exam.id) %>
-            <%= label_tag exam.id, l(exam.start_time, format: :long) %>
-          </div>
-        <% end %>
-      </div>
-      <button class="btn btn-success"> <%= t :save %> </button>
+      <%= f.label :exam_id, t(:exam_registration_choose_exam) %>
+      <% @registration.exams.each do |exam| %>
+        <div class="form-check">
+          <%= f.radio_button(:exam_id, exam.id, id: exam.id, required: true, class: 'form-check-input mu-read-only-input',
+                             checked: @authorization_request.exam_id == exam.id) %>
+          <%= label_tag exam.id, l(exam.start_time, format: :long), class: 'form-check-label' %>
+        </div>
+      <% end %>
+      <button class="btn btn-complementary"> <%= t :save %> </button>
     <% end %>
   </div>
 </div>

data/app/views/exercise_solutions/_assistant_rules_box.html.erb

@@ -1,7 +1,7 @@
 <% if should_display_assistance_box? assignment %>
   <hr>
   <%= assistance_box assignment %>
-  <a data-toggle="collapse" href="#assistance-details-section" class="example-see-more">
+  <a data-bs-toggle="collapse" href="#assistance-details-section" class="badge bg-light text-dark mu-view-details">
     <%= t :view_details %>
   </a>
   <div id="assistance-details-section" class="<%= 'collapse' if should_display_assistance_box?(assignment) %> in results-item">

data/app/views/exercise_solutions/_contextualization_results_body.html.erb

@@ -7,7 +7,7 @@
         <div>
           <%= contextualization.feedback_html %>
         </div>
-        <a data-toggle="collapse" href="#results-section" class="text-danger">
+        <a data-bs-toggle="collapse" href="#results-section" class="text-danger">
           <%= fa_icon 'question-circle' %> <%= t :details %>
         </a>
       </div>

data/app/views/exercise_solutions/_contextualization_results_container.html.erb

@@ -2,7 +2,7 @@
   <%= render partial: 'exercise_solutions/results_title', locals: {contextualization: contextualization} %>
 
   <% if in_gamified_context? %>
-    <div id="mu-exp-earned-message" class="hidden">
+    <div id="mu-exp-earned-message" class="d-none">
       <span><%= t(:you_earned) %></span>
       <strong><span id="mu-exp-points"></span></strong>
       <span><%= t(:exp_points) %></span>

data/app/views/exercise_solutions/_kids_results_button.html.erb

@@ -1,10 +1,10 @@
-<div class="row">
+<div class="row w-100">
   <div class="col-md-12">
     <div class="actions">
       <% if assignment.solved? %>
         <%= next_exercise_button(@exercise) || close_modal_button %>
       <% else %>
-        <button class="btn btn-success btn-block submission-control" id="kids-btn-retry" data-dismiss="modal" aria-label="<%= t :retry_exercise %>"> <%= t :retry_exercise %> </button>
+        <button class="btn btn-complementary submission-control" id="kids-btn-retry" data-bs-dismiss="modal" aria-label="<%= t :retry_exercise %>"> <%= t :retry_exercise %> </button>
       <% end %>
     </div>
   </div>

data/app/views/exercise_solutions/_results.html.erb

@@ -16,7 +16,7 @@
         <% if should_render_need_help_dropdown?(assignment) %>
           <div class="notify-problem-box">
             <div class="dropdown">
-              <%= link_to fa_icon(:'question-circle', text: t(:need_help)), "", {'data-toggle': 'dropdown'} %>
+              <%= link_to fa_icon(:'question-circle', text: t(:need_help)), "", {'data-bs-toggle': 'dropdown'} %>
               <ul class="dropdown-menu" aria-labelledby="helpDropdown">
                 <li>
                   <%= read_discussions_link(@exercise) %>

data/app/views/exercises/_exercise_assignment.html.erb

@@ -3,9 +3,9 @@
 </div>
 <div class="row">
   <div class="col-md-12">
-    <div class="hint-box <%= 'hidden' if exercise.hint.blank? %>">
+    <div class="hint-box <%= 'd-none' if exercise.hint.blank? %>">
       <% if exercise.hint.present? %>
-        <a data-toggle="collapse" href="#hint-section" class="text-info">
+        <a data-bs-toggle="collapse" href="#hint-section" class="text-info">
           <%= fa_icon 'lightbulb', type: :regular %> <%= t :need_a_hint %>
         </a>
 

data/app/views/exercises/_exercise_skipped.html.erb

@@ -7,7 +7,7 @@
       <div class="modal-body">
         <div class="container-fluid">
           <%= t :skipped_description %>
-          <%= link_to (t :skipped_solve_anyway), "", "data-dismiss" => "modal" %>
+          <%= link_to (t :skipped_solve_anyway), "", "data-bs-dismiss" => "modal" %>
         </div>
       </div>
       <div class="modal-footer">

data/app/views/exercises/_read_only.html.erb

@@ -7,127 +7,130 @@
 <%= hidden_field_tag(:exercise_language, exercise.highlight_mode) %>
 <%= hidden_field_tag :console_endpoint, exercise_queries_path(exercise) %>
 
-<details open>
-  <summary class="discussion-summary">
-    <h3 class="discussion-exercise-title">
-      <span>
-        <span class="hidden-xs"><%= t(:exercise_number, number: exercise.number) %>:&nbsp;</span>
-        <span><%= exercise.name %></span>
-      </span>
-      <span class="mu-inline-block-right hidden-xs">
-        <h1 class="no-margin"><%= language_icon exercise.language %></h1>
-      </span>
-    </h3>
-    <div class="discussion-description">
-      <%= label_for_contextualization(@discussion, class: 'hidden-xs') %> ·
-      <span class="discussion-info">
-          <span class="discussion-initiator-name">
-            <%= @discussion.initiator.name %>
-          </span>
-        <span class="hidden-xs"><%= discussion_info(@discussion) unless @discussion.new_record? %></span>
-      </span>
-      <% if current_user && @discussion.persisted? %>
-        <span class="mu-inline-block-right discussion-user-menu no-margin">
-          <% if @discussion.subscribable? %>
-            <a class="discussion-subscription" onclick="mumuki.Forum.discussionSubscription('<%= subscription_discussion_url(@discussion) %>')">
-              <%= fa_icon(:eye, class: 'fa-xs') %>
-              <%= span_toggle t(:subscribe), t(:unsubscribe), current_user.subscribed_to?(@discussion), class: 'hidden-sm hidden-xs' %>
-            </a>
-          <% end %>
-          <% if @discussion.solved? %>
-            <a class="discussion-upvote" onclick="mumuki.Forum.discussionUpvote('<%= upvote_discussion_url(@discussion) %>')">
-              <%= fa_icon('thumbs-up', type: :regular, class: 'fa-xs') %>
-              <%= span_toggle t(:upvote), t(:undo_upvote), current_user.upvoted?(@discussion), class: 'hidden-sm hidden-xs' %>
-            </a>
+<div class="accordion mu-discussion-accordion" id="mu-discussion-accordion">
+  <div class="accordion-item">
+    <h2 class="accordion-header" id="mu-discussion-accordion-header">
+      <button class="accordion-button" type="button" data-bs-toggle="collapse" aria-expanded="true"
+              data-bs-target="#mu-discussion-accordion-body" aria-controls="mu-discussion-accordion-body">
+        <div class="flex-grow-1">
+          <h3 class="d-flex">
+            <span class="flex-grow-1">
+              <span class="d-none d-sm-inline"><%= t(:exercise_number, number: exercise.number) %>:&nbsp;</span>
+              <span><%= exercise.name %></span>
+            </span>
+            <span class="d-none d-sm-inline mx-3">
+              <h1 class="m-0"><%= language_icon exercise.language %></h1>
+            </span>
+          </h3>
+          <div class="discussion-description">
+            <%= label_for_contextualization(@discussion, class: 'd-none d-sm-inline') %> ·
+            <span class="discussion-info">
+              <span class="discussion-initiator-name">
+                <%= @discussion.initiator.name %>
+              </span>
+              <span class="d-none d-sm-inline"><%= discussion_info(@discussion) unless @discussion.new_record? %></span>
+            </span>
+          </div>
+          <% if @discussion.last_moderator_access_visible_for?(current_user) %>
+            <h5 class="my-2 me-3">
+              <span class="badge bg-primary text-wrap">
+                <%= t :last_seen, name: @discussion.last_moderator_access_by.full_name %>
+                <%= t :time_since, time: time_ago_in_words(@discussion.last_moderator_access_at) %>
+              </span>
+            </h5>
           <% end %>
-        </span>
-      <% end %>
-    </div>
-  </summary>
+        </div>
+      </button>
+    </h2>
 
-  <% if should_render_read_only_exercise_tabs?(@discussion) %>
+    <div class="accordion-body accordion-collapse collapse show" id="mu-discussion-accordion-body"
+         aria-labelledby="#mu-discussion-accordion-header" data-bs-parent="#mu-discussion-accordion">
 
-    <ul class="nav nav-tabs discussion-tabs" role="tablist">
-      <% if @discussion.has_submission? %>
-        <li role="presentation" class="active">
-          <a data-target="#solution" aria-controls="solution" role="tab" data-toggle="tab" class="editor-tab">
-            <%= t :solution %>
-          </a>
-        </li>
-        <li role="presentation">
-          <a data-target="#results" aria-controls="results" role="tab" data-toggle="tab" class="editor-tab">
-            <%= t :results %>
-          </a>
-        </li>
-      <% end %>
+      <% if should_render_read_only_exercise_tabs?(@discussion) %>
+        <ul class="nav nav-tabs discussion-tabs" role="tablist">
 
-      <li role="presentation" <%= "class=active" unless @discussion.has_submission? %>>
-        <a data-target="#content" aria-controls="content" role="tab" data-toggle="tab" class="editor-tab">
-          <%= t :description %>
-        </a>
-      </li>
+          <% if @discussion.has_submission? %>
+            <li role="presentation">
+              <a class="editor-tab nav-link active" data-bs-target="#solution" aria-controls="solution" role="tab" data-bs-toggle="tab">
+                <%= t :solution %>
+              </a>
+            </li>
+            <li role="presentation">
+              <a class="editor-tab nav-link" data-bs-target="#results" aria-controls="results" role="tab" data-bs-toggle="tab">
+                <%= t :results %>
+              </a>
+            </li>
+          <% end %>
 
-      <% if exercise.extra_visible? %>
-        <%= extra_code_tab %>
-      <% end %>
+          <li role="presentation">
+            <a class="editor-tab nav-link <%= "active" unless @discussion.has_submission? %>" data-bs-target="#content" aria-controls="content" role="tab" data-bs-toggle="tab">
+              <%= t :description %>
+            </a>
+          </li>
 
-      <% if exercise.queriable? %>
-        <%= console_tab %>
-      <% end %>
-    </ul>
+          <% if exercise.extra_visible? %>
+            <%= extra_code_tab %>
+          <% end %>
 
-    <div class="tab-content">
+          <% if exercise.queriable? %>
+            <%= console_tab %>
+          <% end %>
+        </ul>
 
-      <% if @discussion.has_submission? %>
-        <div role="tabpanel" class="tab-pane active" id="solution">
-          <div class="mu-tab-body">
-            <div role="tabpanel" class="tab-pane mu-input-panel fade in active" id="editor">
-              <div class="mu-read-only-editor">
-                <%= render_exercise_read_only_editor exercise, @discussion.solution %>
+        <div class="tab-content">
+          <% if @discussion.has_submission? %>
+            <div role="tabpanel" class="tab-pane active" id="solution">
+              <div class="mu-tab-body">
+                <div role="tabpanel" class="tab-pane mu-input-panel fade show active" id="editor">
+                  <div class="mu-read-only-editor">
+                    <%= render_exercise_read_only_editor exercise, @discussion.solution %>
+                  </div>
+                </div>
               </div>
             </div>
-          </div>
-        </div>
 
-        <div role="tabpanel" class="tab-pane" id="results">
-          <div class="mu-tab-body">
-            <%= render layout: 'exercise_solutions/contextualization_results_container', locals: {contextualization: @discussion} do %>
-              <div class="row">
-                <div class="col-md-12 submission-results">
-                  <%= render partial: 'exercise_solutions/contextualization_results_body',
-                             locals: {contextualization: @discussion, guide_finished_by_solution: false} %>
-                </div>
+            <div role="tabpanel" class="tab-pane" id="results">
+              <div class="mu-tab-body">
+                <%= render layout: 'exercise_solutions/contextualization_results_container', locals: { contextualization: @discussion } do %>
+                  <div class="row">
+                    <div class="col-md-12 submission-results">
+                      <%= render partial: 'exercise_solutions/contextualization_results_body',
+                                 locals: { contextualization: @discussion, guide_finished_by_solution: false } %>
+                    </div>
+                  </div>
+                <% end %>
               </div>
-            <% end %>
-          </div>
-        </div>
-      <% end %>
+            </div>
+          <% end %>
 
-      <div role="tabpanel" class="tab-pane <%= 'active' unless @discussion.has_submission? %>" id="content">
-        <div class="mu-tab-body">
-          <div class="exercise-assignment">
-            <%= render partial: 'exercises/exercise_assignment', locals: {exercise: exercise} %>
+          <div role="tabpanel" class="tab-pane <%= 'active' unless @discussion.has_submission? %>" id="content">
+            <div class="mu-tab-body">
+              <div class="exercise-assignment">
+                <%= render partial: 'exercises/exercise_assignment', locals: { exercise: exercise } %>
+              </div>
+            </div>
           </div>
-        </div>
-      </div>
 
-      <div role="tabpanel" class="tab-pane mu-input-panel fade" id="console">
-        <div class="mu-overlapped-container">
-          <div class="console">
+          <div role="tabpanel" class="tab-pane mu-input-panel fade" id="console">
+            <div class="mu-overlapped-container">
+              <div class="console">
+              </div>
+              <div class="mu-overlapped">
+                <%= restart_icon %>
+              </div>
+            </div>
           </div>
-          <div class="mu-overlapped">
-            <a class="console-reset submission-reset"><%= restart_icon %></a>
+
+          <div role="tabpanel" class="tab-pane mu-input-panel fade mu-elipsis" id="visible-extra">
+            <%= @discussion.extra_preview_html %>
           </div>
         </div>
-      </div>
-
-      <div role="tabpanel" class="tab-pane mu-input-panel fade mu-elipsis" id="visible-extra">
-        <%= @discussion.extra_preview_html %>
-      </div>
-    </div>
-  <% else %>
-    <div class="exercise-assignment">
-      <%= render partial: 'exercises/exercise_assignment', locals: {exercise: exercise} %>
+      <% else %>
+        <div class="exercise-assignment">
+          <%= render partial: 'exercises/exercise_assignment', locals: { exercise: exercise } %>
+        </div>
+      <% end %>
     </div>
-  <% end %>
-</details>
+  </div>
+</div>
+

data/app/views/exercises/show.html.erb

@@ -13,15 +13,15 @@
 <% end %>
 
 <% unless @exercise.input_kids? %>
-  <div class="row">
-    <div class="mu-inline-block-right hidden-xs">
-      <h1><%= language_icon @exercise.language %></h1>
-    </div>
+  <div class="d-flex">
     <div class="mu-inline-block-left">
-      <h1 class="hidden-xs"><%= full_title_for @exercise %></h1>
-      <h1 class="visible-xs"><%= short_title_for @exercise %></h1>
+      <h1 class="d-none d-sm-block"><%= full_title_for @exercise %></h1>
+      <h1 class="d-block d-sm-none"><%= short_title_for @exercise %></h1>
       <%= render partial: 'exercises/exercise_title_icons' %>
     </div>
+    <div class="d-none d-sm-block">
+      <h1><%= language_icon @exercise.language %></h1>
+    </div>
   </div>
 <% end %>
 
@@ -46,7 +46,7 @@
 <%= hidden_field_tag "mu-exercise-layout", @exercise.layout %>
 <%= hidden_field_tag "mu-exercise-settings", @exercise.settings.to_json %>
 
-<div style="display: none" id="processing-template">
+<div class="d-none" id="processing-template">
   <div class="bs-callout bs-callout-info">
     <h4><i class="fas fa-sync-alt fa-spin"></i> <strong><%= t :processing_your_solution %></strong></h4>
     <%= t :refresh_or_wait %>