Bootstrap v3.3.6 Update

This commit is contained in:
David Miller
2015-11-28 13:17:10 -05:00
parent 0b77a7484f
commit afb82ee156
99 changed files with 2553 additions and 919 deletions

View File

@@ -1,20 +1,20 @@
{
"name": "datatables-responsive",
"version": "1.0.6",
"version": "1.0.7",
"main": [
"js/dataTables.responsive.js",
"css/dataTables.responsive.css"
"css/responsive.dataTables.scss"
],
"dependencies": {
"jquery": ">=1.7.0",
"datatables": ">=1.10.1"
},
"homepage": "https://github.com/DataTables/Responsive",
"_release": "1.0.6",
"_release": "1.0.7",
"_resolution": {
"type": "version",
"tag": "1.0.6",
"commit": "4000f7d1876bc2cb6e1e75eddef431c5fff83afd"
"tag": "1.0.7",
"commit": "435b1bd36ed29de73dd704121de0571a5c1a50a6"
},
"_source": "git://github.com/DataTables/Responsive.git",
"_target": "~1.0.3",

View File

@@ -1,3 +1,5 @@
MIT license
Copyright (c) 2014-2015 SpryMedia Limited
http://datatables.net

View File

@@ -0,0 +1,35 @@
# Responsive
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.
# Installation
To use Responsive the best 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.
# Basic usage
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.
Example:
```js
$(document).ready( function () {
$('#myTable').DataTable( {
responsive: true
} );
} );
```
# Documentation / support
* [Documentation](https://datatables.net/extensions/responsive/)
* [DataTables support forums](http://datatables.net/forums)
# GitHub
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).

View File

@@ -1,9 +1,9 @@
{
"name": "datatables-responsive",
"version": "1.0.6",
"version": "1.0.7",
"main": [
"js/dataTables.responsive.js",
"css/dataTables.responsive.css"
"css/responsive.dataTables.scss"
],
"dependencies": {
"jquery": ">=1.7.0",

View File

@@ -1,106 +0,0 @@
table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child,
table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child {
position: relative;
padding-left: 30px;
cursor: pointer;
}
table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child:before {
top: 8px;
left: 4px;
height: 16px;
width: 16px;
display: block;
position: absolute;
color: white;
border: 2px solid white;
border-radius: 16px;
text-align: center;
line-height: 14px;
box-shadow: 0 0 3px #444;
box-sizing: content-box;
content: '+';
background-color: #31b131;
}
table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child.dataTables_empty:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child.dataTables_empty:before {
display: none;
}
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child:before,
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th:first-child:before {
content: '-';
background-color: #d33333;
}
table.dataTable.dtr-inline.collapsed > tbody > tr.child td:before {
display: none;
}
table.dataTable.dtr-inline.collapsed.compact > tbody > tr > td:first-child,
table.dataTable.dtr-inline.collapsed.compact > tbody > tr > th:first-child {
padding-left: 27px;
}
table.dataTable.dtr-inline.collapsed.compact > tbody > tr > td:first-child:before,
table.dataTable.dtr-inline.collapsed.compact > tbody > tr > th:first-child:before {
top: 5px;
left: 4px;
height: 14px;
width: 14px;
border-radius: 14px;
line-height: 12px;
}
table.dataTable.dtr-column > tbody > tr > td.control,
table.dataTable.dtr-column > tbody > tr > th.control {
position: relative;
cursor: pointer;
}
table.dataTable.dtr-column > tbody > tr > td.control:before,
table.dataTable.dtr-column > tbody > tr > th.control:before {
top: 50%;
left: 50%;
height: 16px;
width: 16px;
margin-top: -10px;
margin-left: -10px;
display: block;
position: absolute;
color: white;
border: 2px solid white;
border-radius: 16px;
text-align: center;
line-height: 14px;
box-shadow: 0 0 3px #444;
box-sizing: content-box;
content: '+';
background-color: #31b131;
}
table.dataTable.dtr-column > tbody > tr.parent td.control:before,
table.dataTable.dtr-column > tbody > tr.parent th.control:before {
content: '-';
background-color: #d33333;
}
table.dataTable > tbody > tr.child {
padding: 0.5em 1em;
}
table.dataTable > tbody > tr.child:hover {
background: transparent !important;
}
table.dataTable > tbody > tr.child ul {
display: inline-block;
list-style-type: none;
margin: 0;
padding: 0;
}
table.dataTable > tbody > tr.child ul li {
border-bottom: 1px solid #efefef;
padding: 0.5em 0;
}
table.dataTable > tbody > tr.child ul li:first-child {
padding-top: 0;
}
table.dataTable > tbody > tr.child ul li:last-child {
border-bottom: none;
}
table.dataTable > tbody > tr.child span.dtr-title {
display: inline-block;
min-width: 75px;
font-weight: bold;
}

View File

@@ -0,0 +1,4 @@
$open-button-background: #337ab7 !default;
@import 'responsive.dataTables.scss';

View File

@@ -1,4 +1,12 @@
//
// Variables
//
$open-button-background: #31b131 !default;
$close-button-background: #d33333 !default;
//
// Mixins
//
@@ -16,12 +24,12 @@
@mixin control-open() {
content: '+';
background-color: #31b131;
background-color: $open-button-background;
}
@mixin control-close() {
content: '-';
background-color: #d33333;
background-color: $close-button-background;
}

View File

@@ -0,0 +1,10 @@
$open-button-background: #008CBA !default;
@import 'responsive.dataTables.scss';
table.dataTable > tbody > tr.child {
ul {
font-size: 1em;
}
}

View File

@@ -0,0 +1,2 @@
@import 'responsive.dataTables.scss';

View File

@@ -1,5 +1,5 @@
<?xml version="1.0" encoding="UTF-8" ?>
<dt-api group="responsive">
<dt-api library="Responsive">
<name>responsive.index()</name>
<summary>Obtain the cell index from a `-tag li` details element</summary>
<since>1.0.3</since>

View File

@@ -1,5 +1,5 @@
<?xml version="1.0" encoding="UTF-8" ?>
<dt-api group="responsive">
<dt-api library="Responsive">
<name>responsive.rebuild()</name>
<summary>Recalculate the column breakpoints based on the class information of the column header cells</summary>
<since>1.0.4</since>

View File

@@ -1,5 +1,5 @@
<?xml version="1.0" encoding="UTF-8" ?>
<dt-api group="responsive">
<dt-api library="Responsive">
<name>responsive.recalc()</name>
<summary>Recalculate the widths used by responsive after a change in the display</summary>
<since>1.0.1</since>

View File

@@ -1,5 +1,5 @@
<?xml version="1.0" encoding="UTF-8" ?>
<dt-option group="responsive">
<dt-option library="Responsive">
<name>responsive.breakpoints</name>
<summary>Set the breakpoints for a Responsive instance</summary>
<since>Responsive 1.0.0</since>

View File

@@ -1,5 +1,5 @@
<?xml version="1.0" encoding="UTF-8" ?>
<dt-option group="responsive">
<dt-option library="Responsive">
<name>responsive.details.renderer</name>
<summary>Define the renderer used to display the child rows</summary>
<since>Responsive 1.0.0</since>

View File

@@ -1,5 +1,5 @@
<?xml version="1.0" encoding="UTF-8" ?>
<dt-option group="responsive">
<dt-option library="Responsive">
<name>responsive.details.target</name>
<summary>Column / selector for child row display control when using `column` details type</summary>
<since>Responsive 1.0.0</since>

View File

@@ -1,5 +1,5 @@
<?xml version="1.0" encoding="UTF-8" ?>
<dt-option group="responsive">
<dt-option library="Responsive">
<name>responsive.details.type</name>
<summary>Set the child row display control type</summary>
<since>Responsive 1.0.0</since>

View File

@@ -1,5 +1,5 @@
<?xml version="1.0" encoding="UTF-8" ?>
<dt-option group="responsive">
<dt-option library="Responsive">
<name>responsive.details</name>
<summary>Enable and configure the child rows shown by Responsive for collapsed tables</summary>
<since>Responsive 1.0.0</since>

View File

@@ -1,12 +1,12 @@
<?xml version="1.0" encoding="UTF-8" ?>
<dt-option group="responsive">
<dt-option library="Responsive">
<name>responsive</name>
<summary>Enable and configure the Responsive extension for DataTables</summary>
<since>Responsive 1.0.0</since>
<type type="boolean">
<description>
As a boolean value this property will enable Responsive on the DataTable that is being created. `true` will enable Responsive, while `false` will not (even if the table has a class of `-string responsive` or `-string dt-responsive`.
As a boolean value this property will enable Responsive on the DataTable that is being created. `true` will enable Responsive, while `false` will not (even if the table has a class of `-string responsive` or `-string dt-responsive`).
This is a short-cut option to enable Responsive with the default configuration options. Customisations can be made by giving this parameter as an object, see below.
</description>

View File

@@ -13,7 +13,6 @@ $(document).ready(function() {
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "age" },
{ "data": "start_date" },
{ "data": "salary" },
{ "data": "extn" }
@@ -47,7 +46,7 @@ Additionally, there are three special class names:
Please [refer to the Responsive manual](//datatables.net/extensions/responsive/) for further details of these options.
This example shows the `salary` column visible on a desktop only - `office` and `age` require a tablet, while the `position` column requires a phone in landscape or larger. The `name` column is always visible and the `start date` is never visible.
This example shows the `salary` column visible on a desktop only - `office` requires a tablet, while the `position` column requires a phone in landscape or larger. The `name` column is always visible and the `start date` is never visible.
This can be useful if you wish to change the format of the data shown on different devices, for example using a combination of `mobile` and `not-mobile` on two different columns would allow information to be formatted suitable for each device type.
@@ -61,7 +60,6 @@ This can be useful if you wish to change the format of the data shown on differe
<th class="all">Name</th>
<th class="min-phone-l">Position</th>
<th class="min-tablet">Office</th>
<th class="min-tablet">Age</th>
<th class="never">Start date</th>
<th class="desktop">Salary</th>
<th class="none">Extn.</th>
@@ -73,7 +71,6 @@ This can be useful if you wish to change the format of the data shown on differe
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th>Extn.</th>

View File

@@ -6,7 +6,7 @@
position: relative;
min-height: 41px;
}
span {
th span {
display: block;
position: absolute;
left: 0;
@@ -46,7 +46,7 @@ This example shows how Responsive can be used with _complex headers_ (i.e. heade
We use jQuery to find the header cells which have a `colspan` attribute and wrap their contents in a `-tag span` tag. That `-tag span` is then set to `position: absolute;` using `text-overflow: ellipsis`. The result is that the text of the `colspan` cell will reduce automatically to fit the available area based on the contents of the column cells below it.
This functionality is not currently built into Responsive. It likely will be for v1.1.
This functionality is not currently built into Responsive. It might be included in future.
]]></info>

View File

@@ -13,7 +13,6 @@ $(document).ready(function() {
{ "data": "name", className: "all" },
{ "data": "position", className: "min-phone-l" },
{ "data": "office", className: "min-tablet" },
{ "data": "age", className: "min-tablet" },
{ "data": "start_date", className: "never" },
{ "data": "salary", className: "desktop" },
{ "data": "extn", className: "none" }
@@ -40,7 +39,6 @@ This example exactly matches the functionality of the [class control example](cl
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th>Extn.</th>
@@ -52,7 +50,6 @@ This example exactly matches the functionality of the [class control example](cl
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th>Extn.</th>

View File

@@ -20,7 +20,7 @@ $(document).ready(function() {
<info><![CDATA[
Responsive will automatically detect new DataTable instances being created on a page and initialise itself if it find the `r-init responsive` option or `responsive` class name on the table, as shown in the other examples.
Responsive will automatically detect new DataTable instances being created on a page and initialise itself if it finds the `r-init responsive` option or `responsive` class name on the table, as shown in the other examples.
The third way of initialising Responsive is manually creating a new instance using the `$.fn.dataTable.Responsive` class, as shown in this example (the other two methods are provided using this constructor in a `dt-event init` event handler!).

View File

@@ -1,15 +1,8 @@
<?xml version="1.0" encoding="UTF-8" ?>
<dt-example table-type="html-wide" table-class="table table-striped table-hover dt-responsive" order="1">
<dt-example table-type="html-wide" table-class="display dt-responsive nowrap" order="1" framework="bootstrap">
<css lib="bootstrap datatables-bootstrap responsive">
body { font-size: 140% }
table.dataTable th,
table.dataTable td {
white-space: nowrap;
}
</css>
<js lib="jquery datatables responsive datatables-bootstrap">
<css lib="datatables responsive"/>
<js lib="jquery datatables responsive">
<![CDATA[
$(document).ready(function() {
@@ -23,7 +16,7 @@ $(document).ready(function() {
<info><![CDATA[
This example shows DataTables and the Responsive extension being used with the [Bootstrap](http://getbootstrap.com) framework providing the styling. The [DataTables / Bootstrap integration files](//datatables.net/manual/styling/bootstrap) prove seamless integration for DataTables to be used in a Bootstrap page.
This example shows DataTables and the Responsive extension being used with the [Bootstrap](http://getbootstrap.com) framework providing the styling. The [DataTables / Bootstrap integration](//datatables.net/manual/styling/bootstrap) prove seamless integration for DataTables to be used in a Bootstrap page.
Note that the `dt-responsive` class is used to indicate to the extension that it should be enabled on this page, as `responsive` [has special meaning in Bootstrap](http://getbootstrap.com/css/#tables-responsive). The `r-init responsive` option could also be used if required.

View File

@@ -8,9 +8,9 @@
<![CDATA[
$(document).ready(function() {
var table = $('#example').DataTable();
new $.fn.dataTable.Responsive( table );
var table = $('#example').DataTable( {
responsive: true
} );
} );
]]>

View File

@@ -1,13 +1,8 @@
<?xml version="1.0" encoding="UTF-8" ?>
<dt-example table-type="html-wide" table-class="tdisplay responsive" order="2">
<dt-example table-type="html-wide" table-class="display responsive nowrap" order="2" framework="foundation">
<css lib="foundation datatables-foundation responsive">
table.dataTable th,
table.dataTable td {
white-space: nowrap;
}
</css>
<js lib="jquery datatables responsive datatables-foundation">
<css lib="datatables responsive"/>
<js lib="jquery datatables responsive">
<![CDATA[
$(document).ready(function() {
@@ -21,7 +16,7 @@ $(document).ready(function() {
<info><![CDATA[
This example shows DataTables and the Responsive extension being used with the [Foundation](http://foundation.zurb.com) framework providing the styling. The [DataTables / Foundation integration files](//datatables.net/manual/styling/foundation) prove seamless integration for DataTables to be used in a Foundation page.
This example shows DataTables and the Responsive extension being used with the [Foundation](http://foundation.zurb.com) framework providing the styling. The [DataTables / Foundation integration](//datatables.net/manual/styling/foundation) prove seamless integration for DataTables to be used in a Foundation page.
]]></info>

View File

@@ -0,0 +1,24 @@
<?xml version="1.0" encoding="UTF-8" ?>
<dt-example table-type="html-wide" table-class="display responsive nowrap" order="3" framework="jqueryui">
<css lib="datatables responsive"/>
<js lib="jquery datatables responsive">
<![CDATA[
$(document).ready(function() {
$('#example').DataTable();
} );
]]>
</js>
<title lib="Responsive">jQuery UI styling</title>
<info><![CDATA[
This example shows DataTables and Responsive being used with [jQuery UI](http://jqueryui.com/) providing the base styling information.
]]></info>
</dt-example>

View File

@@ -1,5 +1,5 @@
<?xml version="1.0" encoding="UTF-8" ?>
<dt-example table-type="html-wide" table-class="display nowrap" order="3">
<dt-example table-type="html-wide" table-class="display responsive nowrap" order="5">
<css lib="datatables responsive">
div.container { max-width: 1200px }
@@ -12,8 +12,6 @@ $(document).ready(function() {
scrollY: 300,
paging: false
} );
new $.fn.dataTable.Responsive( table );
} );
]]>

View File

@@ -1,11 +1,11 @@
/*! Responsive 1.0.6
/*! Responsive 1.0.7
* 2014-2015 SpryMedia Ltd - datatables.net/license
*/
/**
* @summary Responsive
* @description Responsive tables plug-in for DataTables
* @version 1.0.6
* @version 1.0.7
* @file dataTables.responsive.js
* @author SpryMedia Ltd (www.sprymedia.co.uk)
* @contact www.sprymedia.co.uk/contact
@@ -826,7 +826,7 @@ Api.register( 'responsive.recalc()', function () {
* @name Responsive.version
* @static
*/
Responsive.version = '1.0.6';
Responsive.version = '1.0.7';
$.fn.dataTable.Responsive = Responsive;

View File

@@ -11,8 +11,8 @@ DT_BUILT="${DT_SRC}/built/DataTables"
. $DT_SRC/build/include.sh
# Copy CSS
scss_compile css/dataTables.responsive.scss
rsync -r css $OUT_DIR
css_frameworks responsive $OUT_DIR/css
# Copy images
#rsync -r images $OUT_DIR
@@ -20,6 +20,7 @@ rsync -r css $OUT_DIR
# Copy JS
rsync -r js $OUT_DIR
js_compress $OUT_DIR/js/dataTables.responsive.js
js_frameworks responsive $OUT_DIR/js
# Copy and build examples
rsync -r examples $OUT_DIR