mumuki-laboratory 8.6.0 → 9.0.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 92a4fb878a7767d1fe4b760252213ae327d8e5ae82bab805065eddb85b3baa36
-  data.tar.gz: e45d454449b183f1f4c200152a25f2df58ef385c1c07949e3fda7be94e6de57c
+  metadata.gz: 07b2e50b039758471cfb6e6ce92b5c72de56a3d6edbcc1ddbcdfd12422b51f34
+  data.tar.gz: 69b54d57063273a7f3dee32e42126eff821332dbe8acec8f8337f91f1b929b90
 SHA512:
-  metadata.gz: 9113399868c37c29fc38521c88b1f4acd2477b6094469c97be54983eb46753245e79ea7d4a56cb641ade8746b05323ecdeef276321aeb70e19ceca123d232566
-  data.tar.gz: 1f101adea0a26968fe86fc9f7d5084e4cd821ab9b17ca528762bb55573a0be5eeb98e2eba0e5affa83da30168f046c6ea1b7e7cd6654beed0eeb599ea0aaaa73
+  metadata.gz: 4acb2a84b7b526ceebc4be7daf104e9a9d614c5659ab853da9614b16b1d3caffdc42c2cfce3fcdb22ee69e364d1339405291644dcf8b8f213e3756daf29d11de
+  data.tar.gz: 83e3a2120935b9b87c004d11fbd599ffe3a92093ab2decc2f787a905a4d0c50edb964390275f06452883213d42c03c35832281ad5963340d8f41f5b691b1e23c

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

@@ -0,0 +1,17 @@
+mumuki.load(() => {
+  scaleCertificate();
+  mumuki.resize(scaleCertificate);
+
+  function scaleCertificate() {
+    const $certPreview = $('.certificate-preview');
+    const $muCertificate = $('.mu-certificate-box');
+    $muCertificate.css('transform', 'scale(1)');
+
+    const scaleWidth = $muCertificate.width() / $certPreview.width();
+    $muCertificate.css({
+      'transform': `scale(${1 / scaleWidth})`,
+      'transform-origin': `0 0`,
+    });
+    $certPreview.height($muCertificate.height());
+  }
+});

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

@@ -0,0 +1,90 @@
+mumuki.faqs = class {
+
+  constructor() {
+    this.faqs = $('.mu-faqs');
+    this.topHierarchyElem = "H2";
+  }
+
+  // ================
+  // == Public API ==
+  // ================
+
+  /**
+   * Actually setup the faqs page
+   */
+  load() {
+    if(!this.faqs) return;
+    this._createFaqsGroups();
+    this._createNavbar();
+  }
+
+  // =================
+  // == Private API ==
+  // =================
+
+  _createNavbar() {
+    const $faqsNavbar = $(".mu-faqs-navbar nav ul");
+    $('.mu-faqs-group').each((_index, faqGroup) => {
+      const $navItem = this._createNavbarItem($faqsNavbar, faqGroup)
+      const $faqGroup = $(faqGroup);
+      this._configureClickFor($navItem, $faqGroup, $faqsNavbar)
+    });
+  }
+
+  _createNavbarItem($faqsNavbar, faqGroup) {
+    const $navItem = $(`<li><a href="#${faqGroup.id}">`)
+      .html(`${faqGroup.querySelector('h2').textContent}`);
+    $faqsNavbar.append($navItem);
+    return $navItem;
+  }
+
+  _configureClickFor($navItem, $faqGroup, $faqsNavbar) {
+    $navItem.click(function(e){
+      e.preventDefault();
+      $faqsNavbar.find('li').removeClass('active');
+      $navItem.addClass('active');
+      $('html, body').animate({scrollTop: $faqGroup.offset().top}, 1000);
+    });
+  }
+
+  _createFaqsGroups() {
+    const elemsGroups = this._buildFaqsGroups();
+    elemsGroups.forEach((group, index) => {
+      $(group).wrapAll(`<div class='mu-faqs-group' id='mu-faqs-group-${index}'>`);
+    });
+    this._createFaqsIcons();
+  }
+
+  _createFaqsIcons() {
+    const $faqIcon = $('<i class="mu-faqs-group-icon fa fa-plus">');
+    $faqIcon.click(function(e){
+      const $elem = $(this);
+      $elem.toggleClass('fa-plus fa-minus');
+      $elem.closest('.mu-faqs-group').toggleClass('active');
+    })
+    $('.mu-faqs-group').prepend($faqIcon);
+  }
+
+  _buildFaqsGroups() {
+    let newGroup = [];
+    let elemsGroups = [];
+    let previousNodeName;
+    $(".mu-faqs-content").children().each((index, elem) => {
+      if(elem.nodeName === this.topHierarchyElem && newGroup.length) {
+        elemsGroups.push(newGroup);
+        newGroup = [];
+      }
+      newGroup.push(elem);
+      previousNodeName = elem.nodeName
+    });
+
+    elemsGroups.push(newGroup);
+
+    return elemsGroups;
+  }
+
+};
+
+mumuki.load(() => {
+  new mumuki.faqs().load();
+});

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

@@ -1,17 +1,72 @@
+mumuki.upload = (() => {
+  class FileUploader {
+    constructor(file) {
+      this.file = file;
+    }
+
+    uploadFileIfValid() {
+      if (!this.file) return;
+
+      let maxFileSize = $('#mu-upload-input').attr("mu-upload-file-limit");
+      if (this.file.size > maxFileSize) {
+        return mumuki.upload.ui.showFileExceedsMaxSize();
+      }
+
+      mumuki.upload.ui.allowSubmissionFor(this.file.name);
+
+      const reader = new FileReader();
+      reader.onload = function (e) {
+        const contents = e.target.result;
+        $('#solution_content').html(contents);
+      };
+      reader.readAsText(this.file);
+
+      return reader;
+    }
+  }
+
+  class UI {
+    constructor() {
+      this.$uploadFileLimitExceeded = $('#mu-upload-file-limit-exceeded');
+      this.$uploadLabel = $('#mu-upload-label span');
+      this.$uploadLabelText = this.$uploadLabel.text();
+      this.$uploadIcon = $('#mu-upload-icon');
+      this.$btnSubmit = $('.btn-submit');
+    }
+
+    showFileExceedsMaxSize() {
+      this.$uploadFileLimitExceeded.removeClass('hidden');
+      this.$uploadLabel.text(this.$uploadLabelText);
+      this.$uploadIcon.addClass('fa-upload').removeClass('fa-file-alt');
+      this.$btnSubmit.addClass('disabled');
+    }
+
+    allowSubmissionFor(filename) {
+      this.$uploadFileLimitExceeded.addClass('hidden');
+      this.$uploadLabel.text(filename);
+      this.$uploadIcon.removeClass('fa-upload').addClass('fa-file-alt');
+      this.$btnSubmit.removeClass('disabled');
+    }
+  }
+
+  function _setUI() {
+    mumuki.upload.ui = new UI();
+  }
+
+  return {
+    FileUploader,
+    UI,
+
+    _setUI,
+
+    /** @type {UI} */
+    ui: null
+  };
+})();
+
 mumuki.load(() => {
-  $('#upload-input').change(function (evt) {
-    var file = evt.target.files[0];
-    if (!file) return;
-
-    var reader = new FileReader();
-    reader.onload = function (e) {
-      var contents = e.target.result;
-      $('#solution_content').html(contents);
-      $(evt.target).val("");
-      $('form.new_solution').submit();
-    };
-    reader.readAsText(file);
-    return false;
+  $('#mu-upload-input').change(function (evt) {
+    if (!mumuki.upload.ui) mumuki.upload._setUI();
+    return new mumuki.upload.FileUploader(evt.target.files[0]).uploadFileIfValid();
   });
 });
-

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

@@ -1,9 +1,20 @@
 mumuki.load(() => {
-  var hash = document.location.hash;
-  if (hash) {
-    $(".nav-tabs a[data-target='" + hash + "']").tab('show');
+  const $userMenuHeader = $('.mu-user-menu-header');
+  let onUserProfile = document.querySelector('.mu-profile-info') !== null;
+
+  $userMenuHeader.click(() => {
+    $('.mu-user-menu-items').toggleClass('hidden-sm-screen');
+    $('#mu-user-menu-header-icon').toggleClass('fa-chevron-up fa-chevron-down');
+  });
+
+  if (onUserProfile) {
+    $userMenuHeader.click();
   }
-  $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
-    window.location.hash = $(e.target).attr('data-target');
+
+  $('.mu-user-menu-item .active').click((e) => {
+    if (onUserProfile) {
+      e.preventDefault();
+      $userMenuHeader.click();
+    }
   });
 });

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

@@ -122,6 +122,9 @@ hr {
 
 /* TODO: move to mumuki-styles */
 .mu-inline-block-left {
+  display: flex;
+  align-items: center;
+
   margin-left: 15px;
 }
 

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

@@ -1,6 +1,7 @@
 @import "modules/avatar";
 @import "modules/book_header";
 @import "modules/breadcrumb";
+@import "modules/certificate";
 @import "modules/checkboxes";
 @import "modules/console";
 @import "modules/content_show";
@@ -10,6 +11,7 @@
 @import "modules/editor";
 @import "modules/exercise_assignment";
 @import "modules/exercise_results";
+@import "modules/faqs";
 @import "modules/flash";
 @import "modules/gs-board";
 @import "modules/guide_corollary";
@@ -27,4 +29,5 @@
 @import "modules/terms";
 @import "modules/timer";
 @import "modules/upload";
+@import "modules/user_menu";
 @import "modules/user_profile";

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

@@ -0,0 +1,33 @@
+.mu-certificate {
+  border: 1px solid $mu-color-dark-separator;
+}
+
+.mu-certificate-name {
+  margin-top: 0;
+  margin-bottom: 1em;
+}
+
+.mu-certificate-data {
+  margin-top: 30px;
+}
+
+.mu-certificate-buttons {
+  margin-bottom: 30px;
+}
+
+.mu-certificate-download-btn {
+  height: 35px;
+  padding: 0;
+  width: 157px;
+  border: none;
+}
+.mu-certificate-download-btn-icon {
+  border-right: 1px solid darken($mu-color-complementary, 10%);
+  padding: 8px 6px 9px 6px;
+  width: 35px;
+}
+.mu-certificate-download-btn-text {
+  display: inline-block;
+  width: 115px;
+  text-align: center;
+}

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

@@ -1,3 +1,16 @@
-.chapter-description p {
-  display: inline-block;
+.mu-chapter-description p {
+  display: inline-block
+}
+
+.mu-content-title-icons {
+  display: flex;
+  align-items: center;
+
+  font-size: 150%;
+  margin-left: 15px;
+  margin-right: 15px;
+
+  i {
+    margin-left: 5px;
+  }
 }

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

@@ -0,0 +1,84 @@
+.mu-faqs-container {
+  position: relative;
+  display: table;
+  width: 100%;
+
+  .mu-faqs-content {
+    padding-top: 50px;
+
+    width: 100%;
+
+    @media (min-width: 768px) {
+      width: 75%;
+      float: right;
+    }
+
+    .mu-faqs-group {
+      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;
+        }
+      }
+    }
+  }
+
+  .mu-faqs-navbar {
+    top: 0;
+    position: sticky;
+    width: 25%;
+    padding-top: 50px;
+
+    ul {
+      border-left: 1px solid $mu-color-disabled;
+      list-style: none;
+      padding-left: 0px;
+      li {
+        padding: 8px 10px 8px 15px;
+        cursor: pointer;
+        &.active {
+          border-left: 3px solid transparent;
+          border-color: darken($brand-primary, 5%);
+          margin-left: -3px;
+        }
+        a {
+          color: $brand-primary;
+          &:hover {
+            text-decoration: none;
+          }
+          @media (min-width: $container-lg) {
+            font-size: 1.1em;
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -28,7 +28,7 @@
       left: 20px;
       top: 17px;
 
-      margin-right: 30px;
+      margin-right: 40px;
       margin-bottom: 15px;
     }
 

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

@@ -0,0 +1,63 @@
+.mu-user-menu {
+  display: flex;
+  margin-top: 25px;
+}
+
+.mu-user-menu-content {
+  flex-grow: 1;
+}
+
+.mu-user-menu-header {
+  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;
+    cursor: auto;
+
+    i {
+      display: none;
+    }
+
+    span {
+      padding-left: 0px;
+    }
+  }
+}
+
+.mu-user-menu-items {
+  margin-top: 30px;
+
+  &.hidden-sm-screen {
+    @media only screen and (max-width: $screen-sm-max) {
+      display: none;
+    }
+  }
+}
+
+.mu-user-menu-item {
+  font-size: 17px;
+  margin-bottom: 5px;
+
+  a {
+    color: $brand-primary;
+    &.active {
+      font-weight: bold;
+    }
+  }
+}
+
+.mu-user-menu-divider {
+  &.vertical {
+    border-left: 2px solid $mu-color-separator;
+  }
+
+  &.horizontal {
+    border-top: 2px solid $mu-color-separator;
+
+    margin: 25px 0;
+  }
+}