Skip to content

Commit af9fa07

Browse files
committed
Upgrade datatables-responsive in demo l-lin#683
1 parent ce3cbe0 commit af9fa07

15 files changed

+1317
-430
lines changed
+15-8
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,30 @@
11
{
22
"name": "datatables-responsive",
3-
"version": "1.0.1",
43
"main": [
54
"js/dataTables.responsive.js",
6-
"css/dataTables.responsive.css"
5+
"css/responsive.dataTables.scss"
76
],
87
"dependencies": {
98
"jquery": ">=1.7.0",
109
"datatables": ">=1.10.1"
1110
},
12-
"homepage": "https://github.com/DataTables/Responsive",
13-
"_release": "1.0.1",
11+
"authors": [
12+
{
13+
"name": "SpryMedia Ltd",
14+
"homepage": "https://datatables.net"
15+
}
16+
],
17+
"homepage": "https://datatables.net",
18+
"license": "MIT",
19+
"version": "2.0.2",
20+
"_release": "2.0.2",
1421
"_resolution": {
1522
"type": "version",
16-
"tag": "1.0.1",
17-
"commit": "0c7c25338199ed8adc472f0ad19e86ba14490bf8"
23+
"tag": "2.0.2",
24+
"commit": "892c6a2b075a85970892ba62f6c0a50d8c0ff58f"
1825
},
19-
"_source": "git://github.com/DataTables/Responsive.git",
20-
"_target": "1.0.1",
26+
"_source": "https://github.com/DataTables/Responsive.git",
27+
"_target": "2.0.2",
2128
"_originalSource": "datatables-responsive",
2229
"_direct": true
2330
}
+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
MIT license
2+
3+
Copyright (c) 2014-2015 SpryMedia Limited
4+
http://datatables.net
5+
6+
Permission is hereby granted, free of charge, to any person obtaining a copy
7+
of this software and associated documentation files (the "Software"), to deal
8+
in the Software without restriction, including without limitation the rights
9+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
10+
copies of the Software, and to permit persons to whom the Software is
11+
furnished to do so, subject to the following conditions:
12+
13+
The above copyright notice and this permission notice shall be included in
14+
all copies or substantial portions of the Software.
15+
16+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
19+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
22+
THE SOFTWARE.
+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# Responsive
2+
3+
Responsive will automatically optimise the table's layout for different screen sizes through the dynamic column visibility control, making your tables useful on desktop and mobile screens.
4+
5+
6+
# Installation
7+
8+
To use Responsive the primary way to obtain the software is to use the [DataTables downloader](//datatables.net/download). You can also include the individual files from the [DataTables CDN](//cdn.datatables.net). See the [documentation](http://datatables.net/extensions/responsive/) for full details.
9+
10+
## NPM and Bower
11+
12+
If you prefer to use a package manager such as NPM or Bower, distribution repositories are available with software built from this repository under the name `datatables.net-responsive`. Styling packages for Bootstrap, Foundation and other styling libraries are also available by adding a suffix to the package name.
13+
14+
Please see the DataTables [NPM](//datatables.net/download/npm) and [Bower](//datatables.net/download/bower) installation pages for further information. The [DataTables installation manual](//datatables.net/manual/installation) also has details on how to use package managers with DataTables.
15+
16+
17+
# Basic usage
18+
19+
Responsive is initialised using the `responsive` option in the DataTables constructor - a simple boolean `true` will enable the feature. Further options can be specified using this option as an object - see the documentation for details.
20+
21+
Example:
22+
23+
```js
24+
$(document).ready( function () {
25+
$('#myTable').DataTable( {
26+
responsive: true
27+
} );
28+
} );
29+
```
30+
31+
32+
# Documentation / support
33+
34+
* [Documentation](https://datatables.net/extensions/responsive/)
35+
* [DataTables support forums](http://datatables.net/forums)
36+
37+
38+
# GitHub
39+
40+
If you fancy getting involved with the development of Responsive and help make it better, please refer to its [GitHub repo](https://github.com/DataTables/Responsive).
41+
+10-3
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,19 @@
11
{
22
"name": "datatables-responsive",
3-
"version": "1.0.1",
43
"main": [
54
"js/dataTables.responsive.js",
6-
"css/dataTables.responsive.css"
5+
"css/responsive.dataTables.scss"
76
],
87
"dependencies": {
98
"jquery": ">=1.7.0",
109
"datatables": ">=1.10.1"
11-
}
10+
},
11+
"authors": [
12+
{
13+
"name": "SpryMedia Ltd",
14+
"homepage": "https://datatables.net"
15+
}
16+
],
17+
"homepage": "https://datatables.net",
18+
"license": "MIT"
1219
}
Original file line numberDiff line numberDiff line change
@@ -1,89 +1,154 @@
1-
table.dataTable.dtr-inline.collapsed tbody td:first-child,
2-
table.dataTable.dtr-inline.collapsed tbody th:first-child {
1+
table.dataTable.dtr-inline.collapsed > tbody > tr > td.child,
2+
table.dataTable.dtr-inline.collapsed > tbody > tr > th.child,
3+
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dataTables_empty {
4+
cursor: default !important; }
5+
table.dataTable.dtr-inline.collapsed > tbody > tr > td.child:before,
6+
table.dataTable.dtr-inline.collapsed > tbody > tr > th.child:before,
7+
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dataTables_empty:before {
8+
display: none !important; }
9+
table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child,
10+
table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child {
311
position: relative;
412
padding-left: 30px;
5-
cursor: pointer;
6-
}
7-
table.dataTable.dtr-inline.collapsed tbody td:first-child:before,
8-
table.dataTable.dtr-inline.collapsed tbody th:first-child:before {
9-
top: 8px;
10-
left: 4px;
11-
height: 16px;
12-
width: 16px;
13-
display: block;
14-
position: absolute;
15-
color: white;
16-
border: 2px solid white;
17-
border-radius: 16px;
18-
text-align: center;
19-
line-height: 14px;
20-
box-shadow: 0 0 3px #444;
21-
box-sizing: content-box;
22-
content: '+';
23-
background-color: #31b131;
24-
}
25-
table.dataTable.dtr-inline.collapsed tbody tr.parent td:first-child:before,
26-
table.dataTable.dtr-inline.collapsed tbody tr.parent th:first-child:before {
13+
cursor: pointer; }
14+
table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child:before,
15+
table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child:before {
16+
top: 8px;
17+
left: 4px;
18+
height: 16px;
19+
width: 16px;
20+
display: block;
21+
position: absolute;
22+
color: white;
23+
border: 2px solid white;
24+
border-radius: 16px;
25+
box-shadow: 0 0 3px #444;
26+
box-sizing: content-box;
27+
text-align: left;
28+
font-family: 'Courier New', Courier, monospace;
29+
text-indent: 4px;
30+
line-height: 16px;
31+
content: '+';
32+
background-color: #31b131; }
33+
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child:before,
34+
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th:first-child:before {
2735
content: '-';
28-
background-color: #d33333;
29-
}
30-
table.dataTable.dtr-inline.collapsed tbody tr.child td:before {
31-
display: none;
32-
}
33-
table.dataTable.dtr-column tbody td.control,
34-
table.dataTable.dtr-column tbody th.control {
36+
background-color: #d33333; }
37+
table.dataTable.dtr-inline.collapsed > tbody > tr.child td:before {
38+
display: none; }
39+
table.dataTable.dtr-inline.collapsed.compact > tbody > tr > td:first-child,
40+
table.dataTable.dtr-inline.collapsed.compact > tbody > tr > th:first-child {
41+
padding-left: 27px; }
42+
table.dataTable.dtr-inline.collapsed.compact > tbody > tr > td:first-child:before,
43+
table.dataTable.dtr-inline.collapsed.compact > tbody > tr > th:first-child:before {
44+
top: 5px;
45+
left: 4px;
46+
height: 14px;
47+
width: 14px;
48+
border-radius: 14px;
49+
line-height: 14px;
50+
text-indent: 3px; }
51+
table.dataTable.dtr-column > tbody > tr > td.control,
52+
table.dataTable.dtr-column > tbody > tr > th.control {
3553
position: relative;
36-
cursor: pointer;
37-
}
38-
table.dataTable.dtr-column tbody td.control:before,
39-
table.dataTable.dtr-column tbody th.control:before {
40-
top: 50%;
41-
left: 50%;
42-
height: 16px;
43-
width: 16px;
44-
margin-top: -10px;
45-
margin-left: -10px;
46-
display: block;
47-
position: absolute;
48-
color: white;
49-
border: 2px solid white;
50-
border-radius: 16px;
51-
text-align: center;
52-
line-height: 14px;
53-
box-shadow: 0 0 3px #444;
54-
box-sizing: content-box;
55-
content: '+';
56-
background-color: #31b131;
57-
}
58-
table.dataTable.dtr-column tbody tr.parent td.control:before,
59-
table.dataTable.dtr-column tbody tr.parent th.control:before {
54+
cursor: pointer; }
55+
table.dataTable.dtr-column > tbody > tr > td.control:before,
56+
table.dataTable.dtr-column > tbody > tr > th.control:before {
57+
top: 50%;
58+
left: 50%;
59+
height: 16px;
60+
width: 16px;
61+
margin-top: -10px;
62+
margin-left: -10px;
63+
display: block;
64+
position: absolute;
65+
color: white;
66+
border: 2px solid white;
67+
border-radius: 16px;
68+
box-shadow: 0 0 3px #444;
69+
box-sizing: content-box;
70+
text-align: left;
71+
font-family: 'Courier New', Courier, monospace;
72+
text-indent: 4px;
73+
line-height: 16px;
74+
content: '+';
75+
background-color: #31b131; }
76+
table.dataTable.dtr-column > tbody > tr.parent td.control:before,
77+
table.dataTable.dtr-column > tbody > tr.parent th.control:before {
6078
content: '-';
61-
background-color: #d33333;
62-
}
63-
table.dataTable tr.child {
64-
padding: 0.5em 1em;
65-
}
66-
table.dataTable tr.child:hover {
67-
background: transparent !important;
68-
}
69-
table.dataTable tr.child ul {
70-
display: inline-block;
71-
list-style-type: none;
72-
margin: 0;
73-
padding: 0;
74-
}
75-
table.dataTable tr.child ul li {
76-
border-bottom: 1px solid #efefef;
77-
padding: 0.5em 0;
78-
}
79-
table.dataTable tr.child ul li:first-child {
80-
padding-top: 0;
81-
}
82-
table.dataTable tr.child ul li:last-child {
83-
border-bottom: none;
84-
}
85-
table.dataTable tr.child span.dtr-title {
86-
display: inline-block;
87-
min-width: 75px;
88-
font-weight: bold;
89-
}
79+
background-color: #d33333; }
80+
table.dataTable > tbody > tr.child {
81+
padding: 0.5em 1em; }
82+
table.dataTable > tbody > tr.child:hover {
83+
background: transparent !important; }
84+
table.dataTable > tbody > tr.child ul {
85+
display: inline-block;
86+
list-style-type: none;
87+
margin: 0;
88+
padding: 0; }
89+
table.dataTable > tbody > tr.child ul li {
90+
border-bottom: 1px solid #efefef;
91+
padding: 0.5em 0; }
92+
table.dataTable > tbody > tr.child ul li:first-child {
93+
padding-top: 0; }
94+
table.dataTable > tbody > tr.child ul li:last-child {
95+
border-bottom: none; }
96+
table.dataTable > tbody > tr.child span.dtr-title {
97+
display: inline-block;
98+
min-width: 75px;
99+
font-weight: bold; }
100+
101+
div.dtr-modal {
102+
position: fixed;
103+
box-sizing: border-box;
104+
top: 0;
105+
left: 0;
106+
height: 100%;
107+
width: 100%;
108+
z-index: 100;
109+
padding: 10em 1em; }
110+
div.dtr-modal div.dtr-modal-display {
111+
position: absolute;
112+
top: 0;
113+
left: 0;
114+
bottom: 0;
115+
right: 0;
116+
width: 50%;
117+
height: 50%;
118+
overflow: auto;
119+
margin: auto;
120+
z-index: 102;
121+
overflow: auto;
122+
background-color: #f5f5f7;
123+
border: 1px solid black;
124+
border-radius: 0.5em;
125+
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6); }
126+
div.dtr-modal div.dtr-modal-content {
127+
position: relative;
128+
padding: 1em; }
129+
div.dtr-modal div.dtr-modal-close {
130+
position: absolute;
131+
top: 6px;
132+
right: 6px;
133+
width: 22px;
134+
height: 22px;
135+
border: 1px solid #eaeaea;
136+
background-color: #f9f9f9;
137+
text-align: center;
138+
border-radius: 3px;
139+
cursor: pointer;
140+
z-index: 12; }
141+
div.dtr-modal div.dtr-modal-close:hover {
142+
background-color: #eaeaea; }
143+
div.dtr-modal div.dtr-modal-background {
144+
position: fixed;
145+
top: 0;
146+
left: 0;
147+
right: 0;
148+
bottom: 0;
149+
z-index: 101;
150+
background: rgba(0, 0, 0, 0.6); }
151+
152+
@media screen and (max-width: 767px) {
153+
div.dtr-modal div.dtr-modal-display {
154+
width: 95%; } }

0 commit comments

Comments
 (0)