Ticket #3592 - Artificer: Showcase in Posts should use cards with the same height.

modules/base/text/classes/BxBaseModTextTemplate.php

@@ -690,12 +690,15 @@ class BxBaseModTextTemplate extends BxBaseModGeneralTemplate
             }
         }
 
+        $bBadgesSingle = isset($aParams['badges_single']) ? $aParams['badges_single'] : false;
+        $bBadgesCompact = isset($aParams['badges_compact']) ? $aParams['badges_compact'] : true;
+
         $aTmplVars = array (
             'class' => $this->_getUnitClass($aData,(isset($aParams['template_name']) ? $aParams['template_name'] : '')),
             'id' => $aData[$CNF['FIELD_ID']],
             'content_url' => $sUrl,
             'title' => $sTitle,
-            'badges' => $oModule->serviceGetBadges($aData[$CNF['FIELD_ID']], false, true),
+            'badges' => $oModule->serviceGetBadges($aData[$CNF['FIELD_ID']], $bBadgesSingle, $bBadgesCompact),
             'title_attr' => bx_html_attribute($sTitle),
             'summary' => $sSummary,
             'text' => $sText,
@@ -767,6 +770,11 @@ class BxBaseModTextTemplate extends BxBaseModGeneralTemplate
         return array($oTranscoder, $oTranscoderView);
     }
 
+    protected function _getUnitName($aData, $sTemplateName = 'unit.html')
+    {
+        return trim(str_replace('.html', '', $sTemplateName));
+    }
+
     protected function _getUnitClass($aData, $sTemplateName = 'unit.html')
     {
         $sResult = '';

modules/boonex/artificer/data/template/bx_posts/unit_gallery.html

@@ -0,0 +1,25 @@
+<div class="__class__ bx-base-text-unit bx-base-text-unit-gallery bx-def-gal-unit-size flex flex-col w-full p-2 box-border">
+    <div class="bx-base-text-unit-cnt flex flex-col h-full ring-1 ring-gray-200 dark:ring-gray-700 overflow-hidden bg-white dark:bg-gray-800 rounded">
+        <bx_if:thumb>
+            <a href="__content_url__" title="__summary_attr__">
+                <div class="shrink-0 m-1">
+                    <img class="h-48 w-full object-cover rounded" src="__gallery_url__" alt="">
+                </div>
+            </a>
+        </bx_if:thumb>
+        <bx_if:no_thumb>
+            <div class="bx-def-gal-img-column shrink-0 m-1">
+                <div class="bx-base-text-unit-no-thumb flex flex-col items-center justify-center h-48 p-4 bg-gradient-to-b from-red-400 to-red-500 box-border rounded-md"></div>
+            </div>
+        </bx_if:no_thumb>
+        <div class="bx-base-text-unit-text flex flex-col flex-1 p-3 md:p-4 lg:p-6 pt-1 md:pt-2 lg:pt-3 box-border">
+            <div class="bx-base-text-unit-badges pb-1 lg:pb-2">__badges__</div>
+            <div class="bx-base-text-unit-title flex-inline flex-2 max-h-14 text-ellipsis overflow-hidden">
+                <a href="__content_url__" class="text-lg lg:text-xl font-semibold text-gray-700 group-hover:text-gray-900 dark:text-gray-200 dark:group-hover:text-white text-left">__title__</a>
+            </div>
+            <div class="bx-base-text-unit-info flex flex-1 flex-col justify-end text-sm text-gray-500 dark:text-gray-400">
+                <bx_if:meta><div class="bx-base-general-unit-meta pt-2">__meta__</div></bx_if:meta>
+            </div>
+        </div>
+    </div>
+</div>

modules/boonex/artificer/data/template/mod_general/css/main.css

@@ -41,10 +41,12 @@ div.bx-badge {
 	text-overflow: ellipsis; 
     overflow: hidden;
 }
-div.bx-badges-list div.bx-badge{
+div.bx-badges-list div.bx-badge {
     margin:0 0.25rem;
 }
-
+div.bx-badges-list div.bx-badge:first-child {
+    margin-left: 0;
+}
 img.bx-badge-icon,
 svg.bx-badge-icon{
     width: 16px !important;

modules/boonex/artificer/data/template/mod_text/css/main.css

@@ -19,6 +19,23 @@
 
     overflow:hidden;
 }
+.bx-base-unit-showcase-wrapper .flickity-slider {
+    display: -webkit-flex;
+    display: flex;
+    -webkit-align-items: stretch;
+    align-items: stretch;
+    -webkit-flex-wrap: wrap;
+    flex-wrap: wrap;
+    -webkit-justify-content: flex-start;
+    justify-content: flex-start;
+}
+.bx-base-unit-showcase-wrapper .bx-base-text-unit-showcase {
+    margin: 0;
+    padding: 0.25rem;
+}
+.bx-base-unit-showcase-wrapper.bx-sc-enabled .bx-base-text-unit-showcase {
+    height: 100%;
+}
 
 /*-- MEDIA: phone2 --*/
 .bx-media-phone2 .bx-layout-column-half .bx-base-text-unit-gallery-wrapper .bx-base-text-unit-gallery,

modules/boonex/posts/classes/BxPostsTemplate.php

@@ -21,6 +21,15 @@ class BxPostsTemplate extends BxBaseModTextTemplate
         parent::__construct($oConfig, $oDb);
     }
 
+    protected function getUnit ($aData, $aParams = array())
+    {
+        $sUnitName = $this->_getUnitName($aData, isset($aParams['template_name']) ? $aParams['template_name'] : '');
+        if(in_array($sUnitName, ['unit_gallery', 'unit_showcase']))
+            $aParams['badges_compact'] = false;
+
+        return parent::getUnit($aData, $aParams);
+    }
+
     /**
      * Use Gallery image for both because currently there is no Unit types with small thumbnails.
      */

plugins_public/tailwind/css/tailwind.css

@@ -577,4 +577,9 @@
     .bx-artificer .bx-tl-view.bx-tl-view-timeline .bx-tl-cnt .bx-tl-items:before {
         @apply bg-gray-200 dark:bg-gray-700;
     }
+
+    /* 3d Party: Flickity */
+    .bx-artificer .flickity-button {
+        @apply text-gray-700 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 opacity-75 hover:opacity-100;
+    }
 }

plugins_public/tailwind/js/tailwind.config.js

@@ -56,6 +56,8 @@ module.exports = {
         'bx-base-general-unit-meta-username',
 
         'sys-auth-block', 'sys-auth-compact-container',
+        
+        'flickity-button',
     ]
   },
   darkMode: 'media', // false or 'media' or 'class'