diff --git a/css/suitcase.css b/css/suitcase.css index b4d3396..cbad5fc 100644 --- a/css/suitcase.css +++ b/css/suitcase.css @@ -1615,45 +1615,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: 15px; + 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..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) { @@ -332,3 +326,32 @@ } } + +@media only screen and (min-width: 769px) { + .luggage-gridrow, + .luggage-gridrow3, + .luggage-gridrow4 { + flex-basis: 48.6%; + min-width: 48.6%; + } +} + +@media only screen and (min-width: 1024px) { + .luggage-gridrow4 { + flex-basis: 23.5%; + min-width: 23.5%; + } +} + +@media only screen and (min-width: 1024px) { + .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; + } +} 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 ada37c3..4d57642 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' @@ -392,10 +391,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'