Ticket #806 - for media in Albums module.

modules/boonex/albums/classes/BxAlbumsSearchResultMedia.php

@@ -15,8 +15,6 @@ class BxAlbumsSearchResultMedia extends BxBaseModTextSearchResult
 
     function __construct($sMode = '', $aParams = array())
     {
-        $this->sCenterContentUnitSelector = '.bx-albums-media-wrapper';
-
         $this->aUnitViews = array('gallery' => 'unit_media.html');
 
         $this->sUnitTemplateLiveSearch = 'unit_media_live_search.html';
@@ -136,6 +134,8 @@ class BxAlbumsSearchResultMedia extends BxBaseModTextSearchResult
         $this->aCurrent['title'] = $this->_replaceMarkers($this->aCurrent['title']);
 
         $this->addConditionsForPrivateContent($CNF, $oProfileAuthor);
+
+        $this->addContainerClass (array('bx-def-margin-sec-lefttopright-neg', 'bx-albums-medias-wrapper'));
     }
 
     function getAlterOrder()

modules/boonex/albums/template/css/main.css

@@ -1,28 +1,108 @@
 
 @import url(../../../../base/text/template/css/main.css);
 
-.bx-albums-unit-size {
-    width: 18.0rem;
-    height: 18.0rem;
-    object-fit: cover;
+
+/* flexbox */
+.bx-albums-medias-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-albums-media-wrapper {
-	display: inline-block;
-	vertical-align: top;
 
-    width: 18.0rem;
+.bx-albums-medias-wrapper .bx-albums-media-wrapper {
+    -webkit-box-flex: 0;
+
+    -webkit-flex: 0 0 100%;
+    -ms-flex: 0 0 100%;
+    flex: 0 0 100%;
+
+    overflow:hidden;
+}
+
+.bx-albums-media-wrapper .bx-albums-unit-size {
+    width: 100%;
+    height: auto;
+    object-fit: cover;
+}
+	
+@media (min-width:533px) and (max-width:720px) {
+        .bx-layout-column-half .bx-albums-medias-wrapper .bx-albums-media-wrapper,
+        .bx-layout-column-thin .bx-albums-medias-wrapper .bx-albums-media-wrapper {
+        -webkit-flex: 0 0 49.8%;
+        -ms-flex: 0 0 49.8%;
+        flex: 0 0 49.8%;
+    }
 }
 
-@media (max-width:520px) {
-    .bx-albums-unit-size {
+@media (min-width:533px) and (max-width:1024px) {
+	#sys_search_results .bx-albums-medias-wrapper .bx-albums-media-wrapper,
+	.bx-layout-column-wide .bx-albums-medias-wrapper .bx-albums-media-wrapper,
+	.bx-layout-column-fullwidth .bx-albums-medias-wrapper .bx-albums-media-wrapper {
+        -webkit-flex: 0 0 49.8%;
+        -ms-flex: 0 0 49.8%;
+        flex: 0 0 49.8%;
+    }
+
+    .bx-layout-column-wide .bx-albums-medias-wrapper .bx-albums-media-wrapper .bx-albums-unit-size {
         width: 100%;
         height: auto;
     }
-    .bx-albums-media-wrapper {
+
+    #sys_search_results .bx-albums-medias-wrapper .bx-albums-media-wrapper .bx-albums-unit-size,
+    .bx-layout-column-fullwidth .bx-albums-medias-wrapper .bx-albums-media-wrapper .bx-albums-unit-size {
+        width: 18.0rem;
+        height: 18.0rem;
+    }
+    
+}
+
+@media (min-width:1024px) {
+    .bx-layout-column-wide .bx-albums-medias-wrapper .bx-albums-media-wrapper {
+        -webkit-flex: 0 0 49.8%;
+        -ms-flex: 0 0 49.8%;
+        flex: 0 0 49.8%;
+    }
+
+    .bx-layout-column-wide .bx-albums-medias-wrapper .bx-albums-media-wrapper .bx-albums-unit-size {
         width: 100%;
+        height: auto;
+    }
+		
+    #sys_search_results .bx-albums-medias-wrapper .bx-albums-media-wrapper,
+    .bx-layout-column-fullwidth .bx-albums-medias-wrapper .bx-albums-media-wrapper {
+        -webkit-flex: 0 0 33.25%;
+        -ms-flex: 0 0 33.25%;
+        flex: 0 0 33.25%;
+    }
+    
+    #sys_search_results .bx-albums-medias-wrapper .bx-albums-media-wrapper .bx-albums-unit-size,
+    .bx-layout-column-half .bx-albums-medias-wrapper .bx-albums-media-wrapper .bx-albums-unit-size,
+    .bx-layout-column-fullwidth .bx-albums-medias-wrapper .bx-albums-media-wrapper .bx-albums-unit-size {
+		width: 18.0rem;
+		height: 18.0rem;
     }
 }
 
+
 .bx-search-result-block .bx-base-text-unit-gallery-wrapper {
 	display: block;
 }

modules/boonex/albums/template/unit_media.html

@@ -1,16 +1,18 @@
-<div class="bx-albums-media-wrapper bx-def-box bx-def-color-bg-box bx-def-margin-thd-right bx-def-margin-thd-bottom">
-    <div class="bx-albums-unit-size">
-        <bx_if:image>
-            <a href="__url__" title="__title_attr__">
-                <img class="bx-albums-unit-size" src="__url_img__" alt="__title_attr__" />
-            </a>
-        </bx_if:image>
-        <bx_if:video>
-            <a href="__url__" title="__title_attr__">
-                <img class="bx-albums-unit-size" src="__url_img__" alt="__title_attr__" />
-            </a>
-        </bx_if:video>
+<div class="bx-albums-media-wrapper bx-def-padding-sec bx-def-box-sizing">
+    <div class="bx-albums-media-cnt bx-def-box bx-def-color-bg-box">
+	    <div class="bx-albums-unit-size bx-def-centered">
+	        <bx_if:image>
+	            <a href="__url__" title="__title_attr__">
+	                <img class="bx-albums-unit-size" src="__url_img__" alt="__title_attr__" />
+	            </a>
+	        </bx_if:image>
+	        <bx_if:video>
+	            <a href="__url__" title="__title_attr__">
+	                <img class="bx-albums-unit-size" src="__url_img__" alt="__title_attr__" />
+	            </a>
+	        </bx_if:video>
+	    </div>
+	    <div class="bx-albums-media-caption bx-def-margin-sec-topbottom bx-def-margin-leftright">__title__</div>
+	    <div class="bx-albums-media-actions bx-def-margin-sec-bottom bx-def-margin-leftright">__actions__</div>
     </div>
-    <div class="bx-albums-media-caption bx-def-margin-sec-topbottom bx-def-margin-leftright">__title__</div>
-    <div class="bx-albums-media-actions bx-def-margin-sec-bottom bx-def-margin-leftright">__actions__</div>
 </div>