Ticket #806 - for Profiles and Groups modules.

modules/base/groups/classes/BxBaseModGroupsTemplate.php

@@ -46,6 +46,23 @@ class BxBaseModGroupsTemplate extends BxBaseModProfileTemplate
 
         return $aVars;
     }
+
+    protected function _getUnitClass($aData, $sTemplateName = 'unit.html')
+    {
+        $sResult = '';
+
+        switch($sTemplateName) {
+            case 'unit.html':
+            case 'unit_with_cover.html':
+                $sResult = 'bx-base-pofile-unit-with-cover bx-base-groups-unit-with-cover';
+                break;
+            case 'unit_wo_info.html':
+                $sResult = 'bx-base-pofile-unit-wo-info bx-base-groups-unit-wo-info';
+                break;
+        }
+
+        return $sResult;
+    }
 }
 
 /** @} */

modules/base/groups/template/css/main.css

@@ -7,7 +7,8 @@
     -webkit-border-radius:0.1875rem;
 }
 
-.bx-base-groups-unit-cover .bx-base-pofile-unit-cover .bx-def-thumb {
+.bx-base-groups-unit-wo-info .bx-def-thumb,
+.bx-base-groups-unit-with-cover .bx-base-pofile-unit-cover .bx-def-thumb {
     border-width:0.0625rem;
     border-radius:0.1875rem;
     -moz-border-radius:0.1875rem;

modules/base/groups/template/unit.html

@@ -1 +1 @@
-<span class="bx-base-groups-unit-cover"><bx_include_base:../modules/base/profile/template/unit_with_cover.html /></span>
+<bx_include_base:../modules/base/profile/template/unit_with_cover.html />

modules/base/groups/template/unit_wo_info.html

@@ -1 +1 @@
-<span class="bx-base-groups-unit-cover"><bx_include_base:../modules/base/profile/template/unit_wo_info.html /></span>
+<bx_include_base:../modules/base/profile/template/unit_wo_info.html />

modules/base/profile/classes/BxBaseModProfileSearchResult.php

@@ -15,6 +15,8 @@ class BxBaseModProfileSearchResult extends BxBaseModGeneralSearchResult
     {
         parent::__construct($sMode, $aParams);
         $this->sCenterContentUnitSelector = '.bx-base-pofile-unit';
+
+        $this->addContainerClass (array('bx-def-margin-sec-lefttopright-neg', 'bx-base-pofile-units-wrapper'));
     }
 
     protected function _setConnectionsConditions ($aParams)

modules/base/profile/classes/BxBaseModProfileTemplate.php

@@ -51,6 +51,7 @@ class BxBaseModProfileTemplate extends BxBaseModGeneralTemplate
 
         // generate html
         $aVars = array (
+        	'class' => $this->_getUnitClass($aData, $sTemplateName),
             'id' => $aData[$CNF['FIELD_ID']],
             'thumb_url' => $isPublic ? $this->thumb ($aData) : $this->getImageUrl('no-picture-thumb.png'),
             'cover_url' => CHECK_ACTION_RESULT_ALLOWED === $this->getModule()->checkAllowedViewCoverImage($aData) ? $this->urlCoverUnit ($aData, true) : $this->getImageUrl('cover.jpg'),
@@ -233,6 +234,25 @@ class BxBaseModProfileTemplate extends BxBaseModGeneralTemplate
         }
         return $bSubstituteNoImage && !$sImageUrl ? $this->getImageUrl($sNoImage) : $sImageUrl;
     }
+
+    protected function _getUnitClass($aData, $sTemplateName = 'unit.html')
+    {
+        $sResult = '';
+
+        switch($sTemplateName) {
+            case 'unit.html':
+                $sResult = 'bx-base-pofile-unit';
+                break;
+            case 'unit_with_cover.html':
+                $sResult = 'bx-base-pofile-unit-with-cover';
+                break;
+            case 'unit_wo_info.html':
+                $sResult = 'bx-base-pofile-unit-wo-info';
+                break;
+        }
+
+        return $sResult;
+    }
 }
 
 /** @} */

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

@@ -152,6 +152,77 @@ a.bx-base-pofile-cover-image:hover,
     right:0;
 }
 
+
+/* flexbox */
+.bx-base-pofile-units-wrapper {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+
+    /* makes all items on a row equal height */
+    -webkit-box-align: stretch;
+    -webkit-align-items: stretch;
+    -ms-flex-align: stretch;
+    align-items: stretch;
+
+    /* wrap onto the next line rather than stretching or shrinking */
+    -webkit-flex-wrap: wrap;
+    -ms-flex-wrap: wrap;
+    flex-wrap: wrap;
+
+    /* tells flexbox to start items from the left */
+    -webkit-box-pack: start;
+    -ms-flex-pack: start;
+    plex-pack: start;
+    -webkit-justify-content: flex-start;
+    justify-content: flex-start;
+}
+
+.bx-base-pofile-units-wrapper .bx-base-pofile-unit-with-cover {
+    -webkit-box-flex: 0;
+
+    -webkit-flex: 0 0 100%;
+    -ms-flex: 0 0 100%;
+    flex: 0 0 100%;
+
+    overflow:hidden;
+}
+
+@media (min-width:533px) and (max-width:720px) {
+        .bx-layout-column-half .bx-base-pofile-units-wrapper .bx-base-pofile-unit-with-cover,
+        .bx-layout-column-thin .bx-base-pofile-units-wrapper .bx-base-pofile-unit-with-cover {
+        -webkit-flex: 0 0 49.8%;
+        -ms-flex: 0 0 49.8%;
+        flex: 0 0 49.8%;
+    }
+}
+
+@media (min-width:533px) and (max-width:1024px) {
+        .bx-layout-column-wide .bx-base-pofile-units-wrapper .bx-base-pofile-unit-with-cover,
+        #sys_search_results .bx-base-pofile-units-wrapper .bx-base-pofile-unit-with-cover,
+        .bx-layout-column-fullwidth .bx-base-pofile-units-wrapper .bx-base-pofile-unit-with-cover {
+        -webkit-flex: 0 0 49.8%;
+        -ms-flex: 0 0 49.8%;
+        flex: 0 0 49.8%;
+    }
+}
+
+@media (min-width:1024px) {
+    .bx-layout-column-wide .bx-base-pofile-units-wrapper .bx-base-pofile-unit-with-cover {
+        -webkit-flex: 0 0 49.8%;
+        -ms-flex: 0 0 49.8%;
+        flex: 0 0 49.8%;
+    }
+    #sys_search_results .bx-base-pofile-units-wrapper .bx-base-pofile-unit-with-cover,
+    .bx-layout-column-fullwidth .bx-base-pofile-units-wrapper .bx-base-pofile-unit-with-cover {
+        -webkit-flex: 0 0 33.25%;
+        -ms-flex: 0 0 33.25%;
+        flex: 0 0 33.25%;
+    }
+}
+
+
 /* view page */
 .bx-base-profile-entity-content,
 .bx-base-profile-entity-content p {

modules/base/profile/template/unit.html

@@ -1,4 +1,4 @@
-<div class="bx-base-pofile-unit bx-def-unit absolute bx-def-margin-bottom bx-def-margin-sec-right">
+<div class="__class__ bx-def-unit absolute bx-def-margin-bottom bx-def-margin-sec-right">
     <div class="bx-def-unit-img bx-def-thumb bx-def-thumb-size">
         <a href="__content_url__"><img class="bx-def-thumb bx-def-thumb-size" src="__thumb_url__" /></a>
     </div>

modules/base/profile/template/unit_with_cover.html

@@ -1,16 +1,18 @@
-<div class="bx-base-pofile-unit-with-cover bx-def-border bx-def-margin-sec bx-def-round-corners bx-def-box bx-def-color-bg-box">
-    <a class="bx-base-pofile-unit-cover" style="background-image:url(__cover_url__);" href="__content_url__">
-        <img class="bx-def-thumb bx-def-thumb-size bx-def-border" src="__thumb_url__" />
-    </a>
-    <div class="bx-base-pofile-unit-title bx-def-margin-sec-topbottom"><a href="__content_url__">__title__</a></div>
-    <bx_if:info>
-    <div class="bx-base-pofile-unit-info bx-def-box-sizing bx-def-padding-sec-rightbottomleft bx-clearfix">
-        <div class="bx-base-pofile-unit-info-members bx-def-font-grayed bx-def-font-small">__members__</div>
-        <div class="bx-base-pofile-unit-info-btn">
-            <bx_if:btn>
-                <button class="bx-btn bx-btn-small" onclick="bx_conn_action(this, '__object__', 'add', '__id__')">__title__</button>
-            </bx_if:btn>
-        </div>
+<div class="__class__ bx-def-padding-sec bx-def-box-sizing">
+    <div class="bx-base-pofile-unit-cnt bx-def-box bx-def-border bx-def-round-corners bx-def-color-bg-box">
+	    <a class="bx-base-pofile-unit-cover" style="background-image:url(__cover_url__);" href="__content_url__">
+	        <img class="bx-def-thumb bx-def-thumb-size bx-def-border" src="__thumb_url__" />
+	    </a>
+	    <div class="bx-base-pofile-unit-title bx-def-margin-sec-topbottom"><a href="__content_url__">__title__</a></div>
+	    <bx_if:info>
+		    <div class="bx-base-pofile-unit-info bx-def-box-sizing bx-def-padding-sec-rightbottomleft bx-clearfix">
+		        <div class="bx-base-pofile-unit-info-members bx-def-font-grayed bx-def-font-small">__members__</div>
+		        <div class="bx-base-pofile-unit-info-btn">
+		            <bx_if:btn>
+		                <button class="bx-btn bx-btn-small" onclick="bx_conn_action(this, '__object__', 'add', '__id__')">__title__</button>
+		            </bx_if:btn>
+		        </div>
+		    </div>
+	    </bx_if:info>
     </div>
-    </bx_if:info>
-</div>
+</div>

modules/base/profile/template/unit_wo_info.html

@@ -1,3 +1,3 @@
-<div class="bx-base-pofile-unit-wo-info bx-def-thumb-size">
+<div class="__class__ bx-def-thumb-size">
     <a href="__content_url__"><img class="bx-def-thumb bx-def-thumb-size" src="__thumb_url__" /></a>
 </div>