From 57332cf0c2f507c5419e21f91befa7c042bf730d Mon Sep 17 00:00:00 2001 From: "Carney, Sarah A" Date: Mon, 13 Feb 2017 11:48:15 -0600 Subject: [PATCH 1/6] LUGG-883-3 Added responsive_tables.js --- js/suitcase_responsive_tables.js | 78 ++++++++++++++++++++++++++++++++ 1 file changed, 78 insertions(+) create mode 100644 js/suitcase_responsive_tables.js diff --git a/js/suitcase_responsive_tables.js b/js/suitcase_responsive_tables.js new file mode 100644 index 0000000..0169f13 --- /dev/null +++ b/js/suitcase_responsive_tables.js @@ -0,0 +1,78 @@ +(function ($) { + +$(document).ready(function() { + + // Just tables in content + var table = $('.field-items table'); + +/* --------------------- +First, check the table +structure and assign classes. +--------------------- */ + + /* ----- None ----- */ + table.addClass('table-none'); + + /* ----- Row ----- */ + var rowsHeader = $(table.has('tr:first-of-type th:nth-of-type(2)')); + rowsHeader.attr('class', 'table-row'); + + /* ----- Col ----- */ + var colHeader = $(table.has('tr:nth-of-type(2) th:nth-of-type(1)')); + colHeader.attr('class', 'table-col'); + + /* ----- Both ----- */ + var bothHeader = $(table.has('tr:nth-of-type(1) th:nth-of-type(2)').has('tr:nth-of-type(2) th:nth-of-type(1)')); + bothHeader.attr('class', 'table-both'); + + /* --- Colspan or Rowspan --- */ + var tdColFreeze = $(table.has('td[colspan]')); + var thColFreeze = $(table.has('th[colspan]')); + var tdRowFreeze = $(table.has('td[rowspan]')); + var thRowFreeze = $(table.has('th[rowspan]')); + tdColFreeze.attr('class', 'table-freeze'); + thColFreeze.attr('class', 'table-freeze'); + tdRowFreeze.attr('class', 'table-freeze'); + thRowFreeze.attr('class', 'table-freeze'); + + /* --- All Responsive Tables --- */ + table.addClass('responsive-table'); + +/* --------------------- +Now apply any jQuery needed +to make the tables responsive +--------------------- */ + + /* ----- Row ----- */ + // Wrap cell content in a span for flexbox. + $('.table-row td').wrapInner(''); + + // Cycle through each row... + $('.table-row tr').each(function() { + // And cycle through each td in that row... + $(this).find('td').each(function(i) { + // Find the content of the closest th... + var rowHeader = $(this).closest('.table-row').find('tr th')[i].innerHTML; + // And add it as a span in the td. + $(this).prepend('') + }); + }); + + /* ----- BOTH ----- */ + // Wrap cell content in a span for flexbox. + $('.table-both td').wrapInner(''); + + // Cycle through each row... + $('.table-both tr').each(function() { + // And cycle through each td in that row... + $(this).find('td').each(function(i) { + + // Find the content of the closest th... + var rowHeader = $(this).closest('.table-both').find('tr th:not(:first-of-type)')[i].innerHTML; + // And add it as a span in the td. + $(this).prepend('') + }); + }); +}); + +})(jQuery); \ No newline at end of file From fe700611036b68dedfa0ee22627624329aa8aae0 Mon Sep 17 00:00:00 2001 From: "Carney, Sarah A" Date: Mon, 13 Feb 2017 11:48:48 -0600 Subject: [PATCH 2/6] LUGG-883-3 Activated responsive_tables.js --- suitcase_interim.info | 1 + 1 file changed, 1 insertion(+) diff --git a/suitcase_interim.info b/suitcase_interim.info index f88abc4..b30748b 100644 --- a/suitcase_interim.info +++ b/suitcase_interim.info @@ -412,3 +412,4 @@ libraries[suitcase_image_floats][name] = 'Suitcase Image Floats' libraries[suitcase_image_floats][description] = 'Provides a javascript library that adds a class to floated images' libraries[suitcase_image_floats][js][0][file] = 'suitcase_image_floats.js' libraries[suitcase_image_floats][js][0][options][weight] = '30' +scripts[] = js/suitcase_responsive_tables.js \ No newline at end of file From da9dc0c20bc67b0b13752e0ba3acb69f119aee77 Mon Sep 17 00:00:00 2001 From: "Carney, Sarah A" Date: Mon, 13 Feb 2017 11:52:25 -0600 Subject: [PATCH 3/6] LUGG-883-3 New responsive tables css --- css/suitcase.css | 207 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 207 insertions(+) diff --git a/css/suitcase.css b/css/suitcase.css index abb7b17..6cefb79 100644 --- a/css/suitcase.css +++ b/css/suitcase.css @@ -2021,6 +2021,213 @@ html.js input.form-autocomplete { background-position: 100% 12px; } +* -------------------- */ +/* ## RESPONSIVE TABLES +/* -------------------- */ + +table.responsive-table { + margin-top: 1.5rem; + margin-bottom: 1.5rem; + border-collapse: collapse; +} + +table.responsive-table, +.responsive-table tbody, +.responsive-table thead, +.responsive-table tr, +.responsive-table th, +.responsive-table td { + border: none; + border-collapse: collapse; + border-spacing: 0; +} + +.responsive-table tr { + border-bottom: 1px solid #ccc; +} + +.responsive-table tr:first-of-type { + border-top: 1px solid #ccc; +} + +.responsive-table th, +.responsive-table td { + padding: 0.5rem 0.75rem; + border-left: 1px solid #ccc; +} +.responsive-table th:last-of-type, +.responsive-table td:last-of-type { + border-right: 1px solid #ccc; +} + +.responsive-table th { + background-color: #eee; +} + +/* -------------------- */ +/* NO JS +/* -------------------- */ + + .field-items table { + display: block; + max-width: 100%; + overflow: hidden; + overflow-x: scroll; + } + + .field-items table tr { + width: 100%; + } + + .field-items table::-webkit-scrollbar { + -webkit-appearance: none; + } + + .field-items table::-webkit-scrollbar:horizontal { + height: 11px; + } + + .field-items table::-webkit-scrollbar-thumb { + border-radius: 8px; + border: 2px solid white; + background-color: rgba(0, 0, 0, 0.5); + } + + .field-items table::-webkit-scrollbar-track { + background-color: #fff; + border-radius: 8px; + } + +@media (min-width: 801px) { + .row-header { display: none; } + .both-row-header { display: none; } +} + +@media (max-width: 800px) { + +/* -------------------- */ +/* NONE +/* -------------------- */ + + .responsive-table.table-none { display: table; min-width: 75%; } + + .responsive-table.table-none tr { border-bottom: 3px solid #bbb; } + .responsive-table.table-none td { + border-bottom: 1px solid #ddd; + border-right: 1px solid #ddd; + display: block; + } + + .responsive-table.table-none td:last-of-type { border-bottom: none; } + +/* -------------------- */ +/* FIRST ROW +/* -------------------- */ + + .responsive-table.table-row { display: table; min-width: 75%; } + + .responsive-table.table-row th { display: none; } + + .responsive-table.table-row tr { + display: block; + border-bottom: 3px solid #bbb; + } + + .responsive-table.table-row tr:first-of-type { border-bottom: 0; } + + .responsive-table.table-row td { + display: flex; + padding: 0; + border-bottom: 1px solid #ddd; + border-right: 1px solid #ddd; + } + + .responsive-table.table-row td:last-of-type { border-bottom: none; } + + .cell-content { + display: block; + flex: 1 1 50%; + padding: 0.5rem 0.75rem; + } + + .row-header { + display: block; + flex: 0 1 45%; + padding: 0.5rem 0.75rem; + background: #eee; + } + + .table-row tr { border-bottom: 3px solid #bbb; } + +/* -------------------- */ +/* FIRST COL +/* -------------------- */ + + .responsive-table.table-col { display: table; min-width: 75%; } + + .responsive-table.table-col th, + .responsive-table.table-col td { display: block; } + + .responsive-table.table-col th { border-bottom: 1px solid #bbb; } + + .responsive-table.table-col tr { + display: block; + border-bottom: 1px solid #ddd; + } + + .responsive-table.table-col td { + border-bottom: 1px solid #ddd; + border-right: 1px solid #ddd; + display: block; + } + + .responsive-table.table-col td:last-of-type { border-bottom: none; } + +/* -------------------- */ +/* BOTH +/* -------------------- */ + + .responsive-table.table-both { display: table; min-width: 75%; } + + .responsive-table.table-both th, + .responsive-table.table-both td { display: block; } + + .responsive-table.table-both th { border-bottom: 1px solid #bbb; } + + .responsive-table.table-both tr { + display: block; + border-bottom: 3px solid #bbb; + } + + .responsive-table.table-both tr:first-of-type { display: none; } + + .responsive-table.table-both tr:first-of-type th:first-of-type { display: none; } + + .responsive-table.table-both tr:nth-of-type(2) { border-top: 1px solid #ddd; } + + .responsive-table.table-both td { + display: flex; + padding: 0; + border-bottom: 1px solid #ddd; + border-right: 1px solid #ddd; + } + + .responsive-table.table-both td:last-of-type { border-bottom: none; } + + .both-cell-content { + display: block; + flex: 1 1 50%; + padding: 0.5rem 0.75rem; + } + + .both-row-header { + display: block; + flex: 0 1 45%; + padding: 0.5rem 0.75rem; + background: #eee; + } +} + /* -------------------- */ /* ## MEGAPANELS /* -------------------- */ From 11b19b322c34e3ad3ebdeb30c9e52778a1a5ded6 Mon Sep 17 00:00:00 2001 From: Angela McMahon Date: Tue, 14 Feb 2017 11:31:54 -0600 Subject: [PATCH 4/6] LUGG-883-3 Updated .info file --- suitcase_interim.info | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/suitcase_interim.info b/suitcase_interim.info index b30748b..ae430c4 100644 --- a/suitcase_interim.info +++ b/suitcase_interim.info @@ -89,6 +89,7 @@ settings[alpha_libraries][suitcase_gridheight] = 'suitcase_gridheight' settings[alpha_libraries][suitcase_jquery_smart_menu] = 'suitcase_jquery_smart_menu' settings[alpha_libraries][suitcase_smart_menu_init] = 'suitcase_smart_menu_init' settings[alpha_libraries][suitcase_image_floats] = 'suitcase_image_floats' +settings[alpha_libraries][suitcase_responsive_tables] = 'suitcase_responsive_tables' settings[alpha_css][alpha-reset.css] = 'alpha-reset.css' settings[alpha_css][alpha-mobile.css] = 'alpha-mobile.css' settings[alpha_css][alpha-alpha.css] = 'alpha-alpha.css' @@ -412,4 +413,7 @@ libraries[suitcase_image_floats][name] = 'Suitcase Image Floats' libraries[suitcase_image_floats][description] = 'Provides a javascript library that adds a class to floated images' libraries[suitcase_image_floats][js][0][file] = 'suitcase_image_floats.js' libraries[suitcase_image_floats][js][0][options][weight] = '30' -scripts[] = js/suitcase_responsive_tables.js \ No newline at end of file +libraries[suitcase_responsive_tables][name] = 'Suitcase Responsive Tables' +libraries[suitcase_responsive_tables][description] = 'Support for table display on mobile devices' +libraries[suitcase_responsive_tables][js][0][file] = 'suitcase_responsive_tables.js' +libraries[suitcase_responsive_tables][js][0][options][weight] = '30' From 2158a462da3ffcbdc134007ae38ca907791e6cf2 Mon Sep 17 00:00:00 2001 From: "Carney, Sarah A" Date: Tue, 14 Feb 2017 12:59:44 -0600 Subject: [PATCH 5/6] LUGG-883-3 Took care of ghost scroll bar in FF --- css/suitcase.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/css/suitcase.css b/css/suitcase.css index 6cefb79..b8e876d 100644 --- a/css/suitcase.css +++ b/css/suitcase.css @@ -2021,7 +2021,7 @@ html.js input.form-autocomplete { background-position: 100% 12px; } -* -------------------- */ +/* -------------------- */ /* ## RESPONSIVE TABLES /* -------------------- */ @@ -2072,7 +2072,7 @@ table.responsive-table, display: block; max-width: 100%; overflow: hidden; - overflow-x: scroll; + overflow-x: auto; } .field-items table tr { From ba3283b5bea90d4f852fb06f4c420496b8714c75 Mon Sep 17 00:00:00 2001 From: "Carney, Sarah A" Date: Tue, 14 Feb 2017 14:21:26 -0600 Subject: [PATCH 6/6] LUGG-883-3 Bolded mobile headers --- css/suitcase.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/css/suitcase.css b/css/suitcase.css index b8e876d..62e11e4 100644 --- a/css/suitcase.css +++ b/css/suitcase.css @@ -2154,6 +2154,7 @@ table.responsive-table, display: block; flex: 0 1 45%; padding: 0.5rem 0.75rem; + font-weight: 500; background: #eee; } @@ -2224,6 +2225,7 @@ table.responsive-table, display: block; flex: 0 1 45%; padding: 0.5rem 0.75rem; + font-weight: 500; background: #eee; } }