Commits

Kirill Simonov committed 911bbda

Improved grid layout.

  • Participants
  • Parent commits 4e6fcbb

Comments (0)

Files changed (2)

File src/htsql_tweak/shell/static/shell.css

 
 /* Grid borders */
 
+#grid-head {
+  background: #f2f2f2;
+}
+
 #grid table {
   border-style: hidden none none none;
 }
 
 #grid thead {
-  background: #eef5dd;
   background: #f2f2f2;
   border: solid #1a1a1a;
   border-width: 0 0 1px 0;
 
 #grid td,
 #grid th {
+  padding: 3px 10px;
+  overflow: hidden;
   vertical-align: bottom;
+  word-wrap: break-word;
 }
 
 #grid th {
   font-size: 105%;
 }
 
-#grid span {
-  display: block;
-  padding: 3px 10px;
-  overflow: hidden;
-}
-
-/*#grid td span {
-  overflow: auto;
-}*/
-
-#grid span.number {
+#grid .number {
   text-align: right;
 }
 
-#grid span.boolean {
+#grid .boolean {
+  text-align: right;
   font-style: italic;
 }
 
+#grid .dummy {
+  padding: 0;
+}
+
+#grid .w640 td {
+  max-width: 480px;
+}
+
+#grid .w640 th {
+  max-width: 160px;
+}
+
+#grid .w800 td {
+  max-width: 600px;
+}
+
+#grid .w800 th {
+  max-width: 200px;
+}
+
+#grid .w1024 td {
+  max-width: 768px;
+}
+
+#grid .w1024 th {
+  max-width: 256px;
+}
+
+#grid .w1280 td {
+  max-width: 960px;
+}
+
+#grid .w1280 th {
+  max-width: 320px;
+}
+
+#grid .w1600 td {
+  max-width: 1200px;
+}
+
+#grid .w1600 th {
+  max-width: 400px;
+}
+
 /* Grid scrolling */
 
 #grid {

File src/htsql_tweak/shell/static/shell.js

         var scrollbarWidth = 100-$inner.width();
         $outer.remove();
         return {
-            scrollbarWidth: scrollbarWidth,
-            screenWidth: 2000,
+            scrollbarWidth: scrollbarWidth || 20,
+            screenWidth: window.screen.width || 2000,
         }
     }
 
     }
 
     function handleProduct(output) {
-//      timing("rendering table");
+//        timing("rendering table");
         var style = output.style;
         var head = output.head;
         var body = output.body;
         var size = style.length;
+        var width = $viewport.width();
+        var constraint = null;
+        if (width < 640)
+            constraint = 'w640';
+        else if (width < 800)
+            constraint = 'w800';
+        else if (width < 1024)
+            constraint = 'w1024';
+        else if (width < 1280)
+            constraint = 'w1280';
+        else if (width < 1600)
+            constraint = 'w1600';
         var table = '';
-        table += '<table>';
+        table += '<table'+(constraint ? ' class="'+constraint+'"' : '')+'>';
         table += '<colgroup>';
         table += '<col>';
         for (var i = 0; i < size; i ++) {
             table += '<col>';
         }
-        table += '<col style="width: '+environ.screenWidth+'px">';
+        table += '<col style="width: '+width+'px">';
         table += '</colgroup>';
         table += '<thead>';
         for (var k = 0; k < head.length; k ++) {
                 var rowspan = cell[2];
                 table += '<th' + (colspan>1 ? ' colspan="'+colspan+'"' : '')
                                     + (rowspan>1 ? ' rowspan="'+rowspan+'"' : '') + '>'
-                              + '<span>' + title + '</span></th>';
+                              + title + '</th>';
             }
             if (k == 0) {
                 table += '<th' + (head.length > 1 ? ' rowspan="'+head.length+'"' : '')
         for (var k = 0; k < body.length; k ++) {
             var row = body[k];
             table += '<tr' + (k % 2 == 1 ? ' class="alt">' : '>');
-            table += '<th><span>'+(k+1)+'</span></th>';
+            table += '<th>'+(k+1)+'</th>';
             for (var i = 0; i < size; i ++) {
                 var value = row[i];
                 if (value == null) {
                     value = '&nbsp;'
                 }
-                table += '<td><span' + (style[i] ? ' class="'+style[i]+'">' : '>')
-                              + value + '</span></td>';
+                table += '<td' + (style[i] ? ' class="'+style[i]+'">' : '>')
+                              + value + '</td>';
             }
             table += '<td class="dummy">&nbsp;</td>';
             table += '</tr>';
         $gridHead.empty();
         $gridBody.empty()
             .css({ top: 0,
-                   width: ($viewport.width()+environ.screenWidth-1)+"px",
+                   width: size*width+"px",
                    right: "auto",
                    "overflow-y": "hidden",
                    "overflow-x": "hidden" });
         }
         updateTitle(title);
         $gridBody.html(table);
-        $gridHead.scrollLeft(0);
         $gridBody.scrollLeft(0).scrollTop(0);
         setTimeout(configureGrid, 0);
     }
         var gridWidth = $grid.width();
         var colWidths = [];
         $bodyTable.find('tbody tr:first-child').children().each(function(idx) {
-            colWidths[idx] = $(this).width();
+            colWidths[idx] = $(this).outerWidth();
         });
         colWidths[colWidths.length-1] = 1;
         var tableWidth = 0;
-        for (var i = 0; i < colWidths.length-1; i ++) {
+        for (var i = 0; i < colWidths.length; i ++) {
             tableWidth += colWidths[i];
         }
         var overflow = 'auto';
             var diff = gridWidth-tableWidth-1;
             colWidths[colWidths.length-1] += diff;
             tableWidth += diff;
-            if (diff+5 >= environ.scrollbarWidth)
+            if (diff >= 2*environ.scrollbarWidth)
                 overflow = 'hidden';
         }
         var $bodyGroup = $("<colgroup></colgroup>");
         for (var i = 0; i < colWidths.length; i ++) {
             var width = colWidths[i];
             $bodyGroup.append("<col style=\"width: "+width+"px\">");
-            if (i == colWidths.length-1) {
-                width += environ.screenWidth;
-            }
             $headGroup.append("<col style=\"width: "+width+"px\">");
         }
         var $headTable = $("<table></table>")
                 .width(tableWidth)
                 .append($headGroup)
                 .append($bodyTable.children('thead').clone());
-        var headHeight = $headTable.height();
+        $gridHead.scrollLeft(0);
+        var headHeight = $gridHead.height();
+        $("<div></div>").appendTo($gridHead)
+            .width(tableWidth+environ.screenWidth)
+            .height(1);
         $bodyTable.children('colgroup').remove();
         $bodyTable.children('thead').remove();
+        $bodyTable.removeClass();
         $bodyTable.css('table-layout', 'fixed')
                 .width(tableWidth)
                 .prepend($bodyGroup);