Skip to content

Commit

Permalink
added datatables
Browse files Browse the repository at this point in the history
  • Loading branch information
thiscodeworks committed May 12, 2018
1 parent 3ddb7ab commit c0835cb
Show file tree
Hide file tree
Showing 39 changed files with 33,961 additions and 4 deletions.
3 changes: 3 additions & 0 deletions _config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -213,6 +213,9 @@ theme-plugins:
input-mask:
name: Input Mask
files: [js]
datatables:
name: Datatables
files: [js]
# iconfonts:
# name: Iconfonts
# files: [css]
Expand Down
80 changes: 80 additions & 0 deletions src/_data/invoices.yml
Original file line number Diff line number Diff line change
Expand Up @@ -77,3 +77,83 @@
status: success
status-name: Paid Today
price: $940

-
invoice: "00450"
name: Design Works
client: Carlson Limited
vat-no: 87956621
date: 15 Dec 2017
status: success
status-name: Paid
price: $887

-
invoice: "00450"
name: UX Wireframes
client: Adobe
vat-no: 87956421
date: 12 Apr 2017
status: warning
status-name: Pending
price: $1200

-
invoice: "00452"
name: New Dashboard
client: Bluewolf
vat-no: 87952621
date: 23 Oct 2017
status: warning
status-name: Pending
price: $534

-
invoice: "00450"
name: Landing Page
client: Salesforce
vat-no: 87953421
date: 2 Sep 2017
status: secondary
status-name: Due in 2 Weeks
price: $1500

-
invoice: "00450"
name: Marketing Templates
client: Printic
vat-no: 87956621
date: 29 Jan 2018
status: danger
status-name: Paid Today
price: $648

-
invoice: "00450"
name: Sales Presentation
client: Tabdaq
vat-no: 87956621
date: 4 Feb 2018
status: secondary
status-name: Due in 3 Weeks
price: $300

-
invoice: "00450"
name: Logo & Print
client: Apple
vat-no: 87956621
date: 22 Mar 2018
status: success
status-name: Paid Today
price: $2500

-
invoice: "00450"
name: Icons
client: Tookapic
vat-no: 87956621
date: 13 May 2018
status: success
status-name: Paid Today
price: $940
12 changes: 8 additions & 4 deletions src/_includes/cards/invoices.html
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
<div class="card">
<div class="card-header">
<h3 class="card-title">Invoices</h3>
</div>

</div>
<div class="table-responsive">
<table class="table card-table table-vcenter text-nowrap">
<table class="table card-table table-vcenter text-nowrap datatable">
<thead>
<tr>
<th class="w-1">No.</th>
Expand All @@ -20,7 +19,7 @@ <h3 class="card-title">Invoices</h3>
</thead>

<tbody>
{% for invoice in site.data.invoices limit: 6 %}
{% for invoice in site.data.invoices limit: 30 %}
<tr>
<td><span class="text-muted">00{{ forloop.index | plus: 1400 }}</span></td>
<td><a href="invoice.html" class="text-inherit">{{ invoice.name }}</a></td>
Expand Down Expand Up @@ -53,5 +52,10 @@ <h3 class="card-title">Invoices</h3>
{% endfor %}
</tbody>
</table>
<script>
require(['datatables', 'jquery'], function(datatable, $) {
$('.datatable').DataTable();
});
</script>
</div>
</div>
Original file line number Diff line number Diff line change
@@ -0,0 +1,187 @@
table.dataTable {
clear: both;
margin-top: 6px !important;
margin-bottom: 6px !important;
max-width: none !important;
border-collapse: separate !important;
}
table.dataTable td,
table.dataTable th {
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
table.dataTable td.dataTables_empty,
table.dataTable th.dataTables_empty {
text-align: center;
}
table.dataTable.nowrap th,
table.dataTable.nowrap td {
white-space: nowrap;
}

div.dataTables_wrapper div.dataTables_length label {
font-weight: normal;
text-align: left;
white-space: nowrap;
}
div.dataTables_wrapper div.dataTables_length select {
width: 75px;
display: inline-block;
}
div.dataTables_wrapper div.dataTables_filter {
text-align: right;
}
div.dataTables_wrapper div.dataTables_filter label {
font-weight: normal;
white-space: nowrap;
text-align: left;
}
div.dataTables_wrapper div.dataTables_filter input {
margin-left: 0.5em;
display: inline-block;
width: auto;
}
div.dataTables_wrapper div.dataTables_info {
padding-top: 8px;
white-space: nowrap;
}
div.dataTables_wrapper div.dataTables_paginate {
margin: 0;
white-space: nowrap;
text-align: right;
}
div.dataTables_wrapper div.dataTables_paginate ul.pagination {
margin: 2px 0;
white-space: nowrap;
}
div.dataTables_wrapper div.dataTables_processing {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
margin-left: -100px;
margin-top: -26px;
text-align: center;
padding: 1em 0;
}

table.dataTable thead > tr > th.sorting_asc, table.dataTable thead > tr > th.sorting_desc, table.dataTable thead > tr > th.sorting,
table.dataTable thead > tr > td.sorting_asc,
table.dataTable thead > tr > td.sorting_desc,
table.dataTable thead > tr > td.sorting {
padding-right: 30px;
}
table.dataTable thead > tr > th:active,
table.dataTable thead > tr > td:active {
outline: none;
}
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled {
cursor: pointer;
position: relative;
}
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_desc_disabled:after {
position: absolute;
bottom: 8px;
right: 8px;
display: block;
font-family: 'Glyphicons Halflings';
opacity: 0.5;
}
table.dataTable thead .sorting:after {
opacity: 0.2;
content: "\e150";
/* sort */
}
table.dataTable thead .sorting_asc:after {
content: "\e155";
/* sort-by-attributes */
}
table.dataTable thead .sorting_desc:after {
content: "\e156";
/* sort-by-attributes-alt */
}
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_desc_disabled:after {
color: #eee;
}

div.dataTables_scrollHead table.dataTable {
margin-bottom: 0 !important;
}

div.dataTables_scrollBody > table {
border-top: none;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
div.dataTables_scrollBody > table > thead .sorting:after,
div.dataTables_scrollBody > table > thead .sorting_asc:after,
div.dataTables_scrollBody > table > thead .sorting_desc:after {
display: none;
}
div.dataTables_scrollBody > table > tbody > tr:first-child > th,
div.dataTables_scrollBody > table > tbody > tr:first-child > td {
border-top: none;
}

div.dataTables_scrollFoot > .dataTables_scrollFootInner {
box-sizing: content-box;
}
div.dataTables_scrollFoot > .dataTables_scrollFootInner > table {
margin-top: 0 !important;
border-top: none;
}

@media screen and (max-width: 767px) {
div.dataTables_wrapper div.dataTables_length,
div.dataTables_wrapper div.dataTables_filter,
div.dataTables_wrapper div.dataTables_info,
div.dataTables_wrapper div.dataTables_paginate {
text-align: center;
}
}
table.dataTable.table-condensed > thead > tr > th {
padding-right: 20px;
}
table.dataTable.table-condensed .sorting:after,
table.dataTable.table-condensed .sorting_asc:after,
table.dataTable.table-condensed .sorting_desc:after {
top: 6px;
right: 6px;
}

table.table-bordered.dataTable th,
table.table-bordered.dataTable td {
border-left-width: 0;
}
table.table-bordered.dataTable th:last-child, table.table-bordered.dataTable th:last-child,
table.table-bordered.dataTable td:last-child,
table.table-bordered.dataTable td:last-child {
border-right-width: 0;
}
table.table-bordered.dataTable tbody th,
table.table-bordered.dataTable tbody td {
border-bottom-width: 0;
}

div.dataTables_scrollHead table.table-bordered {
border-bottom-width: 0;
}

div.table-responsive > div.dataTables_wrapper > div.row {
margin: 0;
}
div.table-responsive > div.dataTables_wrapper > div.row > div[class^="col-"]:first-child {
padding-left: 0;
}
div.table-responsive > div.dataTables_wrapper > div.row > div[class^="col-"]:last-child {
padding-right: 0;
}

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit c0835cb

Please sign in to comment.