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 { h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
margin-top: 0;
font-weight: 300; font-weight: 300;
} }
@ -217,39 +216,68 @@ label-info {
border-radius: 0px; border-radius: 0px;
} }
nav-tabs > li > a > [class*="icon-"] {
margin-right: 0 !important;
}
.nav-tabs > li > a > [class*="icon-"] + span {
display: none;
}
// Tabs ======================================================================== // Tabs ========================================================================
.nav-tabs > li { .nav-tabs-justified {
> li > a {
> a { border-radius: 0;
border-radius: 0px; border-bottom: 1px solid #007aff;
padding: 7px 15px;
} }
.active > a {
> .active > a,
> .active > a:hover,
> .active > a:focus {
border: 1px solid #007aff;
border-bottom-color: #fff;
} }
} }
.nav-tabs { .nav-tabs {
margin-top: -5px; border-bottom: 1px solid #007aff;
border: 0; > li {
} > a {
color: #555;
border: 1px solid transparent;
border-radius: 0;
.tab-content { transition: all 0.3s;
.row {
margin: 0; &: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 { .nav-pills {
background-color: #007aff; > 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 div= message
else else
h1 h1
i.fa.fa-tumblr-square i.fa.fa-foursquare
| Tumblr API | Foursquare APIs
.btn-group.btn-group-justified .btn-group.btn-group-justified
a.btn.btn-lg.btn-primary-outline(href='https://developer.foursquare.com/start', target='_blank') a.btn.btn-lg.btn-primary-outline(href='https://developer.foursquare.com/start', target='_blank')
i.fa.fa-check-square-o i.fa.fa-check-square-o
@ -29,62 +29,50 @@ block content
i.fa.fa-code-fork i.fa.fa-code-fork
| API Endpoints | API Endpoints
.panel.panel-default ul.nav.nav-tabs.nav-justified
.panel-heading.tabs li.active
i.fa.fa-foursquare a(href='#venues', data-toggle='tab') Venues
| Foursquare API li
ul.nav.nav-tabs.pull-right a(href='#users', data-toggle='tab') Users
li.active .tab-content
a(href='#venues', data-toggle='tab') #venues.tab-pane.fade.active.in
i.fa.fa-map-marker h3.text-primary Trending Venues
| 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 table.dataTable.table.table-striped.table-bordered
thead thead
tr tr
th Name th Name
th.hidden-xs.hidden-sm Category th.hidden-xs.hidden-sm Category
th.hidden-xs Checkins th.hidden-xs Checkins
th Here Now th Here Now
tbody tbody
for venue in trendingVenues.venues for venue in trendingVenues.venues
tr tr
td= venue.name td= venue.name
td.hidden-xs.hidden-sm #{venue.categories[0].name} td.hidden-xs.hidden-sm #{venue.categories[0].name}
td.hidden-xs #{venue.stats.checkinsCount} td.hidden-xs #{venue.stats.checkinsCount}
td= venue.hereNow.count 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 #users.tab-pane.fade
p h3.text-primary User Checkins
span.label.label-primary #{venueDetail.venue.name} (#{venueDetail.venue.categories[0].shortName}) table.dataTable.table.table-bordered.table-hover
p thead
span.label.label-success #{venueDetail.venue.location.address}, #{venueDetail.venue.location.city}, #{venueDetail.venue.location.state} tr
p th Name
span.label.label-warning #{venueDetail.venue.likes.count} likes, #{venueDetail.venue.rating} rating th Location
th Category
img.pull-left(src='#{venueDetail.venue.photos.groups[0].items[0].prefix}150x150#{venueDetail.venue.photos.groups[0].items[0].suffix}') th Checkins
tbody
#users.tab-pane.fade for checkin in userCheckins.checkins.items
.lead User Checkins tr
table.dataTable.table.table-bordered.table-hover td= checkin.venue.name
thead td #{checkin.venue.location.address}, #{checkin.venue.location.city}, #{checkin.venue.location.state}
tr td= checkin.venue.categories[0].shortName
th Name td= checkin.venue.stats.checkinsCount
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

10
views/index.jade
View File

@ -10,4 +10,12 @@ block content
if user if user
.alert.alert-success.fade.in .alert.alert-success.fade.in
button.close(type='button', data-dismiss='alert', aria-hidden='true') × button.close(type='button', data-dismiss='alert', aria-hidden='true') ×
| Congratulations, you are logged in! | 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