mumuki-laboratory 7.11.1 → 8.1.0

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/javascripts/mumuki_laboratory/application/submissions-store.js

@@ -83,6 +83,10 @@ mumuki.SubmissionsStore = (() => {
       return this.submissionSolutionContent(one) === this.submissionSolutionContent(other);
     }
 
+    clear() {
+      window.localStorage.clear();
+    }
+
     // private API
 
     _asString(object) {
@@ -96,3 +100,11 @@ mumuki.SubmissionsStore = (() => {
 
   return SubmissionsStore;
 })();
+
+mumuki.load(() => {
+  $('.mu-restart-guide').on("confirm:complete", (e) => {
+    if (e.detail[0]) {
+      mumuki.SubmissionsStore.clear();
+    }
+  })
+})

data/app/assets/stylesheets/mumuki_laboratory/application/_modules.scss

@@ -24,6 +24,7 @@
 @import "modules/popover";
 @import "modules/progress_bar";
 @import "modules/progress_listing";
+@import "modules/terms";
 @import "modules/timer";
 @import "modules/upload";
 @import "modules/user_profile";

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,123 +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});
+
+#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

@@ -0,0 +1,41 @@
+.terms-card {
+  position: relative;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  min-width: 0;
+  word-wrap: break-word;
+  background-color: #fff;
+  background-clip: border-box;
+  border: 1px solid rgba(0,0,0,.125);
+  border-radius: .25rem;
+  &:not(:first-child) {
+    border-top: none;
+  }
+  .terms-card-header {
+    cursor: pointer;
+    font-weight: bold;
+    padding: .75rem 1.25rem;
+    margin-bottom: 0;
+    background-color: rgba(0,0,0,.03);
+    border-bottom: 1px solid rgba(0,0,0,.125);
+  }
+  &:first-child .terms-card-header{
+    border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0;
+  }
+}
+.terms-card-body {
+  padding: 1.25rem;
+}
+
+.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;
     }
   }
-
-
 }