Updated foursquare venue detail UI

controllers/api.js

@@ -32,7 +32,7 @@ exports.foursquare = function(req, res) {
       });
     },
     venueDetail: function(callback) {
-      foursquare.Venues.getVenue('40a55d80f964a52020f31ee3', req.user.tokens.foursquare, function(err, results) {
+      foursquare.Venues.getVenue('49da74aef964a5208b5e1fe3', req.user.tokens.foursquare, function(err, results) {
         callback(err, results);
       });
     },

public/css/ios7.less

@@ -124,6 +124,38 @@ a {
   border-radius: 0px;
 }
 
+nav-tabs > li > a > [class*="icon-"] {
+  margin-right: 0 !important;
+}
+.nav-tabs > li > a > [class*="icon-"] + span {
+  display: none;
+}
+
+// Tabs ========================================================================
+
+.nav-tabs > li {
+
+  > a {
+  border-radius: 0px;
+  padding: 7px 15px;
+  }
+  .active > a {
+
+  }
+}
+
+.nav-tabs {
+  margin-top: -5px;
+  border: 0;
+}
+
+.tab-content {
+  .row {
+    margin: 0;
+  }
+}
+
+
 // Buttons ====================================================================
 .btn {
   font-weight: 300;
@@ -282,6 +314,11 @@ a {
     font-size: 15px;
     font-weight: 400;
     margin: 0;
+
+    &.tabs {
+      background: #f5f5f5;
+      border-bottom: 1px solid #ddd;
+    }
   }
 }
 
@@ -301,6 +338,13 @@ a {
   color: #007aff;
 }
 
+.text-warning {
+  color: #f0ad4e;
+}
+
+.list-inline {
+  margin-bottom: 0;
+}
 
 // Datatables ================================================================
 
@@ -393,18 +437,19 @@ a {
   }
 }
 
+.dataTables_wrapper {
+  .clearfix;
+}
+
 // 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

views/api/foursquare.jade

@@ -1,11 +1,6 @@
 extends ../layout
 
 block content
-  .page-header
-    h1
-      i.fa.fa-foursquare
-      |  Foursquare API
-
   if !user.tokens.foursquare
     .panel.panel-default
       .panel-heading
@@ -20,19 +15,24 @@ block content
       .panel-footer
         div= message
   else
-    ul.nav.nav-pills(style='margin-bottom: 15px;')
+    .panel.panel-default
-      li.active
+      .panel-heading.tabs
-        a(href='#venues', data-toggle='tab') Venues
+        i.fa.fa-foursquare
-      li
+        | Foursquare API
-        a(href='#users', data-toggle='tab') Users
+        ul.nav.nav-tabs.pull-right
+          li.active
+            a(href='#venues', data-toggle='tab')
+              i.fa.fa-map-marker
+              | Venues
+          li
+            a(href='#users', data-toggle='tab')
+              i.fa.fa-user
+              | Users
+      .panel-body
+        .tab-content
+          #venues.tab-pane.fade.active.in
+            h3.lead.text-primary Trending Venues
 
-    div.tab-content
-      #venues.tab-pane.fade.active.in
-        .panel.panel-default
-          .panel-heading
-            i.fa.fa-signal
-            | Trending Venues
-          .panel-body
             table.dataTable.table.table-striped.table-bordered
               thead
                 tr
@@ -48,33 +48,27 @@ block content
                     td.hidden-xs #{venue.stats.checkinsCount}
                     td= venue.hereNow.count
 
-        .panel.panel-default
+            h3.lead.text-primary Venue Detail
-          .panel-heading
+            p
-            i.fa.fa-ticket
+              span.label.label-primary #{venueDetail.venue.name} (#{venueDetail.venue.categories[0].shortName})
-            | Venue Detail
+              span.label.label-success #{venueDetail.venue.location.address}, #{venueDetail.venue.location.city}, #{venueDetail.venue.location.state}
-          .panel-body
+              span.label.label-warning #{venueDetail.venue.likes.count} likes, #{venueDetail.venue.rating} rating
-            img.img-thumbnail(src='https://irs3.4sqi.net/img/general/200x200/11109710_xePHC-bh76LL_EaG-tsM1lUV6Bp-VUG1r_haDSqSvBM.jpg')
-            p.text-danger Name: #{venueDetail.venue.name}
-            p.text-muted Location: #{venueDetail.venue.location.address}, #{venueDetail.venue.location.city}, #{venueDetail.venue.location.state}
-            p.text-success Categories:
-              for category in venueDetail.venue.categories
-                span  #{category.shortName} |
-            p.text-info Likes: #{venueDetail.venue.likes.count}
-            p.text-warning Rating: #{venueDetail.venue.rating}
 
-      #users.tab-pane.fade
+            img.pull-left(src='#{venueDetail.venue.photos.groups[0].items[0].prefix}150x150#{venueDetail.venue.photos.groups[0].items[0].suffix}')
-        .lead User Checkins
+
-        table.dataTable.table.table-bordered.table-hover
+          #users.tab-pane.fade
-          thead
+            .lead User Checkins
-            tr
+            table.dataTable.table.table-bordered.table-hover
-              th Name
+              thead
-              th Location
+                tr
-              th Category
+                  th Name
-              th Checkins
+                  th Location
-          tbody
+                  th Category
-            for checkin in userCheckins.checkins.items
+                  th Checkins
-              tr
+              tbody
-                td= checkin.venue.name
+                for checkin in userCheckins.checkins.items
-                td #{checkin.venue.location.address}, #{checkin.venue.location.city}, #{checkin.venue.location.state}
+                  tr
-                td= checkin.venue.categories[0].shortName
+                    td= checkin.venue.name
-                td= checkin.venue.stats.checkinsCount
+                    td #{checkin.venue.location.address}, #{checkin.venue.location.city}, #{checkin.venue.location.state}
+                    td= checkin.venue.categories[0].shortName
+                    td= checkin.venue.stats.checkinsCount