From a2ff239f42d9fdf255abdb4dfddf0d3ed681c34a Mon Sep 17 00:00:00 2001
From: Sahat Yalkabov <sakhat@gmail.com>
Date: Wed, 4 Dec 2013 16:38:02 -0500
Subject: [PATCH] Improved foursquare trending venues datatable, plus added
 dynamic show/hide of certain columns depending on the screen size

---
 public/css/app.less       |  2 +-
 public/css/ios7.less      | 32 ++++++++++++++++++++++++++++----
 views/api/foursquare.jade | 10 +++++-----
 3 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/public/css/app.less b/public/css/app.less
index 77471ae996..c92b9b8731 100644
--- a/public/css/app.less
+++ b/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;
diff --git a/public/css/ios7.less b/public/css/ios7.less
index 522f0a32bb..e6f40b6352 100644
--- a/public/css/ios7.less
+++ b/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;
diff --git a/views/api/foursquare.jade b/views/api/foursquare.jade
index d3e79e8833..94c8ddf8a1 100644
--- a/views/api/foursquare.jade
+++ b/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