Overhaul newgrid template header a bit, to improve styles

tailbone/static/css/newgrids.css

@@ -6,16 +6,38 @@
  ********************************************************************************/
 
 
+/******************************
+ * header table
+ ******************************/
+
+.newgrid-wrapper .grid-header td.filters {
+    vertical-align: bottom;
+    width: 100%;
+}
+
+.newgrid-wrapper .grid-header td.menu {
+    padding: 0.5em;
+    vertical-align: top;
+    white-space: nowrap;
+}
+
+.newgrid-wrapper .grid-header td.tools {
+    margin: 0;
+    padding: 0;
+    vertical-align: bottom;
+    white-space: nowrap;
+}
+
 /******************************
  * filters
  ******************************/
 
 .newgrid-wrapper .newfilters {
-    margin-right: 15em;
+    margin: 0;
 }
 
 .newgrid-wrapper .newfilters fieldset {
-    margin: -8px 0 5px 0;
+    margin: 0;
     padding: 1px 5px 5px 5px;
     width: 80%;
 }
@@ -38,11 +60,11 @@
     line-height: 1.4em;
 }
 
-.newgrid-wrapper .newfilters .ui-button-text-icon-primary .ui-button-text {
+.newgrid-wrapper .ui-button-text-icon-primary .ui-button-text {
     padding: 0.2em 1em 0.2em 2.1em;
 }
 
-.newgrid-wrapper .newfilters .ui-selectmenu-button .ui-selectmenu-text {
+.newgrid-wrapper .ui-selectmenu-button .ui-selectmenu-text {
     padding: 0.2em 2.1em 0.2em 1em;
 }
 
@@ -70,7 +92,8 @@
 }
 
 .newgrid-wrapper .newfilters .buttons {
-    margin: 0 0 5px 0;
+    margin: 0.5em 0 0 0;
+    padding: 0;
 }
 
 .newgrid-wrapper .newfilters #add-filter-button {
@@ -79,23 +102,13 @@
 }
 
 
-/******************************
- * tools
- ******************************/
-
-.grid-tools {
-    float: right;
-    margin-bottom: 4px;
-}
-
-
-
 /******************************
  * table
  ******************************/
 
 .newgrid {
     clear: both;
+    margin-top: 0.3em;
 }
 
 .newgrid table {

tailbone/static/js/jquery.ui.tailbone.js

@@ -93,7 +93,7 @@
                 that.filters_form.off('submit');
                 that.filters_form.find('input[name="reset-to-default-filters"]').val('true');
                 that.element.mask("Refreshing data...");
-                that.filters_form.submit();
+                that.filters_form.get(0).submit();
             });
 
             // When user clicks Save Defaults button, refresh the grid as with

tailbone/templates/master/index.mako

@@ -28,8 +28,4 @@
 
 <%def name="grid_tools()"></%def>
 
-<ul id="context-menu">
-  ${self.context_menu_items()}
-</ul>
-
-${grid.render_complete(tools=capture(self.grid_tools))|n}
+${grid.render_complete(tools=capture(self.grid_tools).strip(), context_menu=capture(self.context_menu_items).strip())|n}

tailbone/templates/newgrids/complete.mako

@@ -1,12 +1,38 @@
 ## -*- coding: utf-8 -*-
 <div class="newgrid-wrapper">
+
+  <table class="grid-header">
+    <tbody>
+      <tr>
+
+        <td class="filters" rowspan="2">
           % if grid.filterable:
               ${grid.render_filters(allow_save_defaults=allow_save_defaults)|n}
           % endif
+        </td>
+
+        <td class="menu">
+          % if context_menu:
+              <ul id="context-menu">
+                ${context_menu|n}
+              </ul>
+          % endif
+        </td>
+      </tr>
+
+      <tr>
+        <td class="tools">
           % if tools:
               <div class="grid-tools">
                 ${tools|n}
-      </div>
+              </div><!-- grid-tools -->
           % endif
+        </td>
+      </tr>
+
+    </tbody>
+  </table><!-- grid-header -->
+
   ${grid.render_grid()|n}
+
 </div><!-- newgrid-wrapper -->

tailbone/templates/products/index.mako

@@ -36,6 +36,9 @@
       <script type="text/javascript">
 
       $(function() {
+
+          $('.newgrid-wrapper .grid-header .tools select').selectmenu();
+
           $('.newgrid-wrapper').on('click', 'a.print_label', function() {
               var quantity = $('table.label-printing #label-quantity');
               if (isNaN(quantity.val())) {
@@ -96,7 +99,7 @@
 <%def name="context_menu_items()">
   ${parent.context_menu_items()}
   % if request.has_perm('batches.create'):
-      <li>${h.link_to("Create Batch from Results", url('products.create_batch'))}</li>
+      <li>${h.link_to("Create new Batch from results", url('products.create_batch'))}</li>
   % endif
 </%def>