From a80f0a9ec18cfe0bc23b65ea4de8518cdc26c0ed Mon Sep 17 00:00:00 2001
From: Sahat Yalkabov <sakhat@gmail.com>
Date: Wed, 4 Dec 2013 17:32:06 -0500
Subject: [PATCH] Lots of awesome improvements to datatable styles, css
 refactoring and cleanup

---
 public/css/app.less       |   2 +-
 public/css/ios7.less      | 155 +++++++++++++++++++++++++++-----------
 views/api/foursquare.jade |   8 +-
 3 files changed, 114 insertions(+), 51 deletions(-)

diff --git a/public/css/app.less b/public/css/app.less
index c92b9b8731..534a05cc2f 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 "jquery.dataTables.css";
+//@import "datatables.css";
 
 body {
   padding-top: 60px;
diff --git a/public/css/ios7.less b/public/css/ios7.less
index e6f40b6352..56ff8bcd0b 100644
--- a/public/css/ios7.less
+++ b/public/css/ios7.less
@@ -6,7 +6,11 @@
 @navbar-height: 45px;
 
 
-// Global =====================================================================
+// Document ===================================================================
+* {
+  outline: 0 !important;
+}
+
 body {
   color: #666;
   background: #e8e8e8;
@@ -284,7 +288,9 @@ a {
 }
 
 
-// Datatable =============================================================
+// Datatables ================================================================
+
+// Search field
 .dataTables_filter {
   float: right;
 
@@ -294,6 +300,7 @@ a {
     width: inherit;
     height: 30px;
     margin: 0 0 5px 5px;
+
     &:focus {
       border-color: #007aff;
       box-shadow: none;
@@ -301,64 +308,120 @@ a {
   }
 }
 
+// Show "X" entries
 .dataTables_length {
   float: left;
 }
 
+// Sorting controls
 .dataTable th {
-  padding-right: 20px;
   position: relative;
   font-weight: normal;
 
-  .sorting {
+  &.sorting {
     color: #007aff;
     cursor: pointer;
+
+    &:after,
+    &:before {
+      content: "";
+      width: 0;
+      height: 0;
+      position: absolute;
+      right: 8px;
+      border-right: 5px solid transparent;
+      border-left: 5px solid transparent;
+    }
+
+    &:after {
+      top: 19px;
+      border-top: 5px solid #007aff;
+    }
+
+    &:before {
+      top: 11px;
+      border-bottom: 5px solid #007aff;
+    }
+  }
+
+  &.sorting_asc {
+    color: #007aff;
+    cursor: pointer;
+
+    &:after {
+      content: "";
+      width: 0;
+      height: 0;
+      position: absolute;
+      right: 12px;
+      top: 15px;
+      border-bottom: 5px solid #007aff;
+      border-right: 5px solid transparent;
+      border-left: 5px solid transparent;
+    }
+  }
+
+  &.sorting_desc {
+    color: #007aff;
+    cursor: pointer;
+
+    &:after {
+      content: "";
+      width: 0;
+      height: 0;
+      position: absolute;
+      right: 12px;
+      top: 15px;
+      border-top: 5px solid #007aff;
+      border-right: 5px solid transparent;
+      border-left: 5px solid transparent;
+    }
   }
 }
 
-.dataTable th.sorting:after, .dataTable th.sorting:before {
-  content: "";
-  width: 0;
-  height: 0;
-  position: absolute;
-  right: 12px;
-  border-right: 5px solid transparent;
-  border-left: 5px solid transparent; }
-.dataTable th.sorting:after {
-  top: 19px;
-  border-top: 5px solid #007aff !important; }
-.dataTable th.sorting:before {
-  top: 11px;
-  border-bottom: 5px solid #007aff !important; }
-.dataTable th.sorting_asc {
-  color: #007aff;
-  cursor: pointer; }
-.dataTable th.sorting_asc:after {
-  content: "";
-  width: 0;
-  height: 0;
-  position: absolute;
-  right: 12px;
-  top: 15px;
-  border-bottom: 5px solid #007aff !important;
-  border-right: 5px solid transparent;
-  border-left: 5px solid transparent; }
-.dataTable th.sorting_desc {
-  color: #007aff;
-  cursor: pointer; }
-.dataTable th.sorting_desc:after {
-  content: "";
-  width: 0;
-  height: 0;
-  position: absolute;
-  right: 12px;
-  top: 15px;
-  border-top: 5px solid #007aff !important;
-  border-right: 5px solid transparent;
-  border-left: 5px solid transparent; }
+// Showing 1 to 10 of "X" entries
+.dataTables_info {
+  float: left;
+  margin-top: 4px;
+  font-size: 13px;
+}
+
+// Pagination container
+.dataTables_paginate {
+  float: right;
+  text-align: right;
+  margin: 5px 0;
+}
+
+// Pagination buttons
+.dataTables_paginate a {
+  border-radius: 4px;
+  font-size: 13px;
+  cursor: pointer;
+  border: 1px solid #aaa;
+  color: #999;
+  background: #fff;
+  padding: 4px 8px;
+  margin-left:5px;
+
+  &:hover {
+    color: #007aff;
+    border-color: #007aff;
+  }
+
+  &.paginate_active {
+    border-color: #007aff;
+    background: #007aff;
+    color: #fff;
+  }
+
+  &.paginate_button_disabled {
+    border-color: #e3e3e3;
+    color: #ddd;
+    pointer-events: none;
+  }
+}
 
-th:active {
-  outline: none; }
 
 // Forms =================================================================
 .form-control {
diff --git a/views/api/foursquare.jade b/views/api/foursquare.jade
index 94c8ddf8a1..5bffa33b55 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-condensed
+            table.dataTable.table.table-striped.table-bordered
               thead
                 tr
                   th Name
-                  th.hidden-xs.hidden-sm Location
+                  th.hidden-xs.hidden-sm Category
                   th.hidden-xs Checkins
                   th Here Now
               tbody
                 for venue in trendingVenues.venues
                   tr
                     td= venue.name
-                    td.hidden-xs.hidden-sm #{venue.location.address}, #{venue.location.city}, #{venue.location.state}
-                    td.hidden-xs= venue.stats.checkinsCount
+                    td.hidden-xs.hidden-sm #{venue.categories[0].name}
+                    td.hidden-xs #{venue.stats.checkinsCount}
                     td= venue.hereNow.count
 
         .panel.panel-default