Merge branch 'fix/exercise-anomaly-detection-nil-values' into feature/ordered_exercise_collection

app/assets/javascripts/external_users.js

@@ -0,0 +1,32 @@
+$(function() {
+  var grid = $('#tag-grid');
+
+  if ($.isController('external_users') && grid.isPresent()) {
+    var spinner = $('#loading');
+    var noElements = $('#no-elements');
+
+    var buildTagContainer = function(tag) {
+      return '\
+        <div class="tag">\
+          <div class="name">' + tag.key + '</div>\
+          <div class="progress">\
+            <div class="progress-bar" role="progressbar" style="width:' + tag.value + '%">' + tag.value + '%</div>\
+          </div>\
+        </div>';
+    };
+
+    var jqxhr = $.ajax(window.location.href + '/tag_statistics', {
+      dataType: 'json',
+      method: 'GET'
+    });
+    jqxhr.done(function(response) {
+      spinner.hide();
+      if (response.length === 0) {
+        noElements.show();
+      } else {
+        var elements = response.map(buildTagContainer);
+        grid.append(elements);
+      }
+    });
+  }
+});

app/assets/stylesheets/base.css.scss

@@ -59,3 +59,34 @@ span.caret {
 .markdown {
   height: 200px;
 }
+
+.spinner {
+  width: 40px;
+  height: 40px;
+  background-color: #333;
+
+  margin: 100px auto;
+  -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
+  animation: sk-rotateplane 1.2s infinite ease-in-out;
+}
+
+@-webkit-keyframes sk-rotateplane {
+  0% { -webkit-transform: perspective(120px) }
+  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
+  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
+}
+
+@keyframes sk-rotateplane {
+  0% {
+    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
+    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
+  }
+  50% {
+    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
+    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
+  }
+  100% {
+    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
+    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
+  }
+}

app/assets/stylesheets/external_users.css.scss

@@ -0,0 +1,16 @@
+#no-elements {
+  display: none;
+}
+
+#tag-grid {
+  display: grid;
+  grid-template-columns: 25% 25% 25% 25%;
+  grid-column-gap: 10px;
+  grid-row-gap: 15px;
+
+  .progress {
+    .progress-bar {
+      min-width: 2em;
+    }
+  }
+}

app/assets/stylesheets/statistics.css.scss

@@ -120,34 +120,3 @@ tr.highlight {
     }
   }
 }
-
-.spinner {
-  width: 40px;
-  height: 40px;
-  background-color: #333;
-
-  margin: 100px auto;
-  -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
-  animation: sk-rotateplane 1.2s infinite ease-in-out;
-}
-
-@-webkit-keyframes sk-rotateplane {
-  0% { -webkit-transform: perspective(120px) }
-  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
-  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
-}
-
-@keyframes sk-rotateplane {
-  0% {
-    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
-  }
-  50% {
-    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
-  }
-  100% {
-    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-  }
-}