From 24a8e961b6d2fc32ba468563ac9b8a25924b21b2 Mon Sep 17 00:00:00 2001 From: Angela McMahon Date: Thu, 23 Mar 2017 15:32:11 -0500 Subject: [PATCH 1/4] INTERIM-28 Removing suitcase_gridheight.js from info file and filesystem --- js/suitcase_gridheight.js | 28 ---------------------------- suitcase_interim.info | 5 ----- 2 files changed, 33 deletions(-) delete mode 100644 js/suitcase_gridheight.js diff --git a/js/suitcase_gridheight.js b/js/suitcase_gridheight.js deleted file mode 100644 index 4469d94..0000000 --- a/js/suitcase_gridheight.js +++ /dev/null @@ -1,28 +0,0 @@ -/** - * Function for resizing view rows injected with luggage-grid class - */ - -(function ($) { - Drupal.behaviors.suitcaseGridHeight = { - attach: function (context, settings) { - $('body', context).once('suitcaseGridHeight', function () { - $(window).bind('load resize', function () { - // Check to make sure this isn't happening on mobile - if (window.matchMedia('(min-width: 740px)').matches) { - // Check to make sure this isn't happening on views without the luggage-grid class - $($('.luggage-grid').get().reverse()).each(function () { - var maxHeight = 0; - for (var i = 1; i < $(this).find('.luggage-gridrow').length; i += 2) { - var even = i + 1; - // Need this to reset height for responsiveness - $(this).find('.views-row-' + i + ', .views-row-' + even).height('auto'); - maxHeight = $(this).find('.views-row-' + i).outerHeight() > $(this).find('.views-row-' + even).outerHeight() ? $(this).find('.views-row-' + i).outerHeight() : $(this).find('.views-row-' + even).outerHeight(); - $(this).find('.views-row-' + i + ', .views-row-' + even).height(maxHeight); - } - }); - } - }); - }); - } - }; -})(jQuery); diff --git a/suitcase_interim.info b/suitcase_interim.info index bedb9d5..c646095 100644 --- a/suitcase_interim.info +++ b/suitcase_interim.info @@ -85,7 +85,6 @@ settings[alpha_libraries][omega_equalheights] = '' settings[alpha_libraries][suitcase_formalize] = 'suitcase_formalize' settings[alpha_libraries][suitcase_facet] = 'suitcase_facet' settings[alpha_libraries][suitcase_sticky_menu] = 'suitcase_sticky_menu' -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' @@ -391,10 +390,6 @@ libraries[suitcase_sticky_menu][name] = 'Suitcase Sticky menu' libraries[suitcase_sticky_menu][description] = 'Sticks the menu to the top of screen when scrolling past the menu position.' libraries[suitcase_sticky_menu][js][0][file] = 'suitcase_sticky_menu.js' libraries[suitcase_sticky_menu][js][0][options][weight] = '-20' -libraries[suitcase_gridheight][name] = 'Suitcase Grid Height' -libraries[suitcase_gridheight][description] = 'Provides a javascript library that makes grid items the same height' -libraries[suitcase_gridheight][js][0][file] = 'suitcase_gridheight.js' -libraries[suitcase_gridheight][js][0][options][weight] = '-20' libraries[suitcase_jquery_smart_menu][name] = 'jQuery SmartMenus' libraries[suitcase_jquery_smart_menu][description] = 'Provides dropdown menus' libraries[suitcase_jquery_smart_menu][js][0][file] = 'jquery.smartmenus.min.js' From c1082495ba4ba1df98564cfa0a231b420302e094 Mon Sep 17 00:00:00 2001 From: Angela McMahon Date: Thu, 23 Mar 2017 15:32:31 -0500 Subject: [PATCH 2/4] INTERIM-28 Added flexbox styling for grids --- css/suitcase.css | 51 ++++++++++++++++--------------------- css/suitcase_responsive.css | 14 ++++++++++ 2 files changed, 36 insertions(+), 29 deletions(-) diff --git a/css/suitcase.css b/css/suitcase.css index 6bf8f60..e06887e 100644 --- a/css/suitcase.css +++ b/css/suitcase.css @@ -1598,45 +1598,38 @@ span.date-display-single { } /* -------------------- */ -/* Grid for Views */ +/* ## VIEWS - FLEXGRID +/* -------------------- */ -.luggage-grid .view-content > h3 { - display: block; - padding: 5px; - color: #444444; - font-size: 20px; - font-weight: 700; - clear: both; +.luggage-grid .view-content { + display: flex; + flex-flow: wrap; } -.luggage-grid .luggage-gridrow { - height: auto; width: 100%; - margin: 0 0.25% 8px 0.25%; - padding: 1em; - float: left; - overflow: hidden; +.luggage-gridrow, +.luggage-gridrow3, +.luggage-gridrow4 { background: rgba(255, 255, 255, 0.7); - border: 1px solid #dddddd; + box-sizing: border-box; + padding: 10px 5px; + margin: 0 0.7%; + outline: 1px solid #ddd; + flex: 0 0 100%; } -.luggage-grid .luggage-gridrow .views-field img { - margin: 2.5px 15px 2.5px 2.5px; +.luggage-gridrow img, +.luggage-gridrow3 img, +.luggage-gridrow4 img { float: left; + padding: 5px 5px 0 0; } -.luggage-grid .luggage-gridrow .views-field-title { - font-size: 1.1em; +.luggage-grid .view-content > h3 { + padding: 5px; + color: #444444; + font-size: 20px; font-weight: 700; -} - -.luggage-grid .luggage-gridrow .luggage-gridgreen { - margin-bottom: 16px; -} - -.luggage-grid .luggage-gridrow .luggage-gridgreen, -.luggage-grid .luggage-gridrow .luggage-gridgreen a { - font-style: italic; - color: rgb(36, 109, 73); + width: 100%; } /* -------------------- */ diff --git a/css/suitcase_responsive.css b/css/suitcase_responsive.css index 70f1b8d..90bb50d 100644 --- a/css/suitcase_responsive.css +++ b/css/suitcase_responsive.css @@ -332,3 +332,17 @@ } } + +@media only screen and (min-width: 769px) { + .luggage-gridrow, + .luggage-gridrow3, + .luggage-gridrow4{ flex-basis: 48.6%; } +} + +@media only screen and (min-width: 1024px) { + .luggage-gridrow4{ flex-basis: 23.6%; } +} + +@media only screen and (min-width: 1024px) { + .luggage-gridrow3{ flex-basis: 31.4%; } +} From abc87dcc537bce3570e202c525eb201944806c2e Mon Sep 17 00:00:00 2001 From: Angela McMahon Date: Wed, 29 Mar 2017 14:03:48 -0500 Subject: [PATCH 3/4] INTERIM-28 Adjusted grid item padding --- css/suitcase.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/suitcase.css b/css/suitcase.css index e06887e..046299a 100644 --- a/css/suitcase.css +++ b/css/suitcase.css @@ -1611,7 +1611,7 @@ span.date-display-single { .luggage-gridrow4 { background: rgba(255, 255, 255, 0.7); box-sizing: border-box; - padding: 10px 5px; + padding: 15px; margin: 0 0.7%; outline: 1px solid #ddd; flex: 0 0 100%; From ce03e151f9ea05d5b9ce4a5bf82d8c5ea5438f52 Mon Sep 17 00:00:00 2001 From: Angela McMahon Date: Thu, 30 Mar 2017 15:38:03 -0500 Subject: [PATCH 4/4] INTERIM-28 Fixed issues with inconsistencies in Chrome --- css/suitcase_responsive.css | 27 ++++++++++++++++++--------- 1 file changed, 18 insertions(+), 9 deletions(-) diff --git a/css/suitcase_responsive.css b/css/suitcase_responsive.css index 90bb50d..189d9ae 100644 --- a/css/suitcase_responsive.css +++ b/css/suitcase_responsive.css @@ -106,12 +106,6 @@ .flexslider { display: block; } - - - .luggage-grid .luggage-gridrow { - width: 49.5%; - } - } @media all and (max-width: 739px) { @@ -336,13 +330,28 @@ @media only screen and (min-width: 769px) { .luggage-gridrow, .luggage-gridrow3, - .luggage-gridrow4{ flex-basis: 48.6%; } + .luggage-gridrow4 { + flex-basis: 48.6%; + min-width: 48.6%; + } } @media only screen and (min-width: 1024px) { - .luggage-gridrow4{ flex-basis: 23.6%; } + .luggage-gridrow4 { + flex-basis: 23.5%; + min-width: 23.5%; + } } @media only screen and (min-width: 1024px) { - .luggage-gridrow3{ flex-basis: 31.4%; } + .luggage-gridrow3 { + flex-basis: 31.3%; + min-width: 31.3%; + } + + .luggage-gridrow3 .views-field-field-uri-1, + .luggage-gridrow4 .views-field-field-uri-1 { + overflow-wrap: break-word; + word-wrap: break-word; + } }