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;')
-      li.active
-        a(href='#venues', data-toggle='tab') Venues
-      li
-        a(href='#users', data-toggle='tab') Users
-
-    div.tab-content
-      #venues.tab-pane.fade.active.in
     .panel.panel-default
-          .panel-heading
-            i.fa.fa-signal
-            | Trending Venues
+      .panel-heading.tabs
+        i.fa.fa-foursquare
+        | Foursquare API
+        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
+
             table.dataTable.table.table-striped.table-bordered
               thead
                 tr
@@ -48,19 +48,13 @@ block content
                     td.hidden-xs #{venue.stats.checkinsCount}
                     td= venue.hereNow.count
 
-        .panel.panel-default
-          .panel-heading
-            i.fa.fa-ticket
-            | Venue Detail
-          .panel-body
-            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}
+            h3.lead.text-primary Venue Detail
+            p
+              span.label.label-primary #{venueDetail.venue.name} (#{venueDetail.venue.categories[0].shortName})
+              span.label.label-success #{venueDetail.venue.location.address}, #{venueDetail.venue.location.city}, #{venueDetail.venue.location.state}
+              span.label.label-warning #{venueDetail.venue.likes.count} likes, #{venueDetail.venue.rating} rating
+
+            img.pull-left(src='#{venueDetail.venue.photos.groups[0].items[0].prefix}150x150#{venueDetail.venue.photos.groups[0].items[0].suffix}')
 
           #users.tab-pane.fade
             .lead User Checkins