#24 - Timeline (responsive layout)

modules/boonex/timeline/classes/BxTimelineTemplate.php

@@ -92,7 +92,7 @@ class BxTimelineTemplate extends BxDolModuleTemplate
 
 		list($sContent, $sLoadMore) = $this->getPosts($iOwnerId, 'desc', $iStart, $iPerPage, $sFilter, $iTimeline, $aModules);
 
-    	$this->addCss(array('plugins/jquery/themes/|jquery-ui.css', 'view.css'));
+    	$this->addCss(array('plugins/jquery/themes/|jquery-ui.css', 'view.css', 'view-media-tablet.css', 'view-media-desktop.css'));
         $this->addJs(array('jquery.ui.all.min.js', 'plugins/|masonry.pkgd.min.js', 'common_anim.js', 'main.js', 'view.js'));
     	return $this->parseHtmlByName('view.html', array(
     		'style_prefix' => $this->_oConfig->getPrefix('style'),

modules/boonex/timeline/js/main.js

@@ -18,7 +18,8 @@ BxTimelineMain.prototype.initMasonry = function() {
 
 	if(oItems.find('.bx-tl-item').length > 0) {
 		oItems.addClass(this.sClassMasonry).masonry({
-		  itemSelector: '.bx-tl-item'
+		  itemSelector: '.bx-tl-item',
+		  columnWidth: '.bx-tl-grid-sizer'
 		}).masonry('on', 'layoutComplete', function() {
 			$('img.bx-tl-item-image').each(function() {
 				var oImg = $(this);

modules/boonex/timeline/template/css/view-media-desktop.css

@@ -0,0 +1,5 @@
+@media (min-width: 1024px) {
+	.bx-tl-grid-sizer {
+		width: 33.3%;
+	}
+}

modules/boonex/timeline/template/css/view-media-tablet.css

@@ -0,0 +1,5 @@
+@media (min-width:720px) and (max-width:1024px) {
+	.bx-tl-grid-sizer { 
+		width: 50%;
+	}
+}

modules/boonex/timeline/template/css/view.css

@@ -10,6 +10,9 @@ div.bx-tl-items {
 	margin-left: -10px;
 	margin-right: -10px;
 }
+.bx-tl-grid-sizer {
+	width: 100%;
+}
 
 /*--- Load More Style ---*/
 div.bx-tl-load-more .bx-btn {
@@ -19,7 +22,6 @@ div.bx-tl-load-more .bx-btn {
 /*--- Item Style ---*/
 div.bx-tl-item {
 	position: relative;
-	width: 33.3%;
 }
 div.bx-tl-item-ind {
 	position: relative;

modules/boonex/timeline/template/text.html

@@ -1,4 +1,4 @@
-<div id="bx-timeline-item-__post_id__" class="__style_prefix__-item">
+<div id="bx-timeline-item-__post_id__" class="__style_prefix__-item bx-tl-grid-sizer">
 	<div class="__style_prefix__-item-ind bx-def-padding-sec">
 	    <div class="__style_prefix__-item-cnt bx-def-padding bx-def-round-corners bx-def-shadow">
 	    	<bx_if:show_image>