diff --git a/app/assets/javascripts/admin/all.js b/app/assets/javascripts/admin/all.js index 2f82fe9bb0..2c711c7059 100644 --- a/app/assets/javascripts/admin/all.js +++ b/app/assets/javascripts/admin/all.js @@ -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 diff --git a/app/assets/stylesheets/admin/all.scss b/app/assets/stylesheets/admin/all.scss index 480d5b9816..797bbf9689 100644 --- a/app/assets/stylesheets/admin/all.scss +++ b/app/assets/stylesheets/admin/all.scss @@ -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 diff --git a/vendor/assets/javascripts/responsive-tables.js b/vendor/assets/javascripts/responsive-tables.js new file mode 100755 index 0000000000..b3a38c253c --- /dev/null +++ b/vendor/assets/javascripts/responsive-tables.js @@ -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("
"); + + 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("
"); + original.wrap("
"); + } + + function unsplitTable(original) { + original.closest(".table-wrapper").find(".pinned").remove(); + original.unwrap(); + original.unwrap(); + } + +}); diff --git a/vendor/assets/stylesheets/responsive-tables.css b/vendor/assets/stylesheets/responsive-tables.css new file mode 100755 index 0000000000..104b499b73 --- /dev/null +++ b/vendor/assets/stylesheets/responsive-tables.css @@ -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; } + +} \ No newline at end of file