Improved foursquare trending venues datatable, plus added dynamic show/hide of certain columns depending on the screen size

public/css/app.less

@@ -2,7 +2,7 @@
 @import "font-awesome/font-awesome";
 @import "ios7";
 @import "animate.css";
-@import "datatables.css";
+//@import "jquery.dataTables.css";
 
 body {
   padding-top: 60px;

public/css/ios7.less

@@ -285,13 +285,37 @@ a {
 
 
 // Datatable =============================================================
+.dataTables_filter {
+  float: right;
+
+  input {
+    .form-control;
+    display: inline-block;
+    width: inherit;
+    height: 30px;
+    margin: 0 0 5px 5px;
+    &:focus {
+      border-color: #007aff;
+      box-shadow: none;
+    }
+  }
+}
+
+.dataTables_length {
+  float: left;
+}
+
 .dataTable th {
   padding-right: 20px;
   position: relative;
-  font-weight: normal; }
-.dataTable th.sorting {
-  color: #007aff;
-  cursor: pointer; }
+  font-weight: normal;
+
+  .sorting {
+    color: #007aff;
+    cursor: pointer;
+  }
+}
+
 .dataTable th.sorting:after, .dataTable th.sorting:before {
   content: "";
   width: 0;

views/api/foursquare.jade

@@ -33,19 +33,19 @@ block content
             i.fa.fa-signal
             | Trending Venues
           .panel-body
-            table.dataTable.table.table-hover
+            table.dataTable.table.table-hover.table-condensed
               thead
                 tr
                   th Name
-                  th Location
-                  th Checkins
+                  th.hidden-xs.hidden-sm Location
+                  th.hidden-xs Checkins
                   th Here Now
               tbody
                 for venue in trendingVenues.venues
                   tr
                     td= venue.name
-                    td #{venue.location.address}, #{venue.location.city}, #{venue.location.state}
-                    td= venue.stats.checkinsCount
+                    td.hidden-xs.hidden-sm #{venue.location.address}, #{venue.location.city}, #{venue.location.state}
+                    td.hidden-xs= venue.stats.checkinsCount
                     td= venue.hereNow.count
 
         .panel.panel-default