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;

147
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;
}
}
.dataTable th.sorting:after, .dataTable th.sorting:before { &:after,
&:before {
content: ""; content: "";
width: 0; width: 0;
height: 0; height: 0;
position: absolute; position: absolute;
right: 12px; right: 8px;
border-right: 5px solid transparent; border-right: 5px solid transparent;
border-left: 5px solid transparent; } border-left: 5px solid transparent;
.dataTable th.sorting:after { }
&:after {
top: 19px; top: 19px;
border-top: 5px solid #007aff !important; } border-top: 5px solid #007aff;
.dataTable th.sorting:before { }
top: 11px;
border-bottom: 5px solid #007aff !important; } &:before {
.dataTable th.sorting_asc { top: 11px;
color: #007aff; border-bottom: 5px solid #007aff;
cursor: pointer; } }
.dataTable th.sorting_asc:after { }
content: "";
width: 0; &.sorting_asc {
height: 0; color: #007aff;
position: absolute; cursor: pointer;
right: 12px;
top: 15px; &:after {
border-bottom: 5px solid #007aff !important; content: "";
border-right: 5px solid transparent; width: 0;
border-left: 5px solid transparent; } height: 0;
.dataTable th.sorting_desc { position: absolute;
color: #007aff; right: 12px;
cursor: pointer; } top: 15px;
.dataTable th.sorting_desc:after { border-bottom: 5px solid #007aff;
content: ""; border-right: 5px solid transparent;
width: 0; border-left: 5px solid transparent;
height: 0; }
position: absolute; }
right: 12px;
top: 15px; &.sorting_desc {
border-top: 5px solid #007aff !important; color: #007aff;
border-right: 5px solid transparent; cursor: pointer;
border-left: 5px solid transparent; }
&: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;
}
}
}
// 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
.dataTables_paginate a {
border-radius: 4px;
font-size: 13px;
cursor: pointer;
border: 1px solid #aaa;
color: #999;
background: #fff;
padding: 4px 8px;
margin-left:5px;
&:hover {
color: #007aff;
border-color: #007aff;
}
&.paginate_active {
border-color: #007aff;
background: #007aff;
color: #fff;
}
&.paginate_button_disabled {
border-color: #e3e3e3;
color: #ddd;
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