Add some css to datatables

app/assets/stylesheets/forms.css.scss

@@ -1,18 +1,17 @@
-.error_panel {
+.panel {
   margin-bottom: 1em;
   border-radius: 3px;
-  border: 1px solid #ebccd1;
+  border: 1px solid transparent;
-  .error_header {
+  .panel-header {
-    .error_title {
+    .panel-title {
       font-size: 16px;
       margin-top: 0;
       margin-bottom: 0;
     }
     padding: 10px 15px;
-    color: #a94442;
+    border-bottom: 1px solid transparent;
-    background-color: #f2dede;
   }
-  .error_body {
+  .panel-body {
     padding: 15px;
     ul {
       margin-bottom: 0px;
@@ -20,3 +19,20 @@
     }
   }
 }
+
+.panel-default {
+  border-color: #ddd;
+  .panel-header {
+    border-color: #ddd;
+    background-color: #f5f5f5;
+    color: #333;
+  }
+}
+
+.panel-error {
+  .panel-header {
+    color: #a94442;
+    background-color: #f2dede;
+  }
+  border: 1px solid #ebccd1;
+}

app/assets/stylesheets/tables.css.scss

@@ -0,0 +1,49 @@
+table.pure-table-striped {
+  border: 0;
+
+  /* HEADER */
+  thead {
+    background-color: transparent;
+    th {
+      border: 0;
+    }
+  }
+
+  /* BODY */
+  tbody {
+    tr {
+      border-left: 0;
+      border-bottom: 1px solid rgb(128, 128, 128);
+      &:nth-child(odd) {
+        background-color: #f9f9f9;
+        td {
+          background-color: #f9f9f9;
+        }
+      }
+      td {
+        border-left: 0;
+        border-right: 0;
+        border-top: 1px solid #dddddd;
+        padding: 15px;
+      }
+    }
+  }
+}
+
+.data-table-filters {
+  .pure-g {
+    padding: 10px;
+    .pure-u-md-1-4, .pure-u-md-1-2 {
+      input {
+        width: 90%;
+      }
+    }
+  }
+  input {
+    padding: .5em .6em;
+    border: 1px solid #ccc;
+    box-shadow: inset 0 1px 3px #ddd;
+    border-radius: 4px;
+    vertical-align: middle;
+  }
+}

app/views/partials/_form_errors.html.haml

@@ -1,9 +1,9 @@
 - if object.errors.any?
-  .error_panel
+  .panel.panel-error
-    .error_header
+    .panel-header
-      %h3.error_title
+      %h3.panel-title
         This transaction could not be saved.
-    .error_body
+    .panel-body
       %ul
         - object.errors.full_messages.each do |tr|
           %li

app/views/users/show.html.haml

@@ -1,5 +1,30 @@
 %h2= @user.name
 
+.panel.panel-default.data-table-filters
+  .panel-header
+    %h3.panel-title Filters
+  .panel-body
+    .pure-g
+      .bound.input-listen.pure-u-1{ 'data-input-type': 'date-range' }
+        = "Between"
+        %input.lower-bound{type: 'date', placeholder: 'after'}
+        = "and"
+        %input.upper-bound{type: 'date', placeholder: 'before'}
+    .pure-g
+      .bound.input-listen.pure-u-1{ 'data-input-type': 'number-range' }
+        = "Between"
+        %input.lower-bound{type: 'number', placeholder: 'lower', class: 'pure-u-1-5'}
+        = "and"
+        %input.upper-bound{type: 'number', placeholder: 'upper', class: 'pure-u-1-5'}
+    .pure-g
+      .input-listen.pure-u-md-1-4{ 'data-input-type': 'text' }
+        %input{type: 'text', placeholder: 'Filter on Issuer'}
+      .input-listen.pure-u-md-1-4{ 'data-input-type': 'text' }
+        %input{type: 'text', placeholder: 'Filter on Peer'}
+      .input-listen.pure-u-md-1-2{ 'data-input-type': 'text' }
+        %input{type: 'text', placeholder: 'Filter on Message'}
+
+
 %table#transactions.pure-table.pure-table-striped{data: { source: user_path(@user) }}
   %thead
     %tr
@@ -9,22 +34,6 @@
       %th Issuer
       %th Message
   %tbody
-  %tfoot
-    %tr
-      %td.bound.input-listen{ 'data-input-type': 'date-range' }
-        %input.lower-bound{type: 'date', placeholder: 'after'}
-        = "<= Time <="
-        %input.upper-bound{type: 'date', placeholder: 'before'}
-      %td.bound.input-listen{ 'data-input-type': 'number-range' }
-        %input.lower-bound{type: 'number', placeholder: 'lower', class: 'pure-u-1-5'}
-        = "<= Amount <="
-        %input.upper-bound{type: 'number', placeholder: 'upper', class: 'pure-u-1-5'}
-      %td.input-listen{ 'data-input-type': 'text' }
-        %input{type: 'text', placeholder: 'Filter on Issuer'}
-      %td.input-listen{ 'data-input-type': 'text' }
-        %input{type: 'text', placeholder: 'Filter on Peer'}
-      %td.input-listen{ 'data-input-type': 'text' }
-        %input{type: 'text', placeholder: 'Filter on Message'}
 
 :javascript
   $(document).ready(function() {
@@ -39,11 +48,11 @@
       autoWidth: false,
       responsive: true,
       columns: [
-        { data: 'time',    name: 'Time',    className: 'min-tablet-l'},
+        { data: 'time',    name: 'Time',    width: "15%", className: 'min-tablet-l'},
-        { data: 'amount',  name: 'Amount',  className: 'min-mobile'},
+        { data: 'amount',  name: 'Amount',  width: "10%", className: 'min-mobile'},
-        { data: 'peer',    name: 'Peer',    className: 'min-mobile'},
+        { data: 'peer',    name: 'Peer',    width: "15%", className: 'min-mobile'},
-        { data: 'issuer',  name: 'Issuer',  className: 'min-desktop'},
+        { data: 'issuer',  name: 'Issuer',  width: "15%", className: 'min-desktop'},
-        { data: 'message', name: 'Message', className: 'min-tablet-p'},
+        { data: 'message', name: 'Message', width: "45%", className: 'min-tablet-p'},
       ]
     });