From ba235d629e956223383f9fb65e126db60616ca75 Mon Sep 17 00:00:00 2001
From: Andreas Granig <agranig@sipwise.com>
Date: Sat, 16 Mar 2013 20:44:03 +0100
Subject: [PATCH] Align modal datatable to form layout.

---
 lib/NGCP/Panel/Field/DataTable.pm           |  1 +
 share/templates/helpers/datatables.tt       | 21 +++++++---
 share/templates/helpers/datatables_field.tt | 43 ++++++++++++---------
 3 files changed, 40 insertions(+), 25 deletions(-)

diff --git a/lib/NGCP/Panel/Field/DataTable.pm b/lib/NGCP/Panel/Field/DataTable.pm
index 00e3066abd..4c845b0c45 100644
--- a/lib/NGCP/Panel/Field/DataTable.pm
+++ b/lib/NGCP/Panel/Field/DataTable.pm
@@ -18,6 +18,7 @@ sub render_element {
     (my $tablename = $self->html_name) =~ s!\.!!g;
 
     my $vars = {
+        label => $self->label,
         field_name => $self->html_name,
         table_id => $tablename . "table",
         hidden_id => $tablename . "hidden",
diff --git a/share/templates/helpers/datatables.tt b/share/templates/helpers/datatables.tt
index 04ca98856f..450e7818f8 100644
--- a/share/templates/helpers/datatables.tt
+++ b/share/templates/helpers/datatables.tt
@@ -5,17 +5,19 @@ div.modal {
     margin: -250px 0 0 -408px
 }
 
+div.modal .table thead tr th, div.modal .table tbody tr td {
+    padding-top: 4px;
+    padding-bottom: 4px;
+}
+
+
 div.dataTables_length label {
     width: 460px;
     float: left;
     text-align: left;
 }
  
-div.dataTables_length select {
-    width: 75px;
-}
- 
-div.dataTables_filter label {
+div.dataTables_filter, div.dataTables_paginate {
     float: right;
 }
  
@@ -69,13 +71,20 @@ table .headerSortUp:after {
   opacity: 0.6;
 }
 
+/*
+div.modal .dataTables_wrapper input[type="text"] {
+    line-height: 10px;
+    height: 10px;
+}
+*/
+
 </style>
 <script type="text/javascript">
 
 $.extend( $.fn.dataTableExt.oStdClasses, {
                 "sSortAsc": "header headerSortDown",
                 "sSortDesc": "header headerSortUp",
-                "sSortable": "header"
+                "sSortable": "header",
             } );
 
 $(document).ready(function() {
diff --git a/share/templates/helpers/datatables_field.tt b/share/templates/helpers/datatables_field.tt
index 450554668c..37b72d9448 100644
--- a/share/templates/helpers/datatables_field.tt
+++ b/share/templates/helpers/datatables_field.tt
@@ -14,7 +14,7 @@ $(document).ready(function() {
 
 	$('#[% table_id %]')
 	    .dataTable( {
-        "sDom": "<'row'<'span4'r><'span4'f>>t<'row'<'span4'i><'span4'p>>",
+        "sDom": "<'row'<'span2'r><'span4'f>>t<'row'<'span3'i><'span3'p>>",
 		"bProcessing": true,
 		"bServerSide": true,
 		"bPaginate": true,
@@ -45,24 +45,29 @@ $(document).ready(function() {
             return nRow;
         },
 	} );
-	
+
 } );
 </script>
-    
-    <input type="hidden" name="[% field_name %]" value="[% value %]" id="[% hidden_id %]"></input>
-     <table class="table table-bordered table-striped table-highlight table-hover" id="[% table_id %]">
-        <thead>
-            <tr>
-                [% FOREACH t IN table_titles %]
-                    <th>[% t %]</th>
-                [% END %]
-                <th class="span"></th>
-            </tr>
-        </thead>
-        <tbody>
-            <tr class="sw_action_row">
-                <td>Loading</td>
-            </tr>
-        </tbody>
-    </table>
+ 
+<div class="control-group">
+     <label class="control-label" for="[% table_id %]">[% label %]</label>
+     <div class="controls">
+         <input type="hidden" name="[% field_name %]" value="[% value %]" id="[% hidden_id %]"></input>
+         <table class="table table-bordered table-striped table-highlight table-hover" id="[% table_id %]">
+            <thead>
+                <tr>
+                    [% FOREACH t IN table_titles %]
+                        <th>[% t %]</th>
+                    [% END %]
+                    <th class="span"></th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr class="sw_action_row">
+                    <td>Loading</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</div>
 [% # vim: set tabstop=4 syntax=html expandtab: -%]