mumuki-laboratory 7.12.0 → 8.1.1

data/app/assets/javascripts/mumuki_laboratory/application/submission.js

@@ -26,7 +26,7 @@ mumuki.submission = (() => {
       this.submissionsResultsArea.html(data.html);
       data.status === 'aborted' ? this.error(submitButton) : submitButton.enable();
       mumuki.updateProgressBarAndShowModal(data);
-      mumuki.gamification._currentLevelProgression.setExpMessage(data.current_exp);
+      mumuki.gamification.currentLevelProgression.setExpMessage(data);
     }
     error(submitButton) {
       this.submissionsResultsArea.html('');

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

@@ -14,15 +14,6 @@ $modal-footer-height: 95px;
     height: calc(100% - #{$kids-characters-height} - 15px);
     width: 100%;
 
-    .konvajs-content {
-      width: unset !important;
-      height: unset !important;
-      canvas {
-        width: unset !important;
-        height: unset !important;
-      }
-    }
-
     .mu-kids-single-state,
     .mu-kids-blocks {
       width: 50%;
@@ -30,7 +21,7 @@ $modal-footer-height: 95px;
     }
 
     .mu-kids-blocks {
-      padding-bottom: 15px;
+      margin-right: 15px;
     }
 
     &.mu-full-workspace {
@@ -78,7 +69,7 @@ $modal-footer-height: 95px;
       padding: 30px;
       img {
         padding: 0;
-        border: 5px solid black;
+        border: 3px solid black;
         border-radius: 30px;
       }
     }
@@ -96,126 +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;
+  @media (orientation: landscape)  and (max-height: $height-lg + 50px) {
+    $height-sm: 85vh;
+    $width-sm: $height-sm / 0.625;
 
-      $width: 800px;
-      $height: $width * 0.625;
+    width: $width-sm;
+    height: $height-sm;
 
-      width: $width;
-      height: $height;
+    top: calc(50vh - #{$height-sm} / 2);
+    left: calc(50vw - #{$width-sm} / 2);
+  }
 
-      top: calc(50vh - #{$height} / 2);
-      left: calc(50vw - #{$width} / 2);
+  @media (orientation: portrait) {
+    $height-sm: 85vh;
+    $width-sm: 85vw;
 
-      $border-width: 16px;
-      border-width: $border-width;
-      border-style: solid;
-      border-color: $mu-color-link;
-      border-radius: $border-width;
-      box-shadow: none;
+    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,
-        '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/_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/api/courses_controller.rb

@@ -5,7 +5,6 @@ module Api
 
     def create
       @course.save!
-      @course.notify!
       render json: @course
     end
 
@@ -23,4 +22,4 @@ module Api
       @course.slug
     end
   end
-end
+end

data/app/controllers/api/organizations_controller.rb

@@ -14,13 +14,12 @@ module Api
     end
 
     def create
-      @organization.save_and_notify!
+      @organization.save!
       render json: @organization.to_resource_h
     end
 
     def update
-      @organization.update_and_notify! organization_params
-
+      @organization.update! organization_params
       render json: @organization.to_resource_h
     end
   end

data/app/controllers/api/users_controller.rb

@@ -4,14 +4,12 @@ module Api
     before_action :authorize_janitor!
 
     def create
-      @user.save!
-      @user.notify!
+      @user.save_and_notify!
       render json: @user.to_resource_h
     end
 
     def update
-      @user.update! user_params.except([:email, :permissions, :uid])
-      @user.notify!
+      @user.update_and_notify! user_params.except([:email, :permissions, :uid])
       render json: @user.to_resource_h
     end
   end