Ticket #1306

modules/base/general/js/showcase.js

@@ -3,12 +3,19 @@ $(document).ready(function () {
 });
 
 function bx_showcase_view_init() {
-	if($('.bx-base-unit-showcase-wrapper').closest('.bx-popup-wrapper').length == 0){
-		$('.bx-base-unit-showcase-wrapper').flickity({
+	if($('.bx-base-unit-showcase-wrapper').closest('.bx-popup-wrapper').length == 0) {
+		var oShowcase = $('.bx-base-unit-showcase-wrapper');
+		var oShowcaseOptions = {
 			cellSelector: '.bx-base-unit-showcase',
 			cellAlign: 'left',
 			pageDots: false,
 			imagesLoaded: true
-		});
+		};
+		
+		var iGroupCells = oShowcase.attr('bx-sc-group-cells');
+		if(iGroupCells != undefined)
+			oShowcaseOptions.groupCells = parseInt(iGroupCells);
+
+		oShowcase.flickity(oShowcaseOptions);
 	}
 }

modules/base/profile/classes/BxBaseModProfileSearchResult.php

@@ -27,7 +27,10 @@ class BxBaseModProfileSearchResult extends BxBaseModGeneralSearchResult
         $this->addContainerClass (array('bx-def-margin-sec-lefttopright-neg', 'bx-base-pofile-units-wrapper', 'bx-def-margin-sec-bottom-neg'));
 		if (in_array($this->sUnitTemplate, array('unit_with_cover_showcase.html', 'unit_wo_info_showcase.html'))){
 			$this->bShowcaseView = true;
-			$this->removeContainerClass ('bx-def-margin-bottom-neg');			
+
+			$this->removeContainerClass ('bx-def-margin-bottom-neg');
+			if($this->sUnitTemplate == 'unit_wo_info_showcase.html')
+				$this->addContainerAttribute(array('bx-sc-group-cells' => 3));
         }
         if ($sMode == 'recommended')
             $this->bRecommendedView=true;

modules/base/profile/template/css/main.css

@@ -244,7 +244,8 @@ a.bx-base-pofile-cover-image:hover,
 
 /* showcase view */
 .bx-base-unit-showcase-wrapper {
-    display:block
+    display: block;
+    white-space: nowrap;
 }
 .bx-base-unit-showcase-wrapper .bx-base-pofile-unit-showcase
 {
@@ -252,7 +253,10 @@ a.bx-base-pofile-cover-image:hover,
 }
 .bx-base-unit-showcase-wrapper .bx-base-pofile-unit-wo-info-showcase
 {
-    width:calc(33.3%);
+	display: inline-block;
+	vertical-align: top;
+
+    width:calc(25.0%);
 }
 
 @media (min-width:533px) and (max-width:1024px) {
@@ -275,11 +279,11 @@ a.bx-base-pofile-cover-image:hover,
 
 	.bx-base-unit-showcase-wrapper .bx-base-pofile-unit-wo-info-showcase
 	{
-		width:calc(16.6%);
+		width:calc(10.0%);
 	}
     .bx-layout-column-thin .bx-base-unit-showcase-wrapper .bx-base-pofile-unit-wo-info-showcase
 	{
-		width:calc(33.3%);
+		width:calc(25.0%);
 	}
 }
 
@@ -311,15 +315,15 @@ a.bx-base-pofile-cover-image:hover,
 
 	.bx-base-unit-showcase-wrapper .bx-base-pofile-unit-wo-info-showcase
 	{
-		width:calc(8.3%);
+		width:calc(6.66%);
 	}
     .bx-layout-column-thin .bx-base-unit-showcase-wrapper .bx-base-pofile-unit-wo-info-showcase
 	{
-		width:calc(33.3%);
+		width:calc(25.0%);
 	}
     .bx-layout-column-half .bx-base-unit-showcase-wrapper .bx-base-pofile-unit-wo-info-showcase
 	{
-		width:calc(16.6%);
+		width:calc(10.0%);
 	}
 }
 

modules/base/profile/template/unit_wo_info.html

@@ -2,7 +2,7 @@
 	<div class="bx-def-unit-img bx-def-thumb-size">
     	<a class="bx-def-font-align-center" href="__content_url__" onclick="__content_click__">
 			<bx_if:show_thumb_image>
-			    <img class="bx-base-pofile-unit-thumb bx-def-thumb bx-def-thumb-size" src="__thumb_url__" />
+			    <img class="bx-base-pofile-unit-thumb bx-def-thumb bx-def-thumb-size bx-def-border bx-def-box-sizing" src="__thumb_url__" />
 			</bx_if:show_thumb_image>
 			<bx_if:show_thumb_letter>
 			    <p class="bx-base-pofile-unit-thumb bx-def-thumb bx-def-thumb-size bx-def-border bx-def-box-sizing" style="background-color:rgba(__color__)">__letter__</p>

modules/base/profile/template/unit_wo_info_links.html

@@ -1,6 +1,6 @@
 <div class="__class__ bx-def-thumb-size bx-def-font-align-center">
 	<bx_if:show_thumb_image>
-	    <img class="bx-base-pofile-unit-thumb bx-def-thumb bx-def-thumb-size" src="__thumb_url__" />
+	    <img class="bx-base-pofile-unit-thumb bx-def-thumb bx-def-thumb-size bx-def-border bx-def-box-sizing" src="__thumb_url__" />
 	</bx_if:show_thumb_image>
 	<bx_if:show_thumb_letter>
 	    <p class="bx-base-pofile-unit-thumb bx-def-thumb bx-def-thumb-size bx-def-border bx-def-box-sizing" style="background-color:rgba(__color__)">__letter__</p>

modules/base/profile/template/unit_wo_links.html

@@ -1,7 +1,7 @@
 <div class="bx-base-pofile-unit bx-def-unit bx-def-margin-bottom bx-def-margin-sec-right">
     <div class="bx-def-unit-img bx-def-font-align-center">
         <bx_if:show_thumb_image>
-            <img class="bx-base-pofile-unit-thumb bx-def-thumb bx-def-thumb-size" src="__thumb_url__" />
+            <img class="bx-base-pofile-unit-thumb bx-def-thumb bx-def-thumb-size bx-def-border bx-def-box-sizing" src="__thumb_url__" />
         </bx_if:show_thumb_image>
         <bx_if:show_thumb_letter>
             <p class="bx-base-pofile-unit-thumb bx-def-thumb bx-def-thumb-size bx-def-border bx-def-box-sizing" style="background-color:rgba(__color__)">__letter__</p>

template/scripts/BxBaseSearchResult.php

@@ -26,6 +26,7 @@ class BxBaseSearchResult extends BxDolSearchResult
 
     protected $sCenterContentUnitSelector = false;
 
+    protected $aContainerAttrs = array();
     protected $aContainerClasses = array('bx-search-result-block', 'bx-clearfix');
 
     protected $aUnitParams = array(); ///< additional params array to pass to unit display function
@@ -58,7 +59,13 @@ class BxBaseSearchResult extends BxDolSearchResult
 
             $sSearchResultBlockId = 'bx-search-result-block-' . rand(0, PHP_INT_MAX);
             $sClasses = implode(' ', $this->aContainerClasses);
-            $sCode = '<div id="' . $sSearchResultBlockId . '" class="' . $sClasses . '">' . $sCode . '</div>';
+
+            $sAttributes = '';
+            if(is_array($this->aContainerAttrs) && !empty($this->aContainerAttrs))
+            	foreach ($this->aContainerAttrs as $sName => $sValue)
+            		$sAttributes .= ' ' . $sName . '="' . $sValue . '"';
+
+            $sCode = '<div id="' . $sSearchResultBlockId . '" class="' . $sClasses . '"' . $sAttributes . '>' . $sCode . '</div>';
 
             if (!$this->_bLiveSearch && $this->sCenterContentUnitSelector) {
                 $sCode .= "
@@ -344,6 +351,30 @@ class BxBaseSearchResult extends BxDolSearchResult
                 unset($this->aContainerClasses[$i]);
     }
 
+    /**
+     * Add attribute(s) to search result container 
+     * @param $aAttributes an array of Key -> Value pair(s).
+     */
+    function addContainerAttribute ($aAttributes)
+    {
+    	if(empty($aAttributes) || !is_array($aAttributes))
+    		return;
+
+    	$this->aContainerAttrs = array_merge($this->aContainerAttrs, $aAttributes);
+    }
+
+	/**
+     * Remove attribute(s) from search result container 
+     * @param $mixedName attribute name or an array of names
+     */
+    function removeContainerAttribute ($mixedName)
+    {
+        if(!is_array($mixedName))
+            $mixedName = array($mixedName);
+
+		$this->aContainerAttrs = array_diff_assoc($this->aContainerAttrs, array_flip($mixedName));
+    }
+
     public function setUnitParams ($aParamsAdd = array(), $aParamsRemove = array())
     {
         if ($aParamsAdd)