- Make robots manager fully responsive

- Add a cor-table which automatically stacks and collapses on mobile views

static/js/core-ui.js

@@ -715,4 +715,85 @@ angular.module("core-ui", [])
       }
     };
     return directiveDefinitionObject;
-  });
+  })
+
+ .directive('corTable', function() {
+  var directiveDefinitionObject = {
+    priority: 1,
+    replace: false,
+    transclude: false,
+    restrict: 'C',
+    scope: {},
+    compile: function(tElement, tAttrs, transclude) {
+      if (!window.matchMedia('(max-width: 767px)').matches) {
+        return;
+      }
+
+      var cloneWithAttr = function(e, kind, opt_fullclone) {
+        var clone = $(document.createElement(kind));
+        var attributes = $(e).prop("attributes");
+        $.each(attributes, function() {
+          clone.attr(this.name, this.value);
+        });
+
+        if (opt_fullclone) {
+          for (var i = 0; i < e.childNodes.length; ++i) {
+            clone.append($(e.childNodes[i]).clone(true));
+          }
+        }
+
+        return clone;
+      };
+
+      var appendRepeater = function(div, tr, headers) {
+        // Find all the tds directly under the tr and convert into a header + value span.
+        tr.children('td').each(function(idx, td) {
+          var displayer = cloneWithAttr(tr, 'div');
+          displayer.append(headers[idx].clone(true).addClass('mobile-col-header'));
+          displayer.append(cloneWithAttr(td, 'div', true).addClass('mobile-col-value'));
+          div.append(displayer);
+        });
+      };
+
+      // Find the thead's tds and turn them into header elements.
+      var headers = [];
+      tElement.find('thead td').each(function(idx, td) {
+        headers.push(cloneWithAttr(td, 'div', true));
+      });
+
+      // Find the element with the 'ng-repeat'.
+      var repeater = tElement.find('[ng-repeat]')[0];
+
+      // Convert the repeater into a <div> repeater.
+      var divRepeater = cloneWithAttr(repeater, 'div').addClass('mobile-row');
+
+      // If the repeater is a tbody, then we append each child tr. Otherwise, the repeater
+      // itself should be a tr.
+      if (repeater.nodeName.toLowerCase() == 'tbody') {
+        $(repeater).children().each(function(idx, tr) {
+          appendRepeater(divRepeater, $(tr), headers);
+        });
+      } else {
+        appendRepeater(divRepeater, $(repeater), headers);
+      }
+
+      var repeaterBody = $(document.createElement('tbody'));
+      var repeaterTr = $(document.createElement('tr'))
+      var repeaterTd = $(document.createElement('td'))
+
+      repeaterTd.append(divRepeater);
+      repeaterTr.append(repeaterTd);
+      repeaterBody.append(repeaterTr);
+
+      // Remove the tbody and thead.
+      tElement.find('thead').remove();
+      tElement.find('tbody').remove();
+      tElement.append(repeaterBody);
+    },
+
+    controller: function($rootScope, $scope, $element) {
+      $element.addClass('co-table');
+    }
+  };
+  return directiveDefinitionObject;
+});