mumuki-laboratory 9.0.5 → 9.1.3

data/app/assets/stylesheets/mumuki_laboratory/application/modules/_faqs.scss

@@ -66,15 +66,15 @@
         cursor: pointer;
         &.active {
           border-left: 3px solid transparent;
-          border-color: darken($brand-primary, 5%);
+          border-color: darken($primary, 5%);
           margin-left: -3px;
         }
         a {
-          color: $brand-primary;
+          color: $primary;
           &:hover {
             text-decoration: none;
           }
-          @media (min-width: $container-lg) {
+          @include media-breakpoint-up(xl) {
             font-size: 1.1em;
           }
         }

data/app/assets/stylesheets/mumuki_laboratory/application/modules/_flash.scss

@@ -1,57 +1,18 @@
-#toast-container {
+.toast-container {
   position: fixed;
-  bottom: 12px;
-  left: 15px;
+  color: white;
   z-index: 9999;
-  * {
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-  }
-  .toast {
-    position: relative;
-    overflow: hidden;
-    margin: 0 0 6px;
-    padding: 15px 15px 15px 50px;
-    width: 300px;
-    -moz-border-radius: 3px 3px 3px 3px;
-    -webkit-border-radius: 3px 3px 3px 3px;
-    border-radius: 3px 3px 3px 3px;
-    background-color: $mu-color-info;
-    background-position: 15px center;
-    background-repeat: no-repeat;
-    -moz-box-shadow: 0 0 12px #999999;
-    -webkit-box-shadow: 0 0 12px #999999;
-    box-shadow: 0 0 12px #999999;
-    color: #FFFFFF;
-    opacity: 0.8;
-    &:hover {
-      -moz-box-shadow: 0 0 12px #000000;
-      -webkit-box-shadow: 0 0 12px #000000;
-      box-shadow: 0 0 12px #000000;
-      opacity: 1;
-      cursor: pointer;
-    }
-  }
-  .toast-info {
-    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=") !important;
+
+  .mu-toast-info {
     background-color: $mu-color-info;
   }
-  .toast-error {
-    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=") !important;
+  .mu-toast-error {
     background-color: $mu-color-danger;
   }
-  .toast-success {
-    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==") !important;
+  .mu-toast-success {
     background-color: $mu-color-success;
   }
-  .toast-warning {
-    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=") !important;
+  .mu-toast-warning {
     background-color: $mu-color-warning;
   }
-  .toast-bottom-left {
-    bottom: 15px;
-    left: 15px;
-    z-index: 999999;
-  }
 }

data/app/assets/stylesheets/mumuki_laboratory/application/modules/_kids.scss

@@ -1,4 +1,4 @@
-$kids-height: calc(100vh - 80px - 30px) !default;
+$kids-height: calc(100vh - 100px - 30px) !default;
 
 $kids-characters-height: 120px;
 $kids-speech-arrow-size: 10px;
@@ -18,6 +18,12 @@ $kids-speech-tabs-width: 40px;
   height: $kids-height;
   min-height: $kids-height;
   max-height: $kids-height;
+  @include media-breakpoint-down(lg) {
+    //slightly larger navbar on lg, xl, xxl
+    height: calc(#{$kids-height} + 30px);
+    min-height: calc(#{$kids-height} + 30px);
+    max-height: calc(#{$kids-height} + 30px);
+  }
 
   display: flex;
   flex-direction: row;
@@ -34,6 +40,10 @@ $kids-speech-tabs-width: 40px;
   .mu-kids-states {
     padding-bottom: 15px;
     height: $kids-height;
+    @include media-breakpoint-down(lg) {
+      //slightly larger navbar on lg, xl, xxl
+      height: calc(#{$kids-height} + 30px);
+    }
   }
   .mu-kids-character {
     padding: 15px;
@@ -52,6 +62,11 @@ $kids-speech-tabs-width: 40px;
   }
   .mu-kids-blocks {
     height: calc(#{$kids-height} - #{$kids-characters-height} - 30px);
+    @include media-breakpoint-down(lg) {
+      //slightly larger navbar on lg, xl, xxl
+      height: calc(#{$kids-height} - #{$kids-characters-height});
+    }
+
     margin-left: 0;
     margin-right: 0;
     position: relative;
@@ -127,7 +142,7 @@ $kids-speech-tabs-width: 40px;
 
       }
 
-      @media screen and (max-width: $screen-sm-max) {
+      @include media-breakpoint-only(md) {
         h4 {
           &.text-warning {
             font-size: 18px;
@@ -142,7 +157,7 @@ $kids-speech-tabs-width: 40px;
         }
       }
 
-      @media screen and (max-width: $screen-xs-max) {
+      @include media-breakpoint-down(sm) {
         h4 {
           font-size: 20px;
           &.text-warning {
@@ -500,7 +515,7 @@ $statuses-glow-animation: (
   }
 }
 
-@media screen and (max-height: $screen-xs-min) {
+@media screen and (max-height: map_get($grid-breakpoints, sm)) {
   .mu-kids-exercise {
     height: 100vh;
     min-height: 100vh;

data/app/assets/stylesheets/mumuki_laboratory/application/modules/_kids_results.scss

@@ -58,29 +58,16 @@ $capital-animation-width: 135px;
   }
 }
 
-.mu-kids-modal-border {
-
+.mu-kids-modal {
   .modal-dialog {
+    @extend .modal-lg;
+    @extend .modal-dialog-centered;
 
-    height: 100vh;
-    width: 100vw;
-    margin: 0;
+    .modal-header {
+      @extend .justify-content-center;
+    }
 
     .modal-content {
-
-      position: absolute;
-
-      $width-lg: 800px;
-
-      width: $width-lg;
-
-      top: 60px;
-      left: calc(50% - #{$width-lg} / 2);
-
-      @media (max-width: $width-lg + 30px) {
-        width: calc(100vw - 30px);
-      }
-
       $border-width: 16px;
       border-width: $border-width;
       border-style: solid;
@@ -132,7 +119,6 @@ $capital-animation-width: 135px;
         'warning': $mu-color-warning,
         'passed': $mu-color-success,
         'passed_with_warnings': $mu-color-warning,
-        'passed-with-warnings': $mu-color-warning,
         'failed': $mu-color-danger,
         'errored': $mu-color-broken,
         'aborted': $mu-color-broken,
@@ -147,18 +133,27 @@ $capital-animation-width: 135px;
           }
         }
         .mu-kids-character.kindergarten {
-          @include full-size-character;
+          img {
+            width: 100%;
+            height: 100%;
+            object-position: center;
+            object-fit: contain;
+          }
         }
 
         .submission-results.kindergarten {
           width: 100%;
-          height: 100%;
           .mu-kids-callout-#{$class},
           p {
             display: none;
           }
           .mu-kids-default-#{$class} {
-            @include full-size-character;
+            img {
+              flex-grow: 1;
+              margin: 0;
+              width: 100%;
+              object-fit: contain;
+            }
           }
         }
       }

data/app/assets/stylesheets/mumuki_laboratory/application/modules/_kindergarten.scss

@@ -94,28 +94,20 @@ $modal-footer-height: 95px;
   width: $width-lg;
   height: $height-lg;
 
-  top: calc(50vh - #{$height-lg} / 2);
-
   @media (orientation: landscape)  and (max-height: $height-lg + 50px) {
     $height-sm: 85vh;
     $width-sm: $height-sm / 0.625;
 
     width: $width-sm;
     height: $height-sm;
-
-    top: calc(50vh - #{$height-sm} / 2);
-    left: calc(50vw - #{$width-sm} / 2);
   }
 
   @media (orientation: portrait) {
-    $height-sm: 85vh;
+    $height-sm: 75vh;
     $width-sm: 85vw;
 
     width: $width-sm;
     height: $height-sm;
-
-    top: calc(50vh - #{$height-sm} / 2);
-    left: calc(50vw - #{$width-sm} / 2);
   }
 
   .modal-header,

data/app/assets/stylesheets/mumuki_laboratory/application/modules/_overlap.scss

@@ -11,7 +11,7 @@
   flex-direction: column;
   a {
     cursor: pointer;
-    padding: 5px;
+    margin: 5px;
   }
   &.multiple-files {
     top: 43px;

data/app/assets/stylesheets/mumuki_laboratory/application/modules/_progress_bar.scss

@@ -8,7 +8,7 @@
     border-style: solid;
     width: 100%;
     height: 10px;
-    background-color: $gray-lighter;
+    background-color: $gray-200;
     &:hover {
       text-decoration: none;
     }
@@ -17,15 +17,15 @@
     }
   }
   .success {
-    background-color: $brand-success;
+    background-color: $success;
   }
   .warning {
-    background-color: $brand-warning;
+    background-color: $warning;
   }
   .danger {
-    background-color: $brand-danger;
+    background-color: $danger;
   }
   .info {
-    background-color: $brand-info;
+    background-color: $info;
   }
 }

data/app/assets/stylesheets/mumuki_laboratory/application/modules/_terms.scss

@@ -31,6 +31,9 @@
 }
 .terms-card-body {
   padding: 1.25rem;
+  p {
+    text-align: justify;
+  }
 }
 
 .terms-acceptance {
@@ -41,5 +44,3 @@
     display: block
   }
 }
-
-

data/app/assets/stylesheets/mumuki_laboratory/application/modules/_timer.scss

@@ -1,8 +1,6 @@
 .timer {
-  color: $brand-complementary;
+  color: $complementary;
   border-size: 0.1em;
   font-size: 1.25em;
   font-weight: bold;
-  color: $brand-complementary;
 }
-

data/app/assets/stylesheets/mumuki_laboratory/application/modules/_user_menu.scss

@@ -11,11 +11,9 @@
   font-size: 15px;
   color: $mu-color-disabled;
   text-transform: uppercase;
-  padding-left: 2px;
   cursor: pointer;
 
-  @media only screen and (min-width: $screen-md-min) {
-    padding-left: 15px;
+  @include media-breakpoint-up(md) {
     cursor: auto;
 
     i {
@@ -23,7 +21,7 @@
     }
 
     span {
-      padding-left: 0px;
+      padding-left: 0;
     }
   }
 }
@@ -31,8 +29,13 @@
 .mu-user-menu-items {
   margin-top: 30px;
 
+  @include media-breakpoint-down(md) {
+    margin-left: 15px;
+    margin-right: 15px;
+  }
+
   &.mu-hidden-sm-screen {
-    @media only screen and (max-width: $screen-sm-max) {
+    @include media-breakpoint-down(md) {
       display: none;
     }
   }
@@ -43,7 +46,7 @@
   margin-bottom: 5px;
 
   a {
-    color: $brand-primary;
+    color: $primary;
     &.active {
       font-weight: bold;
     }
@@ -59,5 +62,9 @@
     border-top: 2px solid $mu-color-separator;
 
     margin: 25px 0;
+
+    @include media-breakpoint-up(md) {
+      margin-right: 15px;
+    }
   }
 }

data/app/assets/stylesheets/mumuki_laboratory/application/modules/_user_profile.scss

@@ -6,12 +6,10 @@
 }
 
 .mu-profile-actions {
-  vertical-align: middle;
   margin-left: auto;
 
   .btn {
     width: 150px;
-    height: 55px;
     margin-left: 15px;
     transition: background-color 0.3s, border-color 0.3s;
 

data/app/controllers/application_controller.rb

@@ -43,6 +43,8 @@ class ApplicationController < ActionController::Base
                 :extension_javascript_url,
                 :current_immersive_path
 
+  add_flash_types :info
+
   def immersive_context_wrong?
     current_immersive_context != Organization.current
   end
@@ -124,7 +126,7 @@ class ApplicationController < ActionController::Base
   def validate_user_profile!
     unless current_user.profile_completed?
       save_location_before! :profile_completion
-      flash.notice = I18n.t :please_fill_profile_data
+      flash[:info] = I18n.t :please_fill_profile_data
       redirect_to edit_user_path
     end
   end
@@ -132,7 +134,7 @@ class ApplicationController < ActionController::Base
   def validate_accepted_role_terms!
     if current_user&.has_role_terms_to_accept?
       save_location_before! :terms_acceptance
-      flash.notice = I18n.t :accept_terms_to_continue
+      flash[:info] = I18n.t :accept_terms_to_continue
       redirect_to terms_user_path
     end
   end

data/app/controllers/discussions_messages_controller.rb

@@ -11,7 +11,9 @@ class DiscussionsMessagesController < AjaxController
   end
 
   def destroy
-    current_message.destroy!
+    authorize_moderator! unless params[:motive] == :self_deleted.to_s
+
+    current_message.soft_delete! params[:motive], current_user
     redirect_back(fallback_location: root_path)
   end
 

data/app/helpers/application_helper.rb

@@ -12,12 +12,12 @@ module ApplicationHelper
   end
 
   def avatar_image(avatar_url, **options)
-    options.merge!(class: "img-circle #{options[:class]}")
+    options.merge!(class: "rounded-circle #{options[:class]}")
     image_tag(image_url(avatar_url), options)
   end
 
   def paginate(object, options = {})
-    "<div class=\"text-center\">#{super(object, {theme: 'twitter-bootstrap-3'}.merge(options))}</div>".html_safe
+    super(object, {theme: 'bootstrap-5', pagination_class: 'flex-wrap justify-content-center'}.merge(options))
   end
 
   def last_box_class(trailing_boxes)
@@ -38,10 +38,10 @@ module ApplicationHelper
     t :chapter_finished_html, chapter: link_to_path_element(chapter) if chapter
   end
 
-  def span_toggle(hidden_text, active_text, active, **options)
+  def btn_toggle(hidden_text, active_text, active, **options)
     %Q{
-      <span class="#{'hidden' if active} #{options[:class]}">#{hidden_text}</span>
-      <span class="#{'hidden' unless active} #{options[:class]}">#{active_text}</span>
+      <button class="btn btn-complementary #{'d-none' if active} #{options[:class]}" onclick="#{options[:onclick]}">#{hidden_text}</button>
+      <button class="btn btn-secondary #{'d-none' unless active} #{options[:class]}" onclick="#{options[:onclick]}">#{active_text}</button>
     }.html_safe
   end