mumuki-laboratory 9.0.2 → 9.1.0

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

@@ -59,25 +59,23 @@ body.fullscreen {
 
 .files-tabs {
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  margin-bottom: -6px;
-  margin-left: 30px;
 
   .nav-tabs {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-    margin-bottom: 0;
+    flex-grow: 1;
+    margin-left: 30px;
+    margin-bottom: -6px;
+    border-bottom: 0;
     z-index: 1;
 
-    li {
+    .file-tab {
       position: relative;
-      width: 100%;
+      flex-grow: 1;
+      flex-basis: 0;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
+
       a {
         white-space: nowrap;
         overflow: hidden;
@@ -85,24 +83,24 @@ body.fullscreen {
         margin-right: 0;
         padding: 5px 10px;
       }
+
       .delete-file-button {
         position: absolute;
         right: 16px;
         top: 12px;
         cursor: pointer;
       }
-      &.active {
-        a {
-          background-color: $multifile-active-tab-background-color;
-          border: 1px solid $multifile-active-tab-border-color;
-          border-bottom: none;
-        }
+
+      > a.active {
+        background-color: $multifile-active-tab-background-color;
+        border: 1px solid $multifile-active-tab-border-color;
+        border-bottom: 2px solid transparent;
       }
-      &:not(.active) > a {
+
+      > a:not(.active) {
         background-color: $multifile-inactive-tab-background-color;
         border: 1px solid $multifile-inactive-tab-border-color;
         border-bottom: 1px solid $multifile-active-tab-border-color;
-        cursor: pointer;
         &:hover {
           background-color: $multifile-inactive-tab-border-color;
         }

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

@@ -1,7 +1,7 @@
 .exercise-assignment blockquote {
   @include border-radius(4px);
-  background-color: $brand-info-light;
-  border-left: 8px solid $brand-info;
+  background-color: $info-light;
+  border-left: 8px solid $info;
   font-size: 15px;
   margin: 10px 0;
 }
@@ -16,15 +16,6 @@
 }
 
 .mu-editor {
-  .form-group {
-    margin: 10px 0;
-  }
-  input[type=radio] {
-    margin: 4px;
-    & + label {
-      font-weight: normal;
-    }
-  }
   label p {
     margin: 0;
   }

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

@@ -19,13 +19,7 @@ ul.results-list {
   margin-left: 15px;
 }
 
-.example-see-more {
-  font-size: $font-size-base * 0.65;
-  background: lighten($brand-complementary, 10%);
-  border-radius: 6px;
-  padding: 2px 5px;
-  color: white;
-
+.mu-view-details {
   &:hover, &:focus {
     color: white;
   }

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

@@ -1,11 +1,14 @@
 .mu-faqs-container {
   position: relative;
   display: table;
+  width: 100%;
 
   .mu-faqs-content {
     padding-top: 50px;
 
-    @media (min-width: $container-sm) {
+    width: 100%;
+
+    @media (min-width: 768px) {
       width: 75%;
       float: right;
     }
@@ -14,14 +17,37 @@
       padding: 32px;
       box-shadow: 0 0.375em 2.8125em 0 #d2d5d9;
       margin-bottom: 32px;
+
+      @media (max-width: 767px) {
+        &:not(.active) {
+          h3, p {
+            display: none
+          }
+          h2 {
+            margin-bottom: 0px;
+          }
+        }
+      }
+
       h2 {
         margin-top: 0;
         margin-bottom: 20px;
       }
+
       h3 {
         color: #1A94A3; // should be $brand-secondary
         margin-top: 40px;
       }
+
+      .mu-faqs-group-icon {
+        float: right;
+        margin-top: 10px;
+        cursor: pointer;
+        display: none;
+        @media (max-width: 767px) {
+          display: unset;
+        }
+      }
     }
   }
 
@@ -31,10 +57,6 @@
     width: 25%;
     padding-top: 50px;
 
-    @media (min-width: $container-sm) {
-      display: hidden;
-    }
-
     ul {
       border-left: 1px solid $mu-color-disabled;
       list-style: none;
@@ -44,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;
   }
 }