From 62022240d5e3e9e435363b5a803efac424c617d5 Mon Sep 17 00:00:00 2001
From: Sahat Yalkabov <sakhat@gmail.com>
Date: Wed, 4 Dec 2013 19:59:03 -0500
Subject: [PATCH] Updated foursquare venue detail UI

---
 controllers/api.js        |  2 +-
 public/css/ios7.less      | 51 +++++++++++++++++++++--
 views/api/foursquare.jade | 86 ++++++++++++++++++---------------------
 3 files changed, 89 insertions(+), 50 deletions(-)

diff --git a/controllers/api.js b/controllers/api.js
index fae89ffc23..705ddfd3d6 100644
--- a/controllers/api.js
+++ b/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);
       });
     },
diff --git a/public/css/ios7.less b/public/css/ios7.less
index 675d65394f..a7ad207e1b 100644
--- a/public/css/ios7.less
+++ b/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
diff --git a/views/api/foursquare.jade b/views/api/foursquare.jade
index 5bffa33b55..18b26b3a14 100644
--- a/views/api/foursquare.jade
+++ b/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
+    .panel.panel-default
+      .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
 
-    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
-          .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
 
-      #users.tab-pane.fade
-        .lead User Checkins
-        table.dataTable.table.table-bordered.table-hover
-          thead
-            tr
-              th Name
-              th Location
-              th Category
-              th Checkins
-          tbody
-            for checkin in userCheckins.checkins.items
-              tr
-                td= checkin.venue.name
-                td #{checkin.venue.location.address}, #{checkin.venue.location.city}, #{checkin.venue.location.state}
-                td= checkin.venue.categories[0].shortName
-                td= checkin.venue.stats.checkinsCount
+            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
+            table.dataTable.table.table-bordered.table-hover
+              thead
+                tr
+                  th Name
+                  th Location
+                  th Category
+                  th Checkins
+              tbody
+                for checkin in userCheckins.checkins.items
+                  tr
+                    td= checkin.venue.name
+                    td #{checkin.venue.location.address}, #{checkin.venue.location.city}, #{checkin.venue.location.state}
+                    td= checkin.venue.categories[0].shortName
+                    td= checkin.venue.stats.checkinsCount