Bring and require responsive-tables js and css from spree_backend

This commit is contained in:
luisramos0
2019-12-19 19:58:37 +00:00
parent 37a5d1d036
commit 4f0e441407
4 changed files with 65 additions and 1 deletions

View File

@@ -25,6 +25,7 @@
//= require admin/spree_backend
//= require modernizr
//= require css_browser_selector_dev
//= require responsive-tables
//= require admin/spree_paypal_express
// OFN specific

View File

@@ -6,7 +6,7 @@
*= require admin/spree_backend
*= require jquery.powertip
*= require responsive-tables
*= require jquery-ui-timepicker-addon
*= require shared/textAngular
*= require shared/ng-tags-input.min

View File

@@ -0,0 +1,42 @@
$(document).ready(function() {
var switched = false;
var updateTables = function() {
if (($(window).width() < 767) && !switched ){
switched = true;
$("table.responsive").each(function(i, element) {
splitTable($(element));
});
return true;
}
else if (switched && ($(window).width() > 767)) {
switched = false;
$("table.responsive").each(function(i, element) {
unsplitTable($(element));
});
}
};
$(window).load(updateTables);
$(window).bind("resize", updateTables);
function splitTable(original)
{
original.wrap("<div class='table-wrapper' />");
var copy = original.clone();
copy.find("td:not(:first-child), th:not(:first-child)").css("display", "none");
copy.removeClass("responsive");
original.closest(".table-wrapper").append(copy);
copy.wrap("<div class='pinned' />");
original.wrap("<div class='scrollable' />");
}
function unsplitTable(original) {
original.closest(".table-wrapper").find(".pinned").remove();
original.unwrap();
original.unwrap();
}
});

View File

@@ -0,0 +1,21 @@
/* Foundation v2.1.4 http://foundation.zurb.com */
/* Artfully masterminded by ZURB */
/* Mobile */
@media only screen and (max-width: 767px) {
table.responsive { margin-bottom: 0; }
.pinned { position: absolute; left: 0; top: 0; background: #fff; width: 35%; overflow: hidden; overflow-x: scroll; border-right: 1px solid #ccc; border-left: 1px solid #ccc; }
.pinned table { border-right: none; border-left: none; width: 100%; }
.pinned table th, .pinned table td { white-space: nowrap; }
.pinned td:last-child { border-bottom: 0; }
div.table-wrapper { position: relative; margin-bottom: 20px; overflow: hidden; border-right: 1px solid #ccc; }
div.table-wrapper div.scrollable table { margin-left: 35%; }
div.table-wrapper div.scrollable { overflow: scroll; overflow-y: hidden; }
table.responsive td, table.responsive th { position: relative; white-space: nowrap; overflow: hidden; }
table.responsive th:first-child, table.responsive td:first-child, table.responsive td:first-child, table.responsive.pinned td { display: none; }
}