Add responsive table with/without header

review10941002

src/sao.less

@@ -97,6 +97,66 @@
     }
 }
 
+@media screen and (max-width: 768px) {
+    table.responsive,
+    table.responsive > thead,
+    table.responsive > thead > tr,
+    table.responsive > thead > tr > th,
+    table.responsive > tbody,
+    table.responsive > tbody > tr,
+    table.responsive > tbody > tr > td {
+        display: block !important;
+    }
+    table.responsive {
+        /* Hide table headers (but not display: none; for accessiblity) */
+        & > thead > tr {
+            position: absolute;
+            top: -9999px;
+            left: -9999px;
+        }
+        & > thead > tr,
+        & > tbody > tr > td {
+            text-align: left !important;
+        }
+        /* Force height to empty content */
+        & td > div:empty {
+            min-height: 20px;
+        }
+    }
+    table.responsive-noheader {
+        & > tbody > tr > td {
+            width: 100% !important;
+        }
+    }
+    table.responsive-header {
+        > tbody > tr {
+            border: 1px solid #ccc;
+        }
+        & > tbody > tr > td {
+            /* Behave like a "row" */
+            border: none;
+            border-bottom: 1px solid #eee;
+            position: relative;
+            padding-left: 30%;
+        }
+        & > tbody > tr > td:before {
+            /* Now like a table header */
+            position: absolute;
+            /* Top/left values mimic padding */
+            top: 6px;
+            left: 6px;
+            width: 30%;
+            padding-right: 10px;
+            text-align: left;
+            font-weight: bold;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            /* Label */
+            content: attr(data-title);
+        }
+    }
+}
+
 #processing {
     position: fixed;
     top: 0px;

src/view.js

@@ -108,6 +108,12 @@
             this.table = jQuery('<table/>', {
                 'class': 'tree table table-hover'
             });
+            if (this.columns.filter(function(c) {
+                return !c.attributes.tree_invisible;
+            }).length > 1) {
+                this.table.addClass('responsive');
+                this.table.addClass('responsive-header');
+            }
             this.el.append(this.table);
             var thead = jQuery('<thead/>');
             this.table.append(thead);
@@ -474,7 +480,10 @@
 
             var depth = this.path.split('.').length;
             for (var i = 0; i < this.tree.columns.length; i++) {
-                td = jQuery('<td/>');
+                var column = this.tree.columns[i];
+                td = jQuery('<td/>', {
+                    'data-title': column.attributes.string
+                });
                 td.one('click', {column: i, td: td},
                         this.select_row.bind(this));
                 var widgets = this.build_widgets();
@@ -497,7 +506,6 @@
                     row.append(jQuery('<td/>').append(this.expander
                                 ).css('width', 1));
                 }
-                var column = this.tree.columns[i];
                 var j;
                 if (column.prefixes) {
                     for (j = 0; j < column.prefixes.length; j++) {
@@ -1452,7 +1460,7 @@
             if (col === undefined) col = 4;
             this.col = col;
             this.el = jQuery('<table/>', {
-                'class': 'form-container'
+                'class': 'form-container responsive responsive-noheader'
             });
             this.add_row();
         },