Ticket #3445 - Timeline: File attachements should use Flickity as others.

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

@@ -172,21 +172,22 @@ div.bx-tl-view div.bx-tl-item-videos.bx-tl-iv-single div.bx-tl-item-video video
 }
 
 /*+++ Item Attachment +++*/
-div.bx-tl-view-timeline div.bx-tl-item-attachment,
-div.bx-tl-view-outline div.bx-tl-item-attachment,
-div.bx-tl-view-item div.bx-tl-item-attachment,
-div.bx-tl-view-search div.bx-tl-item-attachment {
+div.bx-tl-view div.bx-tl-item-attachments {
     position: relative;
-    display: -webkit-flex;
-    display: flex;
+    white-space: nowrap;
+    overflow-x: auto;
+}
+div.bx-tl-view div.bx-tl-item-attachments div.bx-tl-item-attachment {
+    position: relative;
+    display: -webkit-inline-flex;
+    display: inline-flex;
     -webkit-justify-content: center;
     justify-content: center;  
 
     width: 100%;
+    vertical-align: middle;
 }
-div.bx-tl-view-timeline div.bx-tl-item-attachments.bx-tl-ia-gallery div.bx-tl-item-attachment img,
-div.bx-tl-view-item div.bx-tl-item-attachments.bx-tl-ia-gallery div.bx-tl-item-attachment img,
-div.bx-tl-view-search div.bx-tl-item-attachments.bx-tl-ia-gallery div.bx-tl-item-attachment img {
+div.bx-tl-view div.bx-tl-item-attachments div.bx-tl-item-attachment img {
     position: relative;
     display: block;
     max-width: 100%;
@@ -218,12 +219,6 @@ div.bx-tl-item-attachment .bx-tl-iv-duration {
     background-color: rgba(255, 255, 255, 0.8);
 }
 
-/*+++ Files +++*/
-div.bx-tl-view-timeline div.bx-tl-item-attachments.bx-tl-iaf-gallery div.bx-tl-item-attachment,
-div.bx-tl-view-item div.bx-tl-item-attachments.bx-tl-iaf-gallery div.bx-tl-item-attachment,
-div.bx-tl-view-search div.bx-tl-item-attachments.bx-tl-iaf-gallery div.bx-tl-item-attachment {
-    width: auto;
-}
 
 /*+++ Showcase Layout +++*/
 div.bx-tl-item-attachments.bx-tl-ia-showcase {

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

@@ -15,6 +15,13 @@
         </bx_repeat:items>
     </div>
 </bx_if:show_videos>
+<bx_if:show_files>
+    <div class="__style_prefix__-item-files __style_prefix__-if-main __style_prefix__-if-__display__ mx-1 mb-3 lg:mb-4 rounded">
+        <bx_repeat:items>
+            <div class="__style_prefix__-item-file rounded">__item__</div>
+        </bx_repeat:items>
+    </div>
+</bx_if:show_files>
 <div class="__style_prefix__-item-text group px-3 lg:px-4 pt-0">
     <bx_if:show_title>
         <div class="__style_prefix__-title text-lg lg:text-xl font-semibold text-gray-700 group-hover:text-gray-900 dark:text-gray-300 dark:group-hover:text-white mb-1 lg:mb-2 ">__title__</div>
@@ -38,7 +45,7 @@
     </div>
 </bx_if:show_links>
 <bx_if:show_attachments_files>
-    <div class="__style_prefix__-item-attachments __style_prefix__-iaf-__display__ __style_prefix__-iaf-i__count__ flex justify-start px-3 lg:px-4 mt-3 lg:mt-4 space-x-2">
+    <div class="__style_prefix__-item-attachments __style_prefix__-iaf-__display__ __style_prefix__-iaf-i__count__ mx-1 mb-3 lg:mb-4">
         <bx_repeat:items>
             <div class="__style_prefix__-item-attachment__class__">__item__</div>
         </bx_repeat:items>

modules/boonex/timeline/js/view.js

@@ -48,7 +48,7 @@ function BxTimelineView(oOptions) {
         window.glBxTimelineVapPlayers = [];
 
     //--- Use Scroll for Attachments.
-    this._bScrollForFiles = false;
+    this._bScrollForFiles = true;
 
     //--- Get currently active 'view'.
     this.initView();

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

@@ -792,18 +792,12 @@ div.bx-tl-view div.bx-tl-item-videos.bx-tl-iv-single div.bx-tl-item-video video
 }
 
 /*+++ Item Attachment +++*/
-div.bx-tl-view-timeline div.bx-tl-item-attachments,
-div.bx-tl-view-outline div.bx-tl-item-attachments,
-div.bx-tl-view-item div.bx-tl-item-attachments,
-div.bx-tl-view-search div.bx-tl-item-attachments {
+div.bx-tl-view div.bx-tl-item-attachments {
     position: relative;
     white-space: nowrap;
     overflow-x: auto;
 }
-div.bx-tl-view-timeline div.bx-tl-item-attachment,
-div.bx-tl-view-outline div.bx-tl-item-attachment,
-div.bx-tl-view-item div.bx-tl-item-attachment,
-div.bx-tl-view-search div.bx-tl-item-attachment {
+div.bx-tl-view div.bx-tl-item-attachments div.bx-tl-item-attachment {
     position: relative;
     display: -webkit-inline-flex;
     display: inline-flex;
@@ -813,9 +807,7 @@ div.bx-tl-view-search div.bx-tl-item-attachment {
     width: 100%;
     vertical-align: middle;
 }
-div.bx-tl-view-timeline div.bx-tl-item-attachments.bx-tl-ia-gallery div.bx-tl-item-attachment img,
-div.bx-tl-view-item div.bx-tl-item-attachments.bx-tl-ia-gallery div.bx-tl-item-attachment img,
-div.bx-tl-view-search div.bx-tl-item-attachments.bx-tl-ia-gallery div.bx-tl-item-attachment img {
+div.bx-tl-view div.bx-tl-item-attachments div.bx-tl-item-attachment img {
     position: relative;
     display: block;
     max-width: 100%;
@@ -847,14 +839,6 @@ div.bx-tl-item-attachment .bx-tl-iv-duration {
     background-color: rgba(255, 255, 255, 0.8);
 }
 
-/*+++ Files +++*/
-div.bx-tl-view-timeline div.bx-tl-item-attachments.bx-tl-iaf-gallery div.bx-tl-item-attachment,
-div.bx-tl-view-item div.bx-tl-item-attachments.bx-tl-iaf-gallery div.bx-tl-item-attachment,
-div.bx-tl-view-search div.bx-tl-item-attachments.bx-tl-iaf-gallery div.bx-tl-item-attachment {
-    display: inline-block;
-    width: auto;
-}
-
 
 /*+++ Showcase Layout +++*/
 div.bx-tl-item-attachments.bx-tl-ia-showcase {

modules/boonex/timeline/template/type_post.html

@@ -16,9 +16,9 @@
     </div>
 </bx_if:show_videos>
 <bx_if:show_files>
-    <div class="__style_prefix__-item-images __style_prefix__-ii-main __style_prefix__-ii-__display__ bx-def-margin-top">
+    <div class="__style_prefix__-item-files __style_prefix__-if-main __style_prefix__-if-__display__ bx-def-margin-top">
         <bx_repeat:items>
-            <div class="__style_prefix__-item-image">__item__</div>
+            <div class="__style_prefix__-item-file">__item__</div>
         </bx_repeat:items>
     </div>
 </bx_if:show_files>