Ticket #2998 - layout updates.

modules/boonex/timeline/install/sql/enable.sql

@@ -263,7 +263,7 @@ VALUES (@iTypeId, 'bx_timeline_card', '_bx_timeline_options_category_card', 3);
 SET @iCategId = LAST_INSERT_ID();
 
 INSERT INTO `sys_options` (`name`, `value`, `category_id`, `caption`, `type`, `check`, `check_params`, `check_error`, `extra`, `order`) VALUES
-('bx_timeline_enable_dynamic_cards', 'on', @iCategId, '_bx_timeline_option_enable_dynamic_cards', 'checkbox', '', '', '', '', 1),
+('bx_timeline_enable_dynamic_cards', '', @iCategId, '_bx_timeline_option_enable_dynamic_cards', 'checkbox', '', '', '', '', 1),
 ('bx_timeline_videos_autoplay', 'off', @iCategId, '_bx_timeline_option_videos_autoplay', 'select', '', '', '', 'a:2:{s:6:"module";s:11:"bx_timeline";s:6:"method";s:27:"get_options_videos_autoplay";}', 2),
 ('bx_timeline_preload_comments', '0', @iCategId, '_bx_timeline_option_preload_comments', 'digit', '', '', '', '', 3),
 ('bx_timeline_attachments_layout', 'gallery', @iCategId, '_bx_timeline_option_attachments_layout', 'select', '', '', '', 'a:2:{s:6:"module";s:11:"bx_timeline";s:6:"method";s:30:"get_options_attachments_layout";}', 4);

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

@@ -245,32 +245,69 @@ div.bx-tl-item.bx-tl-blink div.bx-tl-blink-plate {
 }
 
 /*--- Item Sample Style ---*/
+div.bx-tl-item.bx-tl-sample div.bx-tl-is {
+    display: -webkit-flex;
+    display: flex;
+    -webkit-align-items: flex-start;
+    align-items: flex-start;
+}
+div.bx-tl-item.bx-tl-sample div.bx-tl-is.vcenter {
+    -webkit-align-items: center;
+    align-items: center;
+}
+div.bx-tl-item.bx-tl-sample div.bx-tl-is-avatar {
+    -webkit-flex-grow: 0;
+    flex-grow: 0;
+}
+div.bx-tl-item.bx-tl-sample div.bx-tl-is-content {
+    -webkit-flex-grow: 2;
+    flex-grow: 2;
+}
+
+div.bx-tl-item.bx-tl-sample .bx-tl-is-icon,
 div.bx-tl-item.bx-tl-sample .bx-tl-is-title,
+div.bx-tl-item.bx-tl-sample .bx-tl-is-aux > li,
 div.bx-tl-item.bx-tl-sample .bx-tl-is-paragraph > li {
     background: -webkit-gradient(linear,left top,right top,color-stop(25%,#f2f2f2),color-stop(37%,#e6e6e6),color-stop(63%,#f2f2f2));
     background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
     background-size: auto;
     background-size: 400% 100%;
 
-    -webkit-animation: ant-skeleton-loading 1.4s ease infinite;
+    -webkit-animation: bx-tl-sample-loading 1.4s ease infinite;
     animation: bx-tl-sample-loading 1.4s ease infinite;
 }
+div.bx-tl-item.bx-tl-sample .bx-tl-is-icon {
+    display: block;
+}
 div.bx-tl-item.bx-tl-sample .bx-tl-is-title {
     width: 100%;
     height: 1rem;
     margin: 0;
     padding: 0;
 }
+div.bx-tl-item.bx-tl-sample .bx-tl-is-aux,
 div.bx-tl-item.bx-tl-sample .bx-tl-is-paragraph {
-    margin: 1.5rem 0 0 0;
+    margin: 0;
     padding: 0;
 
     list-style: none;
 }
+div.bx-tl-item.bx-tl-sample .bx-tl-is-aux {
+    margin-top: 0.5rem;
+}
+div.bx-tl-item.bx-tl-sample .bx-tl-is-paragraph {
+    margin-top: 1.5rem;
+}
 div.bx-tl-item.bx-tl-sample .bx-tl-is-paragraph + .bx-tl-is-paragraph {
     margin-top: 2.5rem;
     text-align: right;
 }
+div.bx-tl-item.bx-tl-sample .bx-tl-is-aux > li {
+    width: 100%;
+    height: 0.75rem;
+
+    list-style: none;
+}
 div.bx-tl-item.bx-tl-sample .bx-tl-is-paragraph > li {
     width: 100%;
     height: 1rem;
@@ -280,6 +317,9 @@ div.bx-tl-item.bx-tl-sample .bx-tl-is-paragraph > li {
 div.bx-tl-item.bx-tl-sample .bx-tl-is-paragraph + .bx-tl-is-paragraph > li {
     display: inline-block;
 }
+div.bx-tl-item.bx-tl-sample .bx-tl-is-aux > li + li {
+    margin: 0.25rem 0 0 0;
+}
 div.bx-tl-item.bx-tl-sample .bx-tl-is-paragraph > li + li {
     margin: 1.0rem 0 0 0;
 }

modules/boonex/timeline/template/item_outline_sample.html

@@ -2,15 +2,29 @@
     <a name="timeline-event-__id__"></a>
     <div class="__style_prefix__-item-ind bx-def-padding-sec">
         <div class="__style_prefix__-item-cnt bx-def-box bx-def-padding bx-def-round-corners bx-def-color-bg-box">
-            <h3 class="__style_prefix__-is-title" style="width: 38%;"></h3>
-            <ul class="__style_prefix__-is-paragraph">
-                <li></li><li></li><li style="width: 61%;"></li>
-                <li></li><li style="width: 83%;"></li><li></li>
-                <li></li><li></li><li style="width: 55%;"></li>
-            </ul>
-            <ul class="__style_prefix__-is-paragraph">
-                <li style="width: 27%;"></li>
-            </ul>
+            <div class="__style_prefix__-is vcenter">
+                <div class="__style_prefix__-is-avatar bx-def-thumb-size">
+                    <span class="__style_prefix__-is-icon bx-def-thumb bx-def-thumb-size"></span>
+                </div>
+                <div class="__style_prefix__-is-content bx-def-margin-left">
+                    <h3 class="__style_prefix__-is-title" style="width: 58%;"></h3>
+                    <ul class="__style_prefix__-is-aux">
+                        <li style="width: 27%;"></li>
+                    </ul>
+                </div>
+            </div>
+            <div class="__style_prefix__-is">
+                <div class="__style_prefix__-is-content">
+                    <ul class="__style_prefix__-is-paragraph">
+                        <li></li><li></li><li style="width: 61%;"></li>
+                        <li></li><li style="width: 83%;"></li><li></li>
+                        <li></li><li></li><li style="width: 55%;"></li>
+                    </ul>
+                    <ul class="__style_prefix__-is-paragraph">
+                        <li style="width: 27%;"></li>
+                    </ul>
+                </div>
+            </div>
         </div>
     </div>
 </div>

modules/boonex/timeline/template/item_timeline_sample.html

@@ -6,7 +6,14 @@
         </div>
     </div>
     <div class="__style_prefix__-item-cnt bx-def-box bx-def-box-sizing bx-def-padding bx-def-round-corners bx-def-color-bg-box">
-        <h3 class="__style_prefix__-is-title" style="width: 38%;"></h3>
-        <ul class="__style_prefix__-is-paragraph"><li></li><li></li><li style="width: 61%;"></li></ul>
+        <div class="__style_prefix__-is">
+            <div class="__style_prefix__-is-avatar bx-def-thumb-size">
+                <span class="__style_prefix__-is-icon bx-def-thumb bx-def-thumb-size"></span>
+            </div>
+            <div class="__style_prefix__-is-content bx-def-margin-left">
+                <h3 class="__style_prefix__-is-title" style="width: 38%;"></h3>
+                <ul class="__style_prefix__-is-paragraph"><li></li><li></li><li style="width: 61%;"></li></ul>
+            </div>
+        </div>
     </div>
 </div>