Ticket #4406 - Timeline: Need to truncate usernames.

modules/boonex/artificer/data/template/bx_timeline/css/view.css

@@ -32,6 +32,17 @@ import url(../../../../../timeline/template/css/view.css);
     display: none;
 }
 
+/*--- View Block Style ---*/
+.bx-tl-grid-sizer {
+    width: 100%;
+}
+.bx-tl-grid-item-sizer {
+    width: 100%;
+}
+.bx-tl-view-sizer {
+    width: 100%;
+}
+
 /*--- Filters Style ---*/
 div.bx-tl-view-filters {
     min-width: 14rem;

modules/boonex/artificer/data/template/bx_timeline/item_outline.html

@@ -15,9 +15,9 @@
             </bx_if:show_note>
             <div class="__style_prefix__-item-owner flex items-center px-3 md:px-4 mt-3 md:mt-4 __class_owner__"> 
                 <div class="__style_prefix__-owner-avatar flex-shrink-0">__item_owner_unit__</div>
-                <div class="__style_prefix__-owner-info ml-3">
+                <div class="__style_prefix__-owner-info min-w-0 ml-3 overflow-hidden">
                     <div class="__style_prefix__-owner-name flex flex-wrap items-center">
-                        <a href="__item_owner_url__" class="__style_prefix__-owner-name bx-def-font-author mr-1 hover:text-gray-900 dark:hover:text-white whitespace-nowrap" title="__item_owner_title__">__item_owner_name__</a>
+                        <a href="__item_owner_url__" class="__style_prefix__-owner-name bx-def-font-author flex items-center min-w-0 mr-1 hover:text-gray-900 dark:hover:text-white" title="__item_owner_title__"><div class="truncate">__item_owner_name__</div>__item_owner_badges__</a>
                         <bx_if:show_owner_actions>
                             <span class="__style_prefix__-owner-actions bx-def-font-meta">
                                 <bx_repeat:owner_actions>

modules/boonex/artificer/data/template/bx_timeline/item_timeline.html

@@ -14,9 +14,9 @@
         </bx_if:show_note>
         <div class="__style_prefix__-item-owner flex items-center px-3 md:px-4 mt-3 md:mt-4 __class_owner__"> 
             <div class="__style_prefix__-owner-avatar flex-shrink-0">__item_owner_unit__</div>
-            <div class="__style_prefix__-owner-info ml-3">
+            <div class="__style_prefix__-owner-info min-w-0 ml-3 overflow-hidden">
                 <div class="__style_prefix__-owner-name flex flex-wrap items-center">
-                    <a href="__item_owner_url__" class="__style_prefix__-owner-name bx-def-font-author flex items-center mr-1 hover:text-gray-900 dark:hover:text-white whitespace-nowrap" title="__item_owner_title__">__item_owner_name__</a> 
+                    <a href="__item_owner_url__" class="__style_prefix__-owner-name bx-def-font-author flex items-center min-w-0 mr-1 hover:text-gray-900 dark:hover:text-white" title="__item_owner_title__"><div class="truncate">__item_owner_name__</div>__item_owner_badges__</a> 
                     <bx_if:show_owner_actions>
                         <span class="__style_prefix__-owner-actions bx-def-font-meta">
                             <bx_repeat:owner_actions>

modules/boonex/lucid/data/template/bx_timeline/css/view.less

@@ -13,9 +13,6 @@ div.bx-tl-view div.bx-tl-item .bx-tl-item-cnt {
     overflow: visible;
 }
 
-div.bx-tl-item div.bx-tl-owner-name > * {
-    display: inline-block;
-}
 div.bx-tl-view div.bx-tl-item div.bx-tl-owner-name .bx-tl-hot img {
     display: inline-block;
     vertical-align: sub;

modules/boonex/protean/data/template/bx_timeline/css/view.less

@@ -9,11 +9,6 @@ div.bx-tl-item-text div.bx-tl-content.bx-tl-overflow:before {
     background: linear-gradient(to bottom, @bx-color-box-transparent, @bx-color-box);
 }
 
-/*--- Item Owner Styles ---*/
-div.bx-tl-item div.bx-tl-owner-name > * {
-    display: inline-block;
-}
-
 /*--- Meta and Activity Styles ---*/
 div.bx-tl-item-meta-activity {
     display: -webkit-flex;

modules/boonex/timeline/classes/BxTimelineTemplate.php

@@ -1799,7 +1799,8 @@ class BxTimelineTemplate extends BxBaseModNotificationsTemplate
             'item_icon' => $sIcon,
             'item_owner_url' => $sAuthorUrl,
             'item_owner_title' => bx_html_attribute($sAuthorName),
-            'item_owner_name' => $sAuthorName .' '. $sAuthorBadges,
+            'item_owner_name' => $sAuthorName,
+            'item_owner_badges' => $sAuthorBadges,
             'item_owner_unit' => $sAuthorUnit,
             'item_view_url' => $this->_oConfig->getItemViewUrl($aEvent),
             'item_date' => bx_time_js($aEvent['date']),

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

@@ -352,10 +352,6 @@ div.bx-tl-item div.bx-tl-owner-name .bx-badges-list{
     display:inline-block;
 }
 
-div.bx-tl-item div.bx-tl-owner-name > * {
-    vertical-align: middle;
-}
-
 div.bx-tl-item div.bx-tl-owner-name a.bx-tl-owner-name,
 div.bx-tl-item div.bx-tl-owner-name .bx-tl-timeline-owner-name a.bx-tl-ton-item {
     font-weight: 700;

modules/boonex/timeline/template/item_outline.html

@@ -17,7 +17,7 @@
                 <div class="__style_prefix__-owner-avatar bx-def-thumb-size flex-shrink-0">__item_owner_unit__</div>
                 <div class="__style_prefix__-owner-info bx-def-thumb-size-min-height flex-auto flex flex-col items-start justify-center min-w-0 pl-2 lg:pl-4">
                     <div class="__style_prefix__-owner-name bx-def-font-middle bx-def-font-grayed">
-                        <a href="__item_owner_url__" class="__style_prefix__-owner-name" title="__item_owner_title__">__item_owner_name__</a>
+                        <a href="__item_owner_url__" class="__style_prefix__-owner-name flex items-center min-w-0" title="__item_owner_title__"><div class="truncate">__item_owner_name__</div>__item_owner_badges__</a>
                         <bx_if:show_owner_actions>
                             <span class="__style_prefix__-owner-actions">
                                 <bx_repeat:owner_actions>

modules/boonex/timeline/template/item_search.html

@@ -12,9 +12,8 @@
                         </bx_repeat:notes>
                     </div>
                 </bx_if:show_note>
-                <!-- NOTE: Spaces after and between elements in 'owner-name' DIV are needed for better line folding -->
                 <div class="__style_prefix__-owner-name bx-def-font-middle bx-def-font-light bx-def-font-grayed">
-                    <a href="__item_owner_url__" class="__style_prefix__-owner-name" title="__item_owner_title__">__item_owner_name__</a>
+                    <a href="__item_owner_url__" class="__style_prefix__-owner-name flex items-center min-w-0" title="__item_owner_title__"><div class="truncate">__item_owner_name__</div>__item_owner_badges__</a>
                 </div>
                 <div class="__style_prefix__-item-meta bx-def-font-middle bx-def-font-grayed">
                     <bx_if:show_menu_item_meta>

modules/boonex/timeline/template/item_timeline.html

@@ -16,7 +16,7 @@
             <div class="__style_prefix__-owner-avatar bx-def-thumb-size flex-shrink-0">__item_owner_unit__</div>
             <div class="__style_prefix__-owner-info bx-def-thumb-size-min-height flex-auto flex flex-col items-start justify-center min-w-0 pl-2 lg:pl-4">
                 <div class="__style_prefix__-owner-name bx-def-font-middle bx-def-font-grayed">
-                    <a href="__item_owner_url__" class="__style_prefix__-owner-name" title="__item_owner_title__">__item_owner_name__</a> 
+                    <a href="__item_owner_url__" class="__style_prefix__-owner-name flex items-center min-w-0" title="__item_owner_title__"><div class="truncate">__item_owner_name__</div>__item_owner_badges__</a>
                     <bx_if:show_owner_actions>
                         <span class="__style_prefix__-owner-actions">
                             <bx_repeat:owner_actions>