From 18a53bca717d4342810c21d0cc5a987b6d7ecd39 Mon Sep 17 00:00:00 2001
From: Sahat Yalkabov <sakhat@gmail.com>
Date: Thu, 5 Dec 2013 14:45:34 -0500
Subject: [PATCH] ios7 style navigation tabs and pills

---
 public/css/ios7.less      |  72 ++++++++++++++++++--------
 views/api/foursquare.jade | 106 +++++++++++++++++---------------------
 views/index.jade          |  10 +++-
 3 files changed, 106 insertions(+), 82 deletions(-)

diff --git a/public/css/ios7.less b/public/css/ios7.less
index 7e5b0b5270..513bbb9d97 100644
--- a/public/css/ios7.less
+++ b/public/css/ios7.less
@@ -15,7 +15,6 @@ html {
 }
 
 h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
-  margin-top: 0;
   font-weight: 300;
 }
 
@@ -217,39 +216,68 @@ label-info {
   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;
+.nav-tabs-justified {
+  > li > a {
+    border-radius: 0;
+    border-bottom: 1px solid #007aff;
   }
-  .active > a {
 
+  > .active > a,
+  > .active > a:hover,
+  > .active > a:focus {
+    border: 1px solid #007aff;
+    border-bottom-color: #fff;
   }
 }
 
 .nav-tabs {
-  margin-top: -5px;
-  border: 0;
-}
+  border-bottom: 1px solid #007aff;
+  > li {
+    > a {
+      color: #555;
+      border: 1px solid transparent;
+      border-radius: 0;
 
-.tab-content {
-  .row {
-    margin: 0;
+      transition: all 0.3s;
+
+      &:hover {
+        color: #333;
+        background-color: rgba(0,0,0,0.05);
+      }
+    }
+
+    // Active state, and it's :hover to override normal :hover
+    &.active > a {
+      &,
+      &:hover,
+      &:focus {
+        color: #007aff;
+      }
+    }
   }
 }
 
-.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
-  background-color: #007aff;
+.nav-pills {
+  > li {
+    > a {
+      border: 1px solid #007aff;
+
+      &:hover,
+      &:focus {
+        background-color: transparent;
+      }
+    }
+
+    &.active > a {
+      &,
+      &:hover,
+      &:focus {
+        background-color: #007aff;
+      }
+    }
+  }
 }
 
 
diff --git a/views/api/foursquare.jade b/views/api/foursquare.jade
index 58cfcdebb8..835770aee1 100644
--- a/views/api/foursquare.jade
+++ b/views/api/foursquare.jade
@@ -16,8 +16,8 @@ block content
         div= message
   else
     h1
-      i.fa.fa-tumblr-square
-      |  Tumblr API
+      i.fa.fa-foursquare
+      |  Foursquare APIs
     .btn-group.btn-group-justified
       a.btn.btn-lg.btn-primary-outline(href='https://developer.foursquare.com/start', target='_blank')
         i.fa.fa-check-square-o
@@ -29,62 +29,50 @@ block content
         i.fa.fa-code-fork
         | API Endpoints
 
-    .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
+    ul.nav.nav-tabs.nav-justified
+      li.active
+        a(href='#venues', data-toggle='tab') Venues
+      li
+        a(href='#users', data-toggle='tab') Users
+    .tab-content
+      #venues.tab-pane.fade.active.in
+        h3.text-primary Trending Venues
 
-            table.dataTable.table.table-striped.table-bordered
-              thead
-                tr
-                  th Name
-                  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.categories[0].name}
-                    td.hidden-xs #{venue.stats.checkinsCount}
-                    td= venue.hereNow.count
+        table.dataTable.table.table-striped.table-bordered
+          thead
+            tr
+              th Name
+              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.categories[0].name}
+                td.hidden-xs #{venue.stats.checkinsCount}
+                td= venue.hereNow.count
+        p
+          h3.text-primary Venue Detail
+          p
+            img(src='#{venueDetail.venue.photos.groups[0].items[0].prefix}150x150#{venueDetail.venue.photos.groups[0].items[0].suffix}')
+          .label.label-primary #{venueDetail.venue.name} (#{venueDetail.venue.categories[0].shortName})
+          .label.label-success #{venueDetail.venue.location.address}, #{venueDetail.venue.location.city}, #{venueDetail.venue.location.state}
+          .label.label-warning #{venueDetail.venue.likes.count} likes, #{venueDetail.venue.rating} rating
 
-            h3.lead.text-primary Venue Detail
-            p
-              span.label.label-primary #{venueDetail.venue.name} (#{venueDetail.venue.categories[0].shortName})
-            p
-              span.label.label-success #{venueDetail.venue.location.address}, #{venueDetail.venue.location.city}, #{venueDetail.venue.location.state}
-            p
-              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
-            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
+      #users.tab-pane.fade
+        h3.text-primary 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
diff --git a/views/index.jade b/views/index.jade
index 1d6f1ed608..9b00859788 100644
--- a/views/index.jade
+++ b/views/index.jade
@@ -10,4 +10,12 @@ block content
   if user
     .alert.alert-success.fade.in
       button.close(type='button', data-dismiss='alert', aria-hidden='true') ×
-      | Congratulations, you are logged in!
\ No newline at end of file
+      | Congratulations, you are logged in!
+
+  ul.nav.nav-tabs.nav-justified
+    li.active
+      a(href='#venues', data-toggle='tab') Venues
+    li
+      a(href='#users', data-toggle='tab') Users
+    .tab-content
+      h2 Demo
\ No newline at end of file