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

Lots of awesome improvements to datatable styles, css refactoring and cleanup

Browse Source
This commit is contained in:
Sahat Yalkabov
2013-12-04 17:32:06 -05:00
parent a2ff239f42
commit a80f0a9ec1
3 changed files with 114 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/css/app.less
View File

@ -2,7 +2,7 @@
@import "font-awesome/font-awesome"; @import "font-awesome/font-awesome";
@import "ios7"; @import "ios7";
@import "animate.css"; @import "animate.css";
//@import "jquery.dataTables.css"; //@import "datatables.css";
body { body {
padding-top: 60px; padding-top: 60px;

155
public/css/ios7.less
View File

@ -6,7 +6,11 @@
@navbar-height: 45px; @navbar-height: 45px;
// Global ===================================================================== // Document ===================================================================
* {
outline: 0 !important;
}
body { body {
color: #666; color: #666;
background: #e8e8e8; background: #e8e8e8;
@ -284,7 +288,9 @@ a {
} }
// Datatable ============================================================= // Datatables ================================================================
// Search field
.dataTables_filter { .dataTables_filter {
float: right; float: right;
@ -294,6 +300,7 @@ a {
width: inherit; width: inherit;
height: 30px; height: 30px;
margin: 0 0 5px 5px; margin: 0 0 5px 5px;
&:focus { &:focus {
border-color: #007aff; border-color: #007aff;
box-shadow: none; box-shadow: none;
@ -301,64 +308,120 @@ a {
} }
} }
// Show "X" entries
.dataTables_length { .dataTables_length {
float: left; float: left;
} }
// Sorting controls
.dataTable th { .dataTable th {
padding-right: 20px;
position: relative; position: relative;
font-weight: normal; font-weight: normal;
.sorting { &.sorting {
color: #007aff; color: #007aff;
cursor: pointer; cursor: pointer;
&:after,
&:before {
content: "";
width: 0;
height: 0;
position: absolute;
right: 8px;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
}
&:after {
top: 19px;
border-top: 5px solid #007aff;
}
&:before {
top: 11px;
border-bottom: 5px solid #007aff;
}
}
&.sorting_asc {
color: #007aff;
cursor: pointer;
&:after {
content: "";
width: 0;
height: 0;
position: absolute;
right: 12px;
top: 15px;
border-bottom: 5px solid #007aff;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
}
}
&.sorting_desc {
color: #007aff;
cursor: pointer;
&:after {
content: "";
width: 0;
height: 0;
position: absolute;
right: 12px;
top: 15px;
border-top: 5px solid #007aff;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
}
} }
} }
.dataTable th.sorting:after, .dataTable th.sorting:before { // Showing 1 to 10 of "X" entries
content: ""; .dataTables_info {
width: 0; float: left;
height: 0; margin-top: 4px;
position: absolute; font-size: 13px;
right: 12px; }
border-right: 5px solid transparent;
border-left: 5px solid transparent; } // Pagination container
.dataTable th.sorting:after { .dataTables_paginate {
top: 19px; float: right;
border-top: 5px solid #007aff !important; } text-align: right;
.dataTable th.sorting:before { margin: 5px 0;
top: 11px; }
border-bottom: 5px solid #007aff !important; }
.dataTable th.sorting_asc { // Pagination buttons
color: #007aff; .dataTables_paginate a {
cursor: pointer; } border-radius: 4px;
.dataTable th.sorting_asc:after { font-size: 13px;
content: ""; cursor: pointer;
width: 0; border: 1px solid #aaa;
height: 0; color: #999;
position: absolute; background: #fff;
right: 12px; padding: 4px 8px;
top: 15px; margin-left:5px;
border-bottom: 5px solid #007aff !important;
border-right: 5px solid transparent; &:hover {
border-left: 5px solid transparent; } color: #007aff;
.dataTable th.sorting_desc { border-color: #007aff;
color: #007aff; }
cursor: pointer; }
.dataTable th.sorting_desc:after { &.paginate_active {
content: ""; border-color: #007aff;
width: 0; background: #007aff;
height: 0; color: #fff;
position: absolute; }
right: 12px;
top: 15px; &.paginate_button_disabled {
border-top: 5px solid #007aff !important; border-color: #e3e3e3;
border-right: 5px solid transparent; color: #ddd;
border-left: 5px solid transparent; } pointer-events: none;
}
}
th:active {
outline: none; }
// Forms ================================================================= // Forms =================================================================
.form-control { .form-control {

8
views/api/foursquare.jade
View File

@ -33,19 +33,19 @@ block content
i.fa.fa-signal i.fa.fa-signal
| Trending Venues | Trending Venues
.panel-body .panel-body
table.dataTable.table.table-hover.table-condensed table.dataTable.table.table-striped.table-bordered
thead thead
tr tr
th Name th Name
th.hidden-xs.hidden-sm Location 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.location.address}, #{venue.location.city}, #{venue.location.state} 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
.panel.panel-default .panel.panel-default