Merge scrollable and responsive settings

This commit is contained in:
Brian Miyaji
2015-01-30 18:36:31 +11:00
parent 592c754a1f
commit e40f6e9026
15 changed files with 16 additions and 162 deletions

View File

@@ -55,8 +55,4 @@
left: auto;
right: 0;
}
.sp-responsive-table-wrapper .scrollable {
margin-left: 0;
margin-right: 50%;
}
}

View File

@@ -276,55 +276,4 @@
.sp-highlight,
.sp-heading {
font-weight: bold;
}
@media only screen and (max-width: 40em) {
.sp-responsive-table {
margin-bottom: 0;
}
.sp-pinned-table {
position: absolute;
left: 0;
top: 0;
width: 50%;
overflow: hidden;
overflow-x: scroll;
box-shadow: 0 0 1em rgba(0,0,0,0.5);
}
.sp-pinned-table table {
border-right: none;
border-left: none;
width: 100%;
}
.sp-pinned-table table th,
.sp-pinned-table table td {
white-space: nowrap;
}
.sp-pinned-table td:last-child {
border-bottom: 0;
}
.sp-responsive-table-wrapper {
position: relative;
overflow: hidden;
background: #fff;
}
.sp-responsive-table-wrapper .scrollable {
margin-left: 50%;
}
.sp-responsive-table-wrapper .scrollable {
overflow: scroll;
overflow-y: hidden;
}
.sp-responsive-table-wrapper .scrollable td,
.sp-responsive-table-wrapper .scrollable th {
position: relative;
white-space: nowrap;
overflow: hidden;
}
.sp-responsive-table-wrapper .scrollable .data-number,
.sp-responsive-table-wrapper .scrollable .data-name,
.sp-responsive-table-wrapper .scrollable .data-rank,
.sp-responsive-table-wrapper .scrollable .data-date {
display: none;
}
}

Binary file not shown.

View File

@@ -10,6 +10,7 @@
<glyph unicode="&#xf108;" d="M409.6 435.2h-307.2c-14.16 0-25.6-11.44-25.6-25.6v-358.4c0-14.16 11.44-25.6 25.6-25.6h307.2c14.16 0 25.6 11.44 25.6 25.6v358.4c0 14.16-11.44 25.6-25.6 25.6zM179.2 76.8h-51.2v51.2h51.2v-51.2zM179.2 153.6h-51.2v51.2h51.2v-51.2zM179.2 230.4h-51.2v51.2h51.2v-51.2zM281.6 76.8h-51.2v51.2h51.2v-51.2zM281.6 153.6h-51.2v51.2h51.2v-51.2zM281.6 230.4h-51.2v51.2h51.2v-51.2zM384 76.8h-51.2v51.2h51.2v-51.2zM384 153.6h-51.2v51.2h51.2v-51.2zM384 230.4h-51.2v51.2h51.2v-51.2zM384 332.8h-256v51.2h256v-51.2z" />
<glyph unicode="&#xf111;" d="M484.88 328.96l-30.72-222.64c-7.68-54.32-36.72-80.64-92.72-80.64h-264.32c-55.92 0-77.84 26.32-70.16 80.64l30.72 222.64c8.24 54.32 37.28 80.64 93.2 80.64h264.32c56-0.080 77.92-26.4 69.68-80.64zM206.88 359.040c-42.88 0-67.44-30.080-73.28-74.48l-4.88-36c-6.32-44.4 10.4-69.68 53.36-69.68h100.16c13.52 0 11.2-11.84 11.2-11.84-1.44-8.8-6.32-13.2-15.12-13.2h-166.96l-10.080-76.96h201.6c42.88 0 65.84 20.48 72.16 64.88l7.28 49.6c6.32 44.4-10.72 64.88-53.6 64.88h-100.72c-8.8 0-12.64 4.4-11.68 13.2 0 0-0.56 11.84 14.8 11.84h166.4l10.88 77.76h-201.52z" />
<glyph unicode="&#xf116;" d="M435.2 25.6h-358.4c-14.16 0-25.6 11.44-25.6 25.6v358.4c0 14.16 11.44 25.6 25.6 25.6h358.4c14.16 0 25.6-11.44 25.6-25.6v-358.4c0-14.16-11.44-25.6-25.6-25.6zM409.6 384h-307.2v-76.8h307.2v76.8zM409.6 256h-307.2v-179.2h307.2v179.2zM179.2 332.8h-51.2v25.6h51.2v-25.6zM230.4 332.8h-25.6v25.6h25.6v-25.6zM281.6 332.8h-25.6v25.6h25.6v-25.6zM332.8 332.8h-25.6v25.6h25.6v-25.6zM384 332.8h-25.6v25.6h25.6v-25.6z" />
<glyph unicode="&#xf118;" d="M84.531 173.107c11.879-48.154 26.983-69.145 77.363-91.187 50.406-22.016 74.343-46.080 94.106-46.080s42.163 21.043 92.57 43.111c50.406 21.99 36.966 28.749 48.845 76.851l-141.415-68.762-171.469 86.067zM499.481 298.599l-213.12 119.347c-16.691 9.344-44.007 9.344-60.697 0l-213.145-119.347c-16.691-9.344-16.691-24.653 0-33.997l213.12-119.347c16.691-9.344 44.006-9.344 60.698 0l137.779 77.159-149.401 34.995c-5.735-1.433-12.058-2.227-18.714-2.227-26.905 0-48.717 12.979-48.717 28.979s21.811 29.005 48.717 29.005c20.889 0 38.682-7.859 45.594-18.841l158.233-51.917 39.654 22.195c16.691 9.344 16.691 24.653 0 33.997zM434.355 72.397c-1.613-9.805 32.845-26.010 36.121 2.791 14.822 129.817-10.649 167.194-10.649 167.194l-35.712-19.994c0 0.026 30.285-28.8 10.24-149.99z" />
<glyph unicode="&#xf145;" d="M384 435.2h-51.2v-51.2h51.2v51.2zM435.2 435.2h-25.6v-76.8h-102.4v76.8h-102.4v-76.8h-102.4v76.8h-25.6c-14.16 0-25.6-11.44-25.6-25.6v-358.4c0-14.16 11.44-25.6 25.6-25.6h358.4c14.16 0 25.6 11.44 25.6 25.6v358.4c0 14.16-11.44 25.6-25.6 25.6zM409.6 76.8h-307.2v230.4h307.2v-230.4zM179.2 435.2h-51.2v-51.2h51.2v51.2zM281.6 256h-51.2v-51.2h51.2v51.2zM358.4 256h-51.2v-51.2h51.2v51.2zM204.8 179.2h-51.2v-51.2h51.2v51.2zM204.8 256h-51.2v-51.2h51.2v51.2zM281.6 179.2h-51.2v-51.2h51.2v51.2zM358.4 179.2h-51.2v-51.2h51.2v51.2z" />
<glyph unicode="&#xf147;" d="M256 426.667c-92.805 0-185.597-66.375-256-199.111 70.403-132.736 163.195-199.111 256-199.111s185.597 66.375 256 199.111c-70.403 132.736-163.195 199.111-256 199.111zM256 85.334c-67.486 0-135.945 51.43-190.667 142.222 54.722 90.792 123.18 142.222 190.667 142.222s135.945-51.43 190.667-142.222c-54.722-90.792-123.18-142.222-190.667-142.222zM312.889 227.556c0-31.417-25.472-56.889-56.889-56.889s-56.889 25.472-56.889 56.889 25.472 56.889 56.889 56.889 56.889-25.472 56.889-56.889z" />
<glyph unicode="&#xf163;" d="M153.6 332.8h51.2v-51.2h-51.2v51.2zM153.6 256h51.2v-51.2h-51.2v51.2zM153.6 179.2h51.2v-51.2h-51.2v51.2zM256 179.2h102.4v-51.2h-102.4v51.2zM435.2 435.2h-358.4c-14.16 0-25.6-11.44-25.6-25.6v-358.4c0-14.16 11.44-25.6 25.6-25.6h358.4c14.16 0 25.6 11.44 25.6 25.6v358.4c0 14.16-11.44 25.6-25.6 25.6zM409.6 76.8h-307.2v307.2h307.2v-307.2zM256 256h102.4v-51.2h-102.4v51.2zM256 332.8h102.4v-51.2h-102.4v51.2z" />

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

Binary file not shown.

View File

@@ -9,8 +9,6 @@ function viewport() {
(function($) {
var sp_responsive_activated = false;
/* Header */
$('body').prepend( '<div class="sp-header"></div>' );
@@ -44,7 +42,6 @@ function viewport() {
/* Data Tables */
$(".sp-data-table").each(function() {
sortable = viewport().width > 640 && $(this).hasClass("sp-sortable-table");
responsive = $(this).hasClass("sp-responsive-table");
paginated = $(this).hasClass("sp-paginated-table");
display_length = parseInt($(this).attr("data-sp-rows"));
if ( display_length == undefined || isNaN( display_length ) ) display_length = 10;
@@ -55,7 +52,6 @@ function viewport() {
"autoWidth": false,
"searching": false,
"info": false,
"responsive": responsive,
"paging": paginated,
"lengthChange": false,
"pagingType": "simple_numbers",
@@ -81,78 +77,4 @@ function viewport() {
/* Scrollable Tables */
$(".sp-scrollable-table").wrap("<div class=\"sp-scrollable-table-wrapper\"></div>");
/*
* Responsive Tables
*
* Based on responsive-tables.js by ZURB
*
* Credit: ZURB
* Original: https://github.com/zurb/responsive-tables
*/
var sp_responsive_activated = true;
var sp_responsive_switched = false;
var sp_update_tables = function() {
if ((viewport().width <= 640) && !sp_responsive_switched ){
sp_responsive_switched = true;
$(".sp-responsive-table").each(function(i, element) {
sp_split_table($(element));
});
return true;
}
else if (sp_responsive_switched && (viewport().width > 640)) {
sp_responsive_switched = false;
$(".sp-responsive-table").each(function(i, element) {
sp_unsplit_table($(element));
});
}
};
$(window).load(sp_update_tables);
$(window).on("redraw",function(){sp_responsive_switched=false;sp_update_tables();}); // An event to listen for
$(window).on("resize", sp_update_tables);
function sp_split_table(original)
{
original.wrap("<div class='sp-responsive-table-wrapper' />");
var copy = original.clone();
copy.find("td:not(.data-number):not(.data-name):not(.data-rank):not(.data-date), th:not(.data-number):not(.data-name):not(.data-rank):not(.data-date)").css("display", "none");
copy.removeClass("sp-responsive-table");
original.closest(".sp-responsive-table-wrapper").append(copy);
copy.wrap("<div class='sp-pinned-table' />");
original.wrap("<div class='scrollable' />");
sp_set_cell_heights(original, copy);
}
function sp_unsplit_table(original) {
original.closest(".sp-responsive-table-wrapper").find(".sp-pinned-table").remove();
original.unwrap();
original.unwrap();
}
function sp_set_cell_heights(original, copy) {
var tr = original.find('tr'),
tr_copy = copy.find('tr'),
heights = [];
tr.each(function (index) {
var self = $(this),
tx = self.find('th, td');
tx.each(function () {
var height = $(this).outerHeight(true);
heights[index] = heights[index] || 0;
if (height > heights[index]) heights[index] = height;
});
});
tr_copy.each(function (index) {
$(this).height(heights[index]);
});
}
})(jQuery);