gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

ios7 style navigation tabs and pills

Browse Source
This commit is contained in:
Sahat Yalkabov
2013-12-05 14:45:34 -05:00
parent 5ca49c5c70
commit 18a53bca71
3 changed files with 106 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
public/css/ios7.less
View File

@ -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;
}
}
}
}

106
views/api/foursquare.jade
View File

@ -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

8
views/index.jade
View File

@ -11,3 +11,11 @@ block content
.alert.alert-success.fade.in
button.close(type='button', data-dismiss='alert', aria-hidden='true') ×
| 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