Ticket #1118 - Possibility to customize the layout of Promoted and Pinned posts.

modules/boonex/timeline/classes/BxTimelineTemplate.php

@@ -896,10 +896,21 @@ class BxTimelineTemplate extends BxBaseModNotificationsTemplate
         $bViewItem = isset($aBrowseParams['view']) && $aBrowseParams['view'] == BX_TIMELINE_VIEW_ITEM;
         $bViewOutline = isset($aBrowseParams['view']) && $aBrowseParams['view'] == BX_TIMELINE_VIEW_OUTLINE;
 
+        $bPinned = (int)$aEvent['pinned'] > 0;
         $bPromoted = (int)$aEvent['promoted'] > 0;
-        $sClass = $bViewItem || !$bViewOutline ? 'bx-tl-view-sizer' : ($bPromoted ? 'bx-tl-grid-sizer-dbl' : 'bx-tl-grid-sizer');
+
+        $sClass = 'bx-tl-view-sizer';
+        if($bViewOutline) {
+            $sClass = 'bx-tl-grid-sizer';
+            if($bPinned)
+            	$sClass .= '-pnd';
+            if($bPromoted)
+            	$sClass .= '-pmd';
+        }
         if(!empty($aBrowseParams['blink']) && in_array($aEvent['id'], $aBrowseParams['blink']))
 			$sClass .= ' ' . $sStylePrefix . '-blink';
+        if($bPinned)
+            $sClass .= ' ' . $sStylePrefix . '-pinned';
         if($bPromoted)
             $sClass .= ' ' . $sStylePrefix . '-promoted';
 

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

@@ -1,19 +1,27 @@
 @media (min-width: 1024px) {
 	/*--- View Block Style ---*/
 	.bx-tl-grid-sizer,
-	.bx-tl-grid-sizer-dbl {
+	.bx-tl-grid-sizer-pnd,
+    .bx-tl-grid-sizer-pmd,
+    .bx-tl-grid-sizer-pnd-pmd {
 		width: 33.3%;
 	}
 
 	.bx-layout-column-wide .bx-tl-grid-sizer,
+	.bx-layout-column-wide .bx-tl-grid-sizer-pnd,
+	.bx-layout-column-wide .bx-tl-grid-sizer-pmd,
+	.bx-layout-column-wide .bx-tl-grid-sizer-pnd-pmd,
 	.bx-layout-column-half .bx-tl-grid-sizer,
-	.bx-layout-column-wide .bx-tl-grid-sizer-dbl,
-    .bx-layout-column-half .bx-tl-grid-sizer-dbl {
+    .bx-layout-column-half .bx-tl-grid-sizer-pnd,
+    .bx-layout-column-half .bx-tl-grid-sizer-pmd,
+    .bx-layout-column-half .bx-tl-grid-sizer-pnd-pmd {
 		width: 50%;
 	}
 
 	.bx-layout-column-thin .bx-tl-grid-sizer,
-	.bx-layout-column-thin .bx-tl-grid-sizer-dbl {
+	.bx-layout-column-thin .bx-tl-grid-sizer-pnd,
+	.bx-layout-column-thin .bx-tl-grid-sizer-pmd,
+	.bx-layout-column-thin .bx-tl-grid-sizer-pnd-pmd {
 		width: 100%;
 	}
 

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

@@ -1,13 +1,20 @@
 @media (min-width:720px) and (max-width:1024px) {
 	/*--- View Block Style ---*/
 	.bx-tl-grid-sizer,
-	.bx-tl-grid-sizer-dbl { 
+	.bx-tl-grid-sizer-pnd,
+	.bx-tl-grid-sizer-pmd,
+	.bx-tl-grid-sizer-pnd-pmd { 
 		width: 50%;
 	}
+
 	.bx-layout-column-half .bx-tl-grid-sizer, 
+	.bx-layout-column-half .bx-tl-grid-sizer-pnd, 
+	.bx-layout-column-half .bx-tl-grid-sizer-pmd, 
+	.bx-layout-column-half .bx-tl-grid-sizer-pnd-pmd,
 	.bx-layout-column-thin .bx-tl-grid-sizer,
-	.bx-layout-column-half .bx-tl-grid-sizer-dbl, 
-    .bx-layout-column-thin .bx-tl-grid-sizer-dbl {
+	.bx-layout-column-thin .bx-tl-grid-sizer-pnd,
+	.bx-layout-column-thin .bx-tl-grid-sizer-pmd, 
+    .bx-layout-column-thin .bx-tl-grid-sizer-pnd-pmd {
 		width: 100%;
 	}
 

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

@@ -6,7 +6,9 @@ div.bx-tl-view {
 	position: relative;
 }
 .bx-tl-grid-sizer,
-.bx-tl-grid-sizer-dbl {
+.bx-tl-grid-sizer-pnd,
+.bx-tl-grid-sizer-pmd,
+.bx-tl-grid-sizer-pnd-pmd {
 	width: 100%;
 }
 .bx-tl-view-sizer {