JS for searching/sorting

Closes #18
Raku · Nov 14, 2015 · a247df0 · a247df0
1 parent 9605950
commit a247df0
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 3 deletions.
diff --git a/mojo-app/lib/ModulesPerl6.pm b/mojo-app/lib/ModulesPerl6.pm
@@ -28,8 +28,14 @@ sub startup {
     $self->plugin(bootstrap3 => theme =>
             { cerulean => 'https://bootswatch.com/cerulean/_bootswatch.scss' }
     );
-    $self->asset('app.css' => '/sass/main.scss');
-    $self->asset('app.js'  => '/js/main.js'    );
+    $self->asset('app.css' => qw{
+        https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css
+        /sass/main.scss
+    });
+    $self->asset('app.js'  => qw{
+        https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js
+        /js/main.js
+    });
 
     # HELPERS
     $self->helper( dists => sub {

diff --git a/mojo-app/public/js/main.js b/mojo-app/public/js/main.js
@@ -0,0 +1,33 @@
+$(function(){
+    setup_table();
+});
+
+function setup_table() {
+    $('#dists').DataTable({
+        paging: false,
+        autoWidth: false,
+        scrollX: false,
+        info: false,
+        columnDefs: [
+            {
+                targets: [ 2, 3, 4, 5, 6 ],
+                searchable: false
+            },
+            {
+                targets: [ 6 ],
+                orderSequence: [ "desc", "asc" ]
+            }
+        ]
+    });
+
+    $('#dists_wrapper').addClass('table-responsive').unwrap();
+    $('#search').remove();
+
+    var filter_container = $('#dists_filter');
+    var filter = filter_container.addClass('form-group').find('[type=search]')
+        .addClass('form-control').attr('placeholder', 'Search');
+    filter_container.append(filter);
+    filter_container.find('label').remove();
+
+    filter.focus();
+}
diff --git a/mojo-app/public/sass/main.scss b/mojo-app/public/sass/main.scss
@@ -26,14 +26,58 @@ header {
     font-size: 200%;
 }
 
+table.dataTable, table.dataTable th, table.dataTable td {
+    box-sizing: border-box;
+}
+
+table.dataTable.no-footer,
+table.dataTable thead th, table.dataTable thead td {
+    border-bottom: none;
+}
+
+table.dataTable {
+    border-collapse: collapse;
+}
+
+table.dataTable thead .sorting {
+    background-image:url(data:image/gif;base64,R0lGODlhCwALAJEAAAAAAP///xUVFf///yH5BAEAAAMALAAAAAALAAsAAAIUnC2nKLnT4or00PvyrQwrPzUZshQAOw==);
+}
+
+table.dataTable thead .sorting_asc{
+    background-image:url(data:image/gif;base64,R0lGODlhCwALAJEAAAAAAP///xUVFf///yH5BAEAAAMALAAAAAALAAsAAAIRnC2nKLnT4or00Puy3rx7VQAAOw==);
+}
+
+table.dataTable thead .sorting_desc{
+    background-image:url(data:image/gif;base64,R0lGODlhCwALAJEAAAAAAP///xUVFf///yH5BAEAAAMALAAAAAALAAsAAAIPnI+py+0/hJzz0IruwjsVADs=);
+}
+
+.dataTables_wrapper .dataTables_filter {
+    float: none;
+    text-align: left;
+}
+
+.dataTables_wrapper .dataTables_filter input {
+    margin: 0;
+}
+
+.dataTables_wrapper .dataTables_filter {
+    padding: 20px 20px 0;
+}
+
 #dists {
     th:first-child,
     td:first-child {
         padding-left: 20px;
     }
 
-    td {
+    th:last-child {
+        padding-right: 10px;
+        background-position: right 10px center;
+    }
+
+    td, th {
         vertical-align: middle;
+        padding: 5px;
     }
     a {
         color: darken(#2FA4E7, 10%);