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 "ios7";
@import "animate.css";
//@import "jquery.dataTables.css";
//@import "datatables.css";
body {
padding-top: 60px;

155
public/css/ios7.less
View File

@ -6,7 +6,11 @@
@navbar-height: 45px;
// Global =====================================================================
// Document ===================================================================
* {
outline: 0 !important;
}
body {
color: #666;
background: #e8e8e8;
@ -284,7 +288,9 @@ a {
}
// Datatable =============================================================
// Datatables ================================================================
// Search field
.dataTables_filter {
float: right;
@ -294,6 +300,7 @@ a {
width: inherit;
height: 30px;
margin: 0 0 5px 5px;
&:focus {
border-color: #007aff;
box-shadow: none;
@ -301,64 +308,120 @@ a {
}
}
// Show "X" entries
.dataTables_length {
float: left;
}
// Sorting controls
.dataTable th {
padding-right: 20px;
position: relative;
font-weight: normal;
.sorting {
&.sorting {
color: #007aff;
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 {
content: "";
width: 0;
height: 0;
position: absolute;
right: 12px;
border-right: 5px solid transparent;
border-left: 5px solid transparent; }
.dataTable th.sorting:after {
top: 19px;
border-top: 5px solid #007aff !important; }
.dataTable th.sorting:before {
top: 11px;
border-bottom: 5px solid #007aff !important; }
.dataTable th.sorting_asc {
color: #007aff;
cursor: pointer; }
.dataTable th.sorting_asc:after {
content: "";
width: 0;
height: 0;
position: absolute;
right: 12px;
top: 15px;
border-bottom: 5px solid #007aff !important;
border-right: 5px solid transparent;
border-left: 5px solid transparent; }
.dataTable th.sorting_desc {
color: #007aff;
cursor: pointer; }
.dataTable th.sorting_desc:after {
content: "";
width: 0;
height: 0;
position: absolute;
right: 12px;
top: 15px;
border-top: 5px solid #007aff !important;
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 =================================================================
.form-control {

8
views/api/foursquare.jade
View File

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