Ticket #5519 - Missing space in view comment block.

modules/boonex/artificer/data/template/system/css/common.css

@@ -89,7 +89,7 @@ import url(../../../../../../../template/css/common.css);
 
 .bx-dbt-cnt {
     display: flex;
-    align-items: center;
+    flex-direction: column;
 }
 
 .bx-db-menu {

modules/boonex/lucid/data/template/system/designbox_1.html

@@ -1,6 +1,22 @@
 <!-- Design Box 1 [start]: Content + title + background -->
 <div class="bx-db-container bx-dbc-nopadding bx-def-image-bg-block bx-def-color-bg-block bx-def-border-block bx-shadow-block">
-    <div class="bx-db-header"><div class="bx-db-title">__title__</div>__caption_item__<div class="bx-clear"></div></div>
+    <div class="bx-db-header">
+        <div class="bx-db-title flex items-center space-x-4">
+            <bx_if:show_db_icon>
+                <div class="bx-dbt-ic grow-0"><i class="sys-icon __icon__"></i></div>
+            </bx_if:show_db_icon>
+            <bx_if:show_db_icon_html>
+                <div class="bx-dbt-ic grow-0">__icon_html__</div>
+            </bx_if:show_db_icon_html>
+            <div class="bx-dbt-cnt">
+                <div class="bx-dbt-ttl">__title__</div>
+                <bx_if:show_db_description>
+                    <div class="bx-dbt-dsc text-sm font-normal">__description__</div>
+                </bx_if:show_db_description>
+            </div>
+        </div>__caption_item__
+        <div class="bx-clear"></div>
+    </div>
     <div class="bx-db-divider bx-def-hr"></div>
     <div class="bx-db-content bx-clearfix">__designbox_content__</div>
 </div>

modules/boonex/lucid/data/template/system/designbox_11.html

@@ -1,6 +1,22 @@
 <!-- Design Box 11 [start]: Content + title + background + padding -->
 <div class="bx-db-container bx-def-image-bg-block bx-def-color-bg-block bx-def-border-block bx-shadow-block">
-    <div class="bx-db-header"><div class="bx-db-title">__title__</div>__caption_item__<div class="bx-clear"></div></div>
+    <div class="bx-db-header">
+        <div class="bx-db-title flex items-center space-x-4">
+            <bx_if:show_db_icon>
+                <div class="bx-dbt-ic grow-0"><i class="sys-icon __icon__"></i></div>
+            </bx_if:show_db_icon>
+            <bx_if:show_db_icon_html>
+                <div class="bx-dbt-ic grow-0">__icon_html__</div>
+            </bx_if:show_db_icon_html>
+            <div class="bx-dbt-cnt">
+                <div class="bx-dbt-ttl">__title__</div>
+                <bx_if:show_db_description>
+                    <div class="bx-dbt-dsc text-sm font-normal">__description__</div>
+                </bx_if:show_db_description>
+            </div>
+        </div>__caption_item__
+        <div class="bx-clear"></div>
+    </div>
     <div class="bx-db-divider bx-def-hr"></div>
     <div class="bx-db-content bx-content-padding-block bx-clearfix">__designbox_content__</div>
 </div>

modules/boonex/lucid/data/template/system/designbox_14.html

@@ -1,6 +1,22 @@
 <!-- Design Box 14 [start]: Content + title + padding -->
 <div class="bx-db-container bx-dbc-nobg">
-    <div class="bx-db-header"><div class="bx-db-title">__title__</div>__caption_item__<div class="bx-clear"></div></div>
+    <div class="bx-db-header">
+        <div class="bx-db-title flex items-center space-x-4">
+            <bx_if:show_db_icon>
+                <div class="bx-dbt-ic grow-0"><i class="sys-icon __icon__"></i></div>
+            </bx_if:show_db_icon>
+            <bx_if:show_db_icon_html>
+                <div class="bx-dbt-ic grow-0">__icon_html__</div>
+            </bx_if:show_db_icon_html>
+            <div class="bx-dbt-cnt">
+                <div class="bx-dbt-ttl">__title__</div>
+                <bx_if:show_db_description>
+                    <div class="bx-dbt-dsc text-sm font-normal">__description__</div>
+                </bx_if:show_db_description>
+            </div>
+        </div>__caption_item__
+        <div class="bx-clear"></div>
+    </div>
     <div class="bx-db-divider bx-def-hr"></div>
     <div class="bx-db-content bx-content-padding-block bx-clearfix">__designbox_content__</div>
 </div>

modules/boonex/lucid/data/template/system/designbox_4.html

@@ -1,6 +1,22 @@
 <!-- Design Box 4 [start]: Content + title -->
 <div class="bx-db-container bx-dbc-nopadding bx-dbc-nobg">
-    <div class="bx-db-header"><div class="bx-db-title">__title__</div>__caption_item__<div class="bx-clear"></div></div>
+    <div class="bx-db-header">
+        <div class="bx-db-title flex items-center space-x-4">
+            <bx_if:show_db_icon>
+                <div class="bx-dbt-ic grow-0"><i class="sys-icon __icon__"></i></div>
+            </bx_if:show_db_icon>
+            <bx_if:show_db_icon_html>
+                <div class="bx-dbt-ic grow-0">__icon_html__</div>
+            </bx_if:show_db_icon_html>
+            <div class="bx-dbt-cnt">
+                <div class="bx-dbt-ttl">__title__</div>
+                <bx_if:show_db_description>
+                    <div class="bx-dbt-dsc text-sm font-normal">__description__</div>
+                </bx_if:show_db_description>
+            </div>
+        </div>__caption_item__
+        <div class="bx-clear"></div>
+    </div>
     <div class="bx-db-divider bx-def-hr"></div>
     <div class="bx-db-content bx-clearfix">__designbox_content__</div>
 </div>

modules/boonex/protean/data/template/system/designbox_1.html

@@ -1,6 +1,22 @@
 <!-- Design Box 1 [start]: Content + title + background -->
 <div class="bx-db-container bx-dbc-nopadding bx-def-image-bg-block bx-def-color-bg-block bx-def-border-block bx-shadow-block">
-    <div class="bx-db-header"><div class="bx-db-title">__title__</div>__caption_item__<div class="bx-clear"></div></div>
+    <div class="bx-db-header">
+        <div class="bx-db-title flex items-center space-x-4">
+            <bx_if:show_db_icon>
+                <div class="bx-dbt-ic grow-0"><i class="sys-icon __icon__"></i></div>
+            </bx_if:show_db_icon>
+            <bx_if:show_db_icon_html>
+                <div class="bx-dbt-ic grow-0">__icon_html__</div>
+            </bx_if:show_db_icon_html>
+            <div class="bx-dbt-cnt">
+                <div class="bx-dbt-ttl">__title__</div>
+                <bx_if:show_db_description>
+                    <div class="bx-dbt-dsc text-sm font-normal">__description__</div>
+                </bx_if:show_db_description>
+            </div>
+        </div>__caption_item__
+        <div class="bx-clear"></div>
+    </div>
     <div class="bx-db-divider bx-def-hr"></div>
     <div class="bx-db-content bx-clearfix">__designbox_content__</div>
 </div>

modules/boonex/protean/data/template/system/designbox_11.html

@@ -1,6 +1,22 @@
 <!-- Design Box 11 [start]: Content + title + background + padding -->
 <div class="bx-db-container bx-def-image-bg-block bx-def-color-bg-block bx-def-border-block bx-shadow-block">
-    <div class="bx-db-header"><div class="bx-db-title">__title__</div>__caption_item__<div class="bx-clear"></div></div>
+    <div class="bx-db-header">
+        <div class="bx-db-title flex items-center space-x-4">
+            <bx_if:show_db_icon>
+                <div class="bx-dbt-ic grow-0"><i class="sys-icon __icon__"></i></div>
+            </bx_if:show_db_icon>
+            <bx_if:show_db_icon_html>
+                <div class="bx-dbt-ic grow-0">__icon_html__</div>
+            </bx_if:show_db_icon_html>
+            <div class="bx-dbt-cnt">
+                <div class="bx-dbt-ttl">__title__</div>
+                <bx_if:show_db_description>
+                    <div class="bx-dbt-dsc text-sm font-normal">__description__</div>
+                </bx_if:show_db_description>
+            </div>
+        </div>__caption_item__
+        <div class="bx-clear"></div>
+    </div>
     <div class="bx-db-divider bx-def-hr"></div>
     <div class="bx-db-content bx-content-padding-block bx-clearfix">__designbox_content__</div>
 </div>

modules/boonex/protean/data/template/system/designbox_14.html

@@ -1,6 +1,22 @@
 <!-- Design Box 14 [start]: Content + title + padding -->
 <div class="bx-db-container bx-dbc-nobg">
-    <div class="bx-db-header"><div class="bx-db-title">__title__</div>__caption_item__<div class="bx-clear"></div></div>
+    <div class="bx-db-header">
+        <div class="bx-db-title flex items-center space-x-4">
+            <bx_if:show_db_icon>
+                <div class="bx-dbt-ic grow-0"><i class="sys-icon __icon__"></i></div>
+            </bx_if:show_db_icon>
+            <bx_if:show_db_icon_html>
+                <div class="bx-dbt-ic grow-0">__icon_html__</div>
+            </bx_if:show_db_icon_html>
+            <div class="bx-dbt-cnt">
+                <div class="bx-dbt-ttl">__title__</div>
+                <bx_if:show_db_description>
+                    <div class="bx-dbt-dsc text-sm font-normal">__description__</div>
+                </bx_if:show_db_description>
+            </div>
+        </div>__caption_item__
+        <div class="bx-clear"></div>
+    </div>
     <div class="bx-db-divider bx-def-hr"></div>
     <div class="bx-db-content bx-content-padding-block bx-clearfix">__designbox_content__</div>
 </div>

modules/boonex/protean/data/template/system/designbox_4.html

@@ -1,6 +1,22 @@
 <!-- Design Box 4 [start]: Content + title -->
 <div class="bx-db-container bx-dbc-nopadding bx-dbc-nobg">
-    <div class="bx-db-header"><div class="bx-db-title">__title__</div>__caption_item__<div class="bx-clear"></div></div>
+    <div class="bx-db-header">
+        <div class="bx-db-title flex items-center space-x-4">
+            <bx_if:show_db_icon>
+                <div class="bx-dbt-ic grow-0"><i class="sys-icon __icon__"></i></div>
+            </bx_if:show_db_icon>
+            <bx_if:show_db_icon_html>
+                <div class="bx-dbt-ic grow-0">__icon_html__</div>
+            </bx_if:show_db_icon_html>
+            <div class="bx-dbt-cnt">
+                <div class="bx-dbt-ttl">__title__</div>
+                <bx_if:show_db_description>
+                    <div class="bx-dbt-dsc text-sm font-normal">__description__</div>
+                </bx_if:show_db_description>
+            </div>
+        </div>__caption_item__
+        <div class="bx-clear"></div>
+    </div>
     <div class="bx-db-divider bx-def-hr"></div>
     <div class="bx-db-content bx-clearfix">__designbox_content__</div>
 </div>

template/css/common.css

@@ -256,7 +256,7 @@ blockquote {
 
 .bx-dbt-cnt {
     display: flex;
-    align-items: center;
+    flex-direction: column;
 }
 
 .bx-db-menu {

template/designbox_1.html

@@ -9,7 +9,7 @@
                 <div class="bx-dbt-ic grow-0">__icon_html__</div>
             </bx_if:show_db_icon_html>
             <div class="bx-dbt-cnt">
-                __title__
+                <div class="bx-dbt-ttl">__title__</div>
                 <bx_if:show_db_description>
                     <div class="bx-dbt-dsc text-sm font-normal">__description__</div>
                 </bx_if:show_db_description>

template/designbox_11.html

@@ -9,7 +9,7 @@
                 <div class="bx-dbt-ic grow-0">__icon_html__</div>
             </bx_if:show_db_icon_html>
             <div class="bx-dbt-cnt">
-                __title__
+                <div class="bx-dbt-ttl">__title__</div>
                 <bx_if:show_db_description>
                     <div class="bx-dbt-dsc text-sm font-normal">__description__</div>
                 </bx_if:show_db_description>

template/designbox_14.html

@@ -9,7 +9,7 @@
                 <div class="bx-dbt-ic grow-0">__icon_html__</div>
             </bx_if:show_db_icon_html>
             <div class="bx-dbt-cnt">
-                __title__
+                <div class="bx-dbt-ttl">__title__</div>
                 <bx_if:show_db_description>
                     <div class="bx-dbt-dsc text-sm font-normal">__description__</div>
                 </bx_if:show_db_description>

template/designbox_4.html

@@ -9,7 +9,7 @@
                 <div class="bx-dbt-ic grow-0">__icon_html__</div>
             </bx_if:show_db_icon_html>
             <div class="bx-dbt-cnt">
-                __title__
+                <div class="bx-dbt-ttl">__title__</div>
                 <bx_if:show_db_description>
                     <div class="bx-dbt-dsc text-sm font-normal">__description__</div>
                 </bx_if:show_db_description>