mumuki-laboratory 9.0.2 → 9.1.0

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

@@ -1,3 +1,7 @@
+<% content_for :breadcrumbs do %>
+  <%= header_breadcrumbs %>
+<% end %>
+
 <div class="mu-faqs">
   <h1><%= t(:faqs) %></h1>
 
@@ -5,7 +9,7 @@
     <div class="mu-faqs-content">
       <%= @faqs %>
     </div>
-    <div class="mu-faqs-navbar">
+    <div class="mu-faqs-navbar hidden-xs">
       <nav>
         <ul>
         </ul>

data/app/views/guides/_guide.html.erb

@@ -31,7 +31,7 @@
 <% if !@stats.try(:done?) && @next_exercise %>
   <div class="text-box">
     <div class="actions">
-      <%= link_to t(lesson_practice_key_for(@stats)), exercise_path(@next_exercise), class: 'btn btn-success' %>
+      <%= link_to t(lesson_practice_key_for(@stats)), exercise_path(@next_exercise), class: 'btn btn-complementary' %>
     </div>
   </div>
 <% end %>

data/app/views/guides/_guide_container.html.erb

@@ -4,14 +4,14 @@
 
 <%= render layout: 'guides/guide', locals: { subject: subject } do %>
 
-  <div class="row">
-    <div class="mu-inline-block-right hidden-xs">
-      <h1><%= language_icon @guide.language %></h1>
-    </div>
+  <div class="d-flex">
     <div class="mu-inline-block-left">
       <h1><%= short_title_for @guide %></h1>
       <%= render partial: 'guides/guide_title_icons' %>
     </div>
+    <div class="d-none d-sm-block">
+      <h1><%= language_icon @guide.language %></h1>
+    </div>
   </div>
   <div class="row">
     <div class="col-md-12">

data/app/views/invitations/_invitation_form.html.erb

@@ -1,4 +1,4 @@
-<%= form_for current_user, method: 'post', url: {action: 'join'} do |f| %>
+<%= form_for current_user, method: 'post', url: {action: 'join'}, html: {class: 'mu-form'} do |f| %>
   <div class="tab-content">
     <div role="tabpanel" class="tab-pane active" id="info">
       <div class="row mu-tab-body">
@@ -13,12 +13,13 @@
     <div>
       <h3><%= t :terms_and_conditions %></h3>
       <pre class="terms-of-service"><%= simple_format @organization.terms_of_service %></pre>
-      <div>
-        <input id="accept_terms" type="checkbox"> <span><%= t :accept_terms %></span>
+      <div class="form-check mb-3">
+        <input id="accept_terms" type="checkbox" class="form-check-input">
+        <label class="form-check-label"><%= t :accept_terms %></label>
       </div>
     </div>
   <% end %>
   <div>
-    <%= f.submit t(:confirm), id: 'confirm_data', class: 'btn btn-success', disabled: @organization.terms_of_service.present? %>
+    <%= f.submit t(:confirm), id: 'confirm_data', class: 'btn btn-complementary', disabled: @organization.terms_of_service.present? %>
   </div>
 <% end %>

data/app/views/layouts/_authoring.html.erb

@@ -2,7 +2,7 @@
   <%= content_for :authoring do %>
     <p class="small">
       <% if embedded_mode? %>
-        <span class="hidden-md hidden-lg hidden-xl">
+        <span class="d-md-none">
           <%= render partial: 'layouts/copyright' %> -
         </span>
       <% end %>

data/app/views/layouts/_discussions.html.erb

@@ -2,14 +2,14 @@
   <%= discussions_reset_query_link %>
   <div class="discussions-toolbar">
     <div class="discussions-toolbar-status">
-      <div class="hidden-xs hidden-sm">
+      <div class="d-none d-lg-block">
         <% discussions_statuses.each do |status| %>
           <%= discussion_status_filter_link(status, @discussions) %>
         <% end %>
       </div>
     </div>
     <div>
-      <div class="hidden-md hidden-lg ">
+      <div class="d-lg-none">
         <%= discussion_dropdown_filter :status, discussions_statuses do |status_filter| %>
           <%= t status_filter %>
         <% end %>
@@ -22,9 +22,9 @@
       <% end %>
 
       <% if current_user&.moderator_here? %>
-        <div class="discussion-requires-attention pull-right">
+        <div class="discussion-requires-attention float-end">
           <%= label_tag :requires_moderator_response, t(:requires_attention) %>
-          <%= check_box_tag :requires_moderator_response, true, discussion_filter_params[:requires_moderator_response], class: 'form-input', onclick: 'mumuki.Forum.discussionsToggleCheckbox($(this))' %>
+          <%= check_box_tag :requires_moderator_response, true, discussion_filter_params[:requires_moderator_response], class: 'form-check-input', onclick: 'mumuki.Forum.discussionsToggleCheckbox($(this))' %>
         </div>
       <% end %>
 
@@ -56,10 +56,10 @@
                   <span class="discussion-status-icon">
                     <%= discussion_status_fa_icon(discussion) %>
                   </span>
-                  <span class="hidden-sm hidden-xs"><%= discussion.exercise.guide.name %> -</span>
+                  <span class="d-none d-lg-inline"><%= discussion.exercise.guide.name %> -</span>
                   <span><%= discussion.exercise.name %></span>
                   <% if discussion.last_moderator_access_visible_for?(current_user) %>
-                    <div class="pull-right discussion-moderator-access" >
+                    <div class="float-end discussion-moderator-access" >
                       <%= profile_picture_for(discussion.last_moderator_access_by, height: 32) %>
                       <span class="moderator-initials">
                         <%= discussion.last_moderator_access_by.name_initials %>
@@ -79,7 +79,7 @@
     </div>
 
     <div class="discussion-pagination">
-      <%= paginate @filtered_discussions %>
+      <%= paginate @filtered_discussions, nav_class: 'pagination' %>
     </div>
 
   <% end %>

data/app/views/layouts/_kids.html.erb

@@ -2,11 +2,11 @@
 <div class="mu-kids-character-speech-bubble <%= 'no-tabs' unless exercise.hint? %>">
   <% if exercise.hint? %>
       <ul class="mu-kids-character-speech-bubble-tabs">
-        <li class="mu-kids-description active" data-target="description" title="<%= t :task %>">
+        <li class="mu-kids-description active" data-bs-toggle="tooltip" data-bs-target="description" title="<%= t :task %>">
           <i class="far fa-fw fa-file-alt"></i>
         </li>
         <li class="separator"></li>
-        <li class="mu-kids-hint blink" data-target="hint" title="<%= t :need_a_hint %>">
+        <li class="mu-kids-hint blink" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-target="hint" title="<%= t :need_a_hint %>">
           <i class="far fa-fw fa-lightbulb"></i>
         </li>
       </ul>
@@ -15,10 +15,10 @@
     <i class="mu-kids-prev-speech fas fa-fw fa-caret-up"></i>
     <i class="mu-kids-next-speech fas fa-fw fa-caret-down"></i>
     <div class="description"><%= exercise.description_task %></div>
-    <div class="hint" style="display: none"><%= exercise.hint_html %></div>
+    <div class="hint"><%= exercise.hint_html %></div>
   </div>
-  <div class="mu-kids-character-speech-bubble-failed <%= current_user? && @assignment.status %>" style="display: none"></div>
+  <div class="mu-kids-character-speech-bubble-failed <%= current_user? && @assignment.status %> d-none"></div>
 </div>
-<div id="mu-kids-discussion-link-html" class="hidden">
+<div id="mu-kids-discussion-link-html" class="d-none">
   <%= kids_read_discussions_link(exercise) %>
 </div>

data/app/views/layouts/_kindergarten.html.erb

@@ -5,11 +5,13 @@
       <span class="mu-kindergarten-exercise-description"><%= exercise.description_task %></span>
       <div class="mu-kindergarten-buttons">
         <button class="mu-kindergarten-show-context" onclick="mumuki.kids.context.show()">
-          <img class="mu-kindergarten-button-image" src="https://mumuki.io/static/show-context.svg" alt="" title="<%= t :see_context %>">
+          <img class="mu-kindergarten-button-image" src="https://mumuki.io/static/show-context.svg"
+               alt="" data-bs-toggle="tooltip" title="<%= t :see_context %>">
         </button>
         <button class="mu-kindergarten-play-description" onclick="mumuki.kids.speech.click('.mu-kindergarten-exercise-description', '<%= exercise.locale %>')">
-          <img class="mu-kindergarten-button-image mu-kindergarten-play" src="https://mumuki.io/static/audio-play.svg" alt="" title="<%= t :listen_statement %>">
-          <img class="mu-kindergarten-button-image mu-kindergarten-stop hidden" src="https://mumuki.io/static/audio-stop.svg" alt="">
+          <img class="mu-kindergarten-button-image mu-kindergarten-play" src="https://mumuki.io/static/audio-play.svg"
+               alt="" data-bs-toggle="tooltip" data-bs-placement="bottom" title="<%= t :listen_statement %>">
+          <img class="mu-kindergarten-button-image mu-kindergarten-stop d-none" src="https://mumuki.io/static/audio-stop.svg" alt="">
         </button>
       </div>
     </div>
@@ -17,7 +19,8 @@
   <div class="mu-kindergarten-hint">
     <% if exercise.hint? %>
       <button class="mu-hint-light" onclick="mumuki.kids.hint.toggle()">
-        <img class="mu-hint-light on" src="https://mumuki.io/static/lamparita_on.svg" alt="" title="<%= t :need_a_hint %>">
+        <img class="mu-hint-light on" src="https://mumuki.io/static/lamparita_on.svg"
+             alt="" data-bs-toggle="tooltip" data-bs-placement="top" title="<%= t :need_a_hint %>">
       </button>
       <div class="mu-kindergarten-light-speech-bubble">
         <span class="mu-kindergarten-exercise-hint">
@@ -28,11 +31,12 @@
         </button>
       </div>
     <% else %>
-      <img class="mu-hint-light off" src="https://mumuki.io/static/lamparita_off.svg" alt="" title="<%= t :no_need_hint %>">
+      <img class="mu-hint-light off" src="https://mumuki.io/static/lamparita_off.svg"
+           alt="" data-bs-toggle="tooltip" data-bs-placement="left" title="<%= t :no_need_hint %>">
     <% end %>
   </div>
 </div>
 
-<div id="mu-kids-discussion-link-html" class="hidden">
+<div id="mu-kids-discussion-link-html" class="d-none">
   <%= kids_read_discussions_link(exercise) %>
 </div>

data/app/views/layouts/_main.html.erb

@@ -18,24 +18,24 @@
   <%= login_form.header_html %>
 </head>
 <body>
+
+<%= hidden_field_tag "mu-user-id", current_user&.id %>
+<%= hidden_field_tag "mu-organization-id", Organization.current.id %>
+
 <% if should_choose_organization? %>
     <%= render partial: 'layouts/organization_chooser' %>
 <% end %>
 
 <%= yield :navbar %>
 
-<div class="<%= exercise_container_type %><%= @kids ? '-fluid' : '' %>" id="wrap">
-  <div id="toast-container" class="toast-bottom-left">
+<div class="<%= exercise_container_type %><%= @kids ? '-fluid' : '' %> mb-5" id="wrap">
+  <div class="toast-container bottom-0 start-0 p-3">
     <% if notice %>
-      <div class="alert toast toast-success" role="alert">
-        <%= notice.html_safe %>
-        <button type="button" class="close" data-dismiss="alert">&times;</button>
-      </div>
+      <%= toast_notice(notice) %>
     <% elsif alert %>
-      <div class="alert toast toast-error" role="alert">
-        <%= alert.html_safe %>
-        <button type="button" class="close" data-dismiss="alert">&times;</button>
-      </div>
+      <%= toast_alert(alert) %>
+    <% elsif info %>
+      <%= toast_info(info) %>
     <% end %>
   </div>
 

data/app/views/layouts/_organizations_listing.html.erb

@@ -1,10 +1,10 @@
 <% current_immersive_organizations.each do |organization| %>
     <div class="row">
       <div class="col-md-6 organization-row">
-        <%= image_tag(organization.banner_url, height: 50, class: 'pull-left') %>
+        <%= image_tag(organization.banner_url, height: 50, class: 'float-start') %>
       </div>
       <div class="col-md-6 organization-row">
-        <%= link_to(t(:go_to, organization: organization.name), current_immersive_path(organization), class: 'btn btn-success pull-right') %>
+        <%= link_to(t(:go_to, organization: organization.name), current_immersive_path(organization), class: 'btn btn-complementary float-end') %>
       </div>
     </div>
 <% end %>

data/app/views/layouts/_progress_bar.html.erb

@@ -6,6 +6,8 @@
       <%= turbolinks_enable_for exercise %>
       href="<%= exercise_path(exercise)%>"
       aria-label="<%= exercise.navigable_name %>"
+      data-bs-toggle="tooltip"
+      data-bs-placement="bottom"
       title="<%= exercise.navigable_name %>"
       data-mu-exercise-id="<%= exercise.id %>"
       class="<%= class_for_progress_list_item(assignment, exercise == actual)%>">

data/app/views/layouts/_submission_result_error.html.erb

@@ -1,4 +1,4 @@
-<div class="bs-callout bs-callout-broken submission-result-error" style="display: none;">
+<div class="bs-callout bs-callout-broken submission-result-error d-none">
   <h4>
     <strong><%= t :errored %></strong>
   </h4>

data/app/views/layouts/_test_results.html.erb

@@ -13,7 +13,7 @@
             <%= status_icon(test_result[:status]) %>
             <%= render_test_result_header test_result %>
             <% unless contextualization.visible_success_output? %>
-              <a data-toggle="collapse" href="#example-result-<%= index %>"  class="example-see-more"><%= t :view_details %></a>
+              <a data-bs-toggle="collapse" href="#example-result-<%= index %>" class="badge bg-light text-dark mu-view-details"><%= t :view_details %></a>
             <% end %>
           </span>
         <% else %>

data/app/views/layouts/_timer.html.erb

@@ -1,5 +1,5 @@
 <div class="row">
-  <div class="col-md-3 col-md-offset-5">
+  <div class="text-center">
     <i class="timer text-center far fa-clock"></i>
     <i class="timer timer-text text-center"><%= t :time_left %></i>
     <i id="timer" class="timer timer-text text-center"></i>

data/app/views/layouts/_user_menu.html.erb

@@ -1,25 +1,18 @@
-<div class="col-md-3 mu-tab-body mu-user-menu">
-  <div class="col-md-12">
-    <div class="mu-user-menu-header">
-      <%= t(:my_account) %>
-    </div>
-    <div class="mu-user-menu-item">
-      <%= profile_user_menu_link %>
-    </div>
-    <div class="mu-user-menu-divider horizontal"></div>
-    <div class="mu-user-menu-item">
-      <%= messages_user_menu_link %>
-    </div>
-    <% if current_user&.can_discuss_here? %>
-      <div class="mu-user-menu-item">
+<div class="col-md-3 mu-tab-body">
+  <div class="mu-user-menu">
+    <div class="mu-user-menu-content">
+      <%= user_menu_header %>
+      <div class="mu-user-menu-items mu-hidden-sm-screen">
+        <%= profile_user_menu_link %>
+        <%= user_menu_divider %>
+        <%= messages_user_menu_link %>
         <%= discussions_user_menu_link %>
+        <%= user_menu_divider %>
+        <%= activity_user_menu_link %>
+        <%= certificates_user_menu_link %>
       </div>
-    <% end %>
-    <div class="mu-user-menu-divider horizontal"></div>
-    <div class="mu-user-menu-item">
-      <%= certificates_user_menu_link %>
     </div>
+    <div class="mu-user-menu-divider vertical d-none d-md-block"></div>
   </div>
-  <div class="mu-user-menu-divider vertical hidden-sm hidden-xs"></div>
+  <div class="mu-user-menu-divider horizontal d-block d-md-none"></div>
 </div>
-<div class="mu-user-menu-divider horizontal visible-sm visible-xs"></div>

data/app/views/layouts/application.html.erb

@@ -1,54 +1,51 @@
 <%= content_for :navbar do %>
   <%= hidden_field_tag("mu-current-exp", UserStats.exp_for(@current_user)) if in_gamified_context? %>
-  <div class="<%= exercise_container_type %>">
-    <nav class="mu-navbar">
-      <div class="mu-navbar-breadcrumb hidden-xs">
-        <ul class="mu-breadcrumb-list">
-          <%= yield :breadcrumbs %>
-        </ul>
-      </div>
-      <div class="dropdown hamburguer-breadcrumb hidden-sm hidden-md hidden-lg">
-        <% if content_for? :breadcrumbs %>
-        <span class="hamburguer" id="profileDropdown" data-toggle="dropdown">
-          <i class="fas fa-bars"></i>
-        </span>
-          <ul class="dropdown-menu dropdown-menu-left" aria-labelledby="profileDropdown">
-            <%= yield :breadcrumbs %>
-          </ul>
-        <% end %>
-      </div>
-      <div class="mu-navbar-avatar">
-        <% if current_logged_user? %>
-          <% if in_gamified_context? %>
-            <div class="mu-navbar-element">
-              <i class="fas fa-star fa-fw fa-2x mu-navbar-icon mu-level-tooltip" data-toggle="tooltip" data-placement="bottom" level="<%= t(:level) %>"></i>
-              <span class="mu-level-number"></span>
+  <div class="<%= exercise_container_type %> px-0">
+    <nav class="navbar navbar-light navbar-expand-lg mu-navbar">
+      <div class="container-fluid">
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#muNavbar" aria-controls="muNavbar" aria-expanded="false" aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="mu-navbar-avatar order-lg-2">
+          <% if current_logged_user? %>
+            <% if in_gamified_context? %>
+              <div class="mu-navbar-element">
+                <i class="fas fa-star fa-fw fa-2x mu-navbar-icon mu-level-tooltip" data-bs-toggle="tooltip" data-bs-placement="bottom" level="<%= t(:level) %>"></i>
+                <span class="mu-level-number"></span>
+              </div>
+            <% end %>
+            <%= render partial: 'notifications/dropdown' %>
+            <div class="dropdown mu-navbar-element">
+              <div id="profileDropdown" class="profile-dropdown dropdown-toggle" data-bs-toggle="dropdown" aria-label="<%= t(:user) %>" role="menu" tabindex="0">
+                <%= profile_picture_for current_user %>
+              </div>
+              <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="profileDropdown">
+                <%= menu_bar_list_items %>
+                <% if any_menu_bar_links? %>
+                  <li class="dropdown-divider"></li>
+                <% end %>
+                <% if faqs_enabled_here? %>
+                  <%= menu_link_to_faqs %>
+                  <li class="dropdown-divider"></li>
+                <% end %>
+                <%= logout_menu_link %>
+              </ul>
             </div>
+          <% else %>
+            <%= login_button %>
           <% end %>
-          <%= render partial: 'notifications/dropdown' %>
-          <div class="dropdown mu-navbar-element">
-            <div id="profileDropdown" class="profile-dropdown" data-toggle="dropdown" aria-label="<%= t(:user) %>" role="menu" tabindex="0">
-              <%= profile_picture_for current_user %>
-              <span class="caret"></span>
-            </div>
-            <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="profileDropdown">
-              <%= menu_bar_list_items %>
-              <% if any_menu_bar_links? %>
-                <li class="divider"></li>
-              <% end %>
-              <% if faqs_enabled_here? %>
-                <%= menu_link_to_faqs %>
-                <li class="divider"></li>
-              <% end %>
-              <%= logout_menu_link %>
+        </div>
+        <div class="collapse navbar-collapse mu-navbar-breadcrumb-container" id="muNavbar">
+          <div class="mu-navbar-breadcrumb order-lg-1">
+            <ul class="navbar-nav mu-breadcrumb-list">
+              <%= yield :breadcrumbs %>
             </ul>
           </div>
-        <% else %>
-          <%= login_button %>
-        <% end %>
+        </div>
       </div>
     </nav>
   </div>
+
 <% end %>
 
 <% content_for :footer do %>

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

@@ -1,4 +1,4 @@
-<div class="field form-group editor-code">
+<div class="editor-code">
   <%= form.editor :content, 'dynamic',
                   placeholder: t(:editor_placeholder),
                   class: 'form-control editor',
@@ -6,8 +6,8 @@
                   data: {lines: 17},
                   autocomplete: 'off' %>
   <div class="mu-overlapped">
-    <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) %>"><%= restart_icon %></a>
+    <%= expand_icon %>
+    <%= format_icon %>
+    <%= restart_icon 'editor', {'data-confirm': t(:confirm_reset)} %>
   </div>
 </div>

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

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