mumuki-laboratory 8.0.0 → 8.2.0

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

@@ -10,6 +10,11 @@ $kids-speech-border: 1px solid $kids-speech-border-color;
 
 $kids-speech-tabs-width: 40px;
 
+.mu-exercise-content {
+  border-radius: 10px;
+  border: 1px solid #dddddd;
+}
+
 .mu-kids-exercise {
   height: $kids-height;
   min-height: $kids-height;

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

@@ -1,3 +1,14 @@
+@mixin full-size-character {
+  width: 100%;
+  height: 100%;
+  img {
+    width: 100%;
+    height: 100%;
+    object-position: center;
+    object-fit: contain;
+  }
+}
+
 @each $class in success, warning, danger, broken {
   .mu-kids-callout-#{$class} {
     h4 {
@@ -47,3 +58,109 @@ $capital-animation-width: 135px;
   }
 }
 
+.mu-kids-modal-border {
+
+  .modal-dialog {
+
+    height: 100vh;
+    width: 100vw;
+    margin: 0;
+
+    .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;
+      border-color: $mu-color-link;
+      border-radius: $border-width;
+      box-shadow: none;
+
+      .modal-body {
+        div, p {
+          height: 100%;
+          .mu-kids-results-carrousel,
+          .mu-kindergarten-context-image-slides {
+            > :not(.active) {
+              display: none;
+            }
+          }
+        }
+        .mu-level p {
+          height: unset;
+        }
+      }
+
+      .mu-kids-modal-button {
+        $diameter: 64px;
+        position: absolute;
+        border-radius: 50%;
+        height: $diameter;
+        width: $diameter;
+        color: white;
+        font-weight: bold;
+        border: none;
+        padding: 0;
+        background: $mu-color-link;
+        &.mu-next,
+        &.mu-close {
+          top: - $diameter / 2 - $border-width / 2;
+          right: - $diameter / 2 - $border-width / 2;
+        }
+        &.mu-previous {
+          top: - $diameter / 2 - $border-width / 2;
+          left: - $diameter / 2 - $border-width / 2;
+        }
+      }
+
+      $mu-statuses-colors: (
+        'broken': $mu-color-broken,
+        'danger': $mu-color-danger,
+        'success': $mu-color-success,
+        'warning': $mu-color-warning,
+        'passed': $mu-color-success,
+        'passed-with-warnings': $mu-color-warning,
+        'failed': $mu-color-danger,
+        'errored': $mu-color-broken,
+        'aborted': $mu-color-broken,
+        'pending': $mu-color-info
+      );
+
+      @each $class, $color in $mu-statuses-colors {
+        &.#{$class} {
+          border-color: $color;
+          .mu-kids-modal-button {
+            background: $color;
+          }
+        }
+        .mu-kids-character.kindergarten {
+          @include full-size-character;
+        }
+
+        .submission-results.kindergarten {
+          width: 100%;
+          height: 100%;
+          .mu-kids-callout-#{$class},
+          p {
+            display: none;
+          }
+          .mu-kids-default-#{$class} {
+            @include full-size-character;
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -87,155 +87,69 @@ $modal-footer-height: 95px;
   }
 }
 
-.mu-kindergarten-context {
+.modal-content.kindergarten {
+  $width-lg: 800px;
+  $height-lg: $width-lg * 0.625;
 
-  .modal-dialog {
+  width: $width-lg;
+  height: $height-lg;
 
-    height: 100vh;
-    width: 100vw;
-    margin: 0;
+  top: calc(50vh - #{$height-lg} / 2);
 
-    .modal-content {
-      position: absolute;
-
-      $width-lg: 800px;
-      $height-lg: $width-lg * 0.625;
-
-      width: $width-lg;
-      height: $height-lg;
-
-      top: calc(50vh - #{$height-lg} / 2);
-      left: calc(50vw - #{$width-lg} / 2);
-
-      @media (orientation: landscape)  and (max-height: $height-lg + 50px) {
-        $height-sm: 85vh;
-        $width-sm: $height-sm / 0.625;
+  @media (orientation: landscape)  and (max-height: $height-lg + 50px) {
+    $height-sm: 85vh;
+    $width-sm: $height-sm / 0.625;
 
-        width: $width-sm;
-        height: $height-sm;
+    width: $width-sm;
+    height: $height-sm;
 
-        top: calc(50vh - #{$height-sm} / 2);
-        left: calc(50vw - #{$width-sm} / 2);
-      }
-
-      @media (orientation: portrait) {
-        $height-sm: 85vh;
-        $width-sm: 85vw;
-
-        width: $width-sm;
-        height: $height-sm;
-
-        top: calc(50vh - #{$height-sm} / 2);
-        left: calc(50vw - #{$width-sm} / 2);
-      }
+    top: calc(50vh - #{$height-sm} / 2);
+    left: calc(50vw - #{$width-sm} / 2);
+  }
 
-      $border-width: 16px;
-      border-width: $border-width;
-      border-style: solid;
-      border-color: $mu-color-link;
-      border-radius: $border-width;
-      box-shadow: none;
+  @media (orientation: portrait) {
+    $height-sm: 85vh;
+    $width-sm: 85vw;
 
-      .modal-header,
-      .modal-footer {
-        text-align: center;
-        text-transform: uppercase;
-      }
+    width: $width-sm;
+    height: $height-sm;
 
-      .modal-body {
-        height: 100%;
-        div, p {
-          height: 100%;
-          .mu-kindergarten-context-image-slides {
-            img:not(.active) {
-              display: none;
-            }
-          }
-          img {
-            width: 100%;
-            height: 100%;
-            object-position: center;
-            object-fit: contain;
-          }
-        }
-      }
+    top: calc(50vh - #{$height-sm} / 2);
+    left: calc(50vw - #{$width-sm} / 2);
+  }
 
-      .mu-kindergarten-modal-button {
-        $diameter: 64px;
-        position: absolute;
-        border-radius: 50%;
-        height: $diameter;
-        width: $diameter;
-        color: white;
-        font-weight: bold;
-        border: none;
-        padding: 0;
-        background: $mu-color-link;
-        &.mu-next,
-        &.mu-close {
-          top: - $diameter / 2 - $border-width / 2;
-          right: - $diameter / 2 - $border-width / 2;
-        }
-        &.mu-previous {
-          top: - $diameter / 2 - $border-width / 2;
-          left: - $diameter / 2 - $border-width / 2;
-        }
-      }
+  .modal-header,
+  .modal-footer {
+    text-align: center;
+    text-transform: uppercase;
+  }
 
-      $mu-statuses-colors: (
-        'broken': $mu-color-broken,
-        'danger': $mu-color-danger,
-        'success': $mu-color-success,
-        'warning': $mu-color-warning,
-        'passed': $mu-color-success,
-        'passed-with-warnings': $mu-color-warning,
-        'failed': $mu-color-danger,
-        'errored': $mu-color-broken,
-        'aborted': $mu-color-broken,
-        'pending': $mu-color-info
-      );
-
-      @each $class, $color in $mu-statuses-colors {
-        &.#{$class} {
-          border-color: $color;
-          .mu-kindergarten-modal-button {
-            background: $color;
-          }
-        }
-        .submission-results {
-          width: 100%;
-          height: 100%;
-          .mu-kids-callout-#{$class},
-          p {
-            display: none;
-          }
-          .mu-kids-default-#{$class} {
-            width: 100%;
-            height: 100%;
-            img {
-              width: 100%;
-              height: 100%;
-              object-position: center;
-              object-fit: contain;
-            }
-          }
-        }
-      }
+  .modal-body.mu-kids-context-body {
+    height: 100%;
+    div img, p img {
+      width: 100%;
+      height: 100%;
+      object-position: center;
+      object-fit: contain;
     }
   }
 }
 
-#kids-results.mu-kindergarten-context {
+#kids-results.mu-kids-modal-border {
   .modal-body{
     height: calc(100% - #{$modal-header-height} - #{$modal-footer-height});
   }
 }
-#kids-results-aborted.mu-kindergarten-context {
-  .modal-body{
-    height: calc(100% - #{$modal-header-height});
-  }
-  h4.modal-header {
-    margin: 0;
+
+#kids-results-aborted.mu-kids-modal-border {
+  .modal-content.kindergarten {
+    .modal-body {
+      height: calc(100% - #{$modal-header-height});
+    }
+
+    h4.modal-header {
+      margin: 0;
+    }
   }
 }
 

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

@@ -18,10 +18,6 @@
   }
 }
 
-.editor-resize {
-  font-size: 0.5em;
-}
-
 body.fullscreen {
   .mu-overlapped a {
     margin-right: 15px;

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

@@ -1,12 +1,3 @@
-summary.terms-summary {
-  font-size: 29px;
-  outline: 0;
-  cursor: pointer;
-  .terms-summary-title {
-    display: inline;
-  }
-}
-
 .terms-card {
   position: relative;
   display: -ms-flexbox;
@@ -38,7 +29,13 @@ summary.terms-summary {
   padding: 1.25rem;
 }
 
-.terms-acceptance-btn {
-  margin-top: 10px;
-  display: block
+.terms-acceptance {
+  margin-top: 30px;
+
+  .terms-acceptance-btn {
+    margin-top: 10px;
+    display: block
+  }
 }
+
+

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

@@ -31,7 +31,37 @@
   }
 }
 
-.mu-profile-info {
+.mu-profile-info-left {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+
+  .mu-level-progress {
+    position: relative;
+    top: -275px;
+    margin-bottom: -275px;
+  }
+}
+
+.mu-level {
+  .mu-level-number {
+    position: absolute;
+    margin-top: 11px;
+    margin-left: -86px;
+    width: 87px;
+
+    text-align: center;
+    font-size: 1.5em;
+    font-weight: bold;
+    color: white;
+
+    user-select: none;
+    pointer-events: none;
+  }
+}
+
+.mu-profile-info-right {
   font-size: 20px;
   margin-top: 5px;
   div {
@@ -40,6 +70,4 @@
       font-style: italic;
     }
   }
-
-
 }

data/app/controllers/application_controller.rb

@@ -12,6 +12,7 @@ class ApplicationController < ActionController::Base
   include Mumuki::Laboratory::Controllers::DynamicErrors
   include Mumuki::Laboratory::Controllers::EmbeddedMode
   include Mumuki::Laboratory::Controllers::IncognitoMode
+  include Mumuki::Laboratory::Controllers::ActionRedirector
 
   before_action :set_current_organization!
   before_action :set_locale!
@@ -24,6 +25,7 @@ class ApplicationController < ActionController::Base
   before_action :authorize_if_private!
   before_action :validate_active_organization!
   before_action :validate_user_profile!, if: :current_user?
+  before_action :validate_accepted_role_terms!, if: :current_user?
 
   before_action :visit_organization!, if: :current_user?
 
@@ -36,23 +38,26 @@ class ApplicationController < ActionController::Base
                 :has_notifications?,
                 :subject,
                 :should_choose_organization?,
+                :current_immersive_organizations,
                 :theme_stylesheet_url,
-                :extension_javascript_url
+                :extension_javascript_url,
+                :current_immersive_path
 
   def immersive_context_wrong?
     current_immersive_context != Organization.current
   end
 
   def redirect_to_proper_context!
-    # TODO: redirect to subject (if it exists on the immersive context)
-    redirect_to current_immersive_context.url_for('/')
+    redirect_to current_immersive_path_for(*current_immersive_context_and_content)
   end
 
   def should_choose_organization?
     return false unless current_user?
+    current_immersive_organizations.multiple?
+  end
 
-    # TODO: replace `nil` with `subject` to consider exercise, guide, etc
-    current_user.immersive_organizations_at(nil).size > 1
+  def current_immersive_organizations
+    current_user.immersive_organizations_with_content_at(subject)
   end
 
   # ensures contents are accessible to current user
@@ -66,7 +71,6 @@ class ApplicationController < ActionController::Base
     Organization.current.validate_active!
   end
 
-
   # required by Mumukit::Login
   def login_button(options = {})
     login_form.button_html I18n.t(:sign_in), options[:class]
@@ -82,11 +86,31 @@ class ApplicationController < ActionController::Base
     Mumuki::Domain::Workspace.new(current_user, Organization.current)
   end
 
+  def current_immersive_path(context)
+    current_immersive_path_for context, subject&.navigable_content_in(context)
+  end
+
+  def current_immersive_path_for(context, content)
+    resource = content ? polymorphic_path(content) : default_immersive_path_for(context)
+    context.url_for resource
+  end
+
   private
 
+  def default_immersive_path_for(context)
+    subject.present? ? root_path : inorganic_path_for(request)
+  end
+
+  def inorganic_path_for(request)
+    Mumukit::Platform.organization_mapping.inorganic_path_for(request)
+  end
+
   def current_immersive_context
-    # TODO: replace `nil` with `subject` to consider exercise, guide, etc
-    current_user&.current_immersive_context_at(nil) || Organization.current
+    current_immersive_context_and_content&.first || Organization.current
+  end
+
+  def current_immersive_context_and_content
+    current_user&.current_immersive_context_and_content_at(subject) || [Organization.current, nil]
   end
 
   def from_sessions?
@@ -99,11 +123,20 @@ 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
       redirect_to edit_user_path
     end
   end
 
+  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
+      redirect_to terms_user_path
+    end
+  end
+
   def set_locale!
     I18n.locale = Organization.current.locale
   end