#5039 Timeline: gallery redesign

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

@@ -135,10 +135,6 @@ div.bx-tl-item div.bx-tl-item-activity.bx-tl-ia-counters .bx-menu-custom.bx-menu
     width: 2.5rem;
     height: 2.5rem;
 }
-.bx-tl-item-content video,
-.bx-tl-item-attachment:not(.flickity-cell) img{
-    border-radius: .25rem;
-}
 
 /*--- Menu: Item Manage ---*/
 .bx-menu-object-bx_timeline_menu_item_manage .sys-action-do-text {
@@ -219,12 +215,33 @@ div.bx-tl-view div.bx-tl-item-attachments {
 }
 
 div.bx-tl-view div.bx-tl-item-attachments div.bx-tl-item-attachment {
-    display: inline-block;
+    height:auto;
+    background-color:#000;
 }
-div.bx-tl-view div.bx-tl-item-attachments div.bx-tl-item-attachment,
 div.bx-tl-view div.bx-tl-item-attachments div.bx-tl-item-attachment img {
-    height: 11.25rem;
+    height: auto;
+    max-height:25.5rem;
+    max-width:100%;
+    margin-left:auto;
+    margin-right:auto;
+}
+.bx-tl-item-attachments.bx-tl-ia-gallery {
+    text-align:center;
+}
+
+div.bx-tl-view div.bx-tl-item-attachments .flickity-slider div.bx-tl-item-attachment {
+    width: 100%;
+    height: 25.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    vertical-align: middle;
 }
+.flickity-slider .bx-tl-item-attachment img {
+    display: block;
+    max-height: 100%;
+}
+
 div.bx-tl-view-outline div.bx-tl-item-attachment img {
     max-width: 100%;
     object-fit: cover;
@@ -356,4 +373,4 @@ div.bx-tl-bview-image.bx-tl-bvi-single {
 
 .bx-tl-view-item-comments .cmt-reply.cmt-reply-min {
     margin-bottom: 0;
-}
+}

modules/boonex/plyr/template/css/main.css

@@ -15,7 +15,7 @@
 }
 
 .bx-tl-item-attachment .bx-player-plyr-wrapper {
-    height: 11.25rem;
+    width: 100%;
     aspect-ratio: 16 / 9;
 }
 .bx-base-general-attachment .bx-player-plyr-wrapper {

modules/boonex/timeline/template/type_post.html

@@ -9,7 +9,7 @@
     </div>
 </bx_if:show_images>
 <bx_if:show_videos>
-    <div class="__style_prefix__-item-videos __style_prefix__-iv-main __style_prefix__-iv-__display__ mx-1 mt-2 rounded">
+    <div class="__style_prefix__-item-videos __style_prefix__-iv-main __style_prefix__-iv-__display__ mt-2 rounded">
         <bx_repeat:items>
             <div class="__style_prefix__-item-video rounded">__item__</div>
         </bx_repeat:items>
@@ -36,7 +36,7 @@
     </bx_if:show_content>
 </div>
 <bx_if:show_attachments>
-    <div class="__style_prefix__-item-attachments __style_prefix__-ia-__display__ __style_prefix__-ia-i__count__ mx-1 mt-3 md:mt-4">
+    <div class="__style_prefix__-item-attachments __style_prefix__-ia-__display__ __style_prefix__-ia-i__count__ mt-3 md:mt-4">
         <bx_repeat:items>
             <div class="__style_prefix__-item-attachment__class__">__item__</div>
         </bx_repeat:items>
@@ -50,7 +50,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__ mx-1 mt-3 md:mt-4">
+    <div class="__style_prefix__-item-attachments __style_prefix__-iaf-__display__ __style_prefix__-iaf-i__count__ mt-3 md:mt-4">
         <bx_repeat:items>
             <div class="__style_prefix__-item-attachment__class__">__item__</div>
         </bx_repeat:items>
@@ -65,4 +65,4 @@
 </bx_if:show_attachments_polls>
 <bx_if:show_raw>
     <div class="__style_prefix__-item-raw px-3 md:px-4 mt-3 md:mt-4">__item_content_raw__</div>
-</bx_if:show_raw>
+</bx_if:show_raw>

template/images/icons/mime-type-any.svg

@@ -1,7 +1,7 @@
 <svg width="96" height="96" xmlns="http://www.w3.org/2000/svg" style="box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);">
     <!-- Rounded rectangle with background and border -->
-    <rect x="1" y="1" width="94" height="94" fill="rgba(107, 114, 128, 0.2)" stroke="rgba(107, 114, 128, 0.2)" rx="12" ry="12"></rect>
+    <rect x="1" y="1" width="94" height="94" fill="rgba(107, 114, 128, 0.7)" stroke="rgba(107, 114, 128, 0.8)" rx="12" ry="12"></rect>
     
     <!-- Nested SVG containing the icon -->
     <svg x="32" y="32" width="32" height="32" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><polygon points="152 32 152 88 208 88 152 32" opacity="0.2"/><path d="M200,224H56a8,8,0,0,1-8-8V40a8,8,0,0,1,8-8h96l56,56V216A8,8,0,0,1,200,224Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><polyline points="152 32 152 88 208 88" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
-</svg>
+</svg>

template/images/icons/mime-type-archive.svg

@@ -1,6 +1,6 @@
 <svg width="96" height="96" xmlns="http://www.w3.org/2000/svg" style="box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);">
     <!-- Rounded rectangle with background and border -->
-    <rect x="1" y="1" width="94" height="94" fill="rgba(107, 114, 128, 0.2)" stroke="rgba(107, 114, 128, 0.2)" rx="12" ry="12"></rect>
+    <rect x="1" y="1" width="94" height="94" fill="rgba(107, 114, 128, 0.7)" stroke="rgba(107, 114, 128, 0.8)" rx="12" ry="12"></rect>
 
     <!-- Nested SVG containing the icon -->
     <svg x="32" y="32" width="32" height="32" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><polygon points="152 32 152 88 208 88 152 32" opacity="0.2"/><polyline points="152 32 152 88 208 88" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M200,224a8,8,0,0,0,8-8V88L152,32H56a8,8,0,0,0-8,8V216a8,8,0,0,0,8,8Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="104" y1="224" x2="104" y2="112" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="88" y1="160" x2="120" y2="160" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="88" y1="128" x2="120" y2="128" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="88" y1="192" x2="120" y2="192" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>

template/images/icons/mime-type-audio.svg

@@ -1,7 +1,7 @@
 <svg width="96" height="96" xmlns="http://www.w3.org/2000/svg" style="box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);">
     <!-- Rounded rectangle with background and border -->
-    <rect x="1" y="1" width="94" height="94" fill="rgba(107, 114, 128, 0.2)" stroke="rgba(107, 114, 128, 0.2)" rx="12" ry="12"></rect>
+    <rect x="1" y="1" width="94" height="94" fill="rgba(107, 114, 128, 0.7)" stroke="rgba(107, 114, 128, 0.8)" rx="12" ry="12"></rect>
     
     <!-- Nested SVG containing the icon -->
     <svg x="32" y="32" width="32" height="32" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><polygon points="48 200 48 160 72 160 96 136 96 224 72 200 48 200" opacity="0.2"/><polygon points="48 200 48 160 72 160 96 136 96 224 72 200 48 200" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M128,152a32.5,32.5,0,0,1,0,56" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><polygon points="152 32 152 88 208 88 152 32" opacity="0.2"/><polyline points="152 32 152 88 208 88" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M168,224h32a8,8,0,0,0,8-8V88L152,32H56a8,8,0,0,0-8,8v80" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
-</svg>
+</svg>

template/images/icons/mime-type-document.svg

@@ -1,7 +1,7 @@
 <svg width="96" height="96" xmlns="http://www.w3.org/2000/svg" style="box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);">
     <!-- Rounded rectangle with background and border -->
-    <rect x="1" y="1" width="94" height="94" fill="rgba(107, 114, 128, 0.2)" stroke="rgba(107, 114, 128, 0.2)" rx="12" ry="12"></rect>
+    <rect x="1" y="1" width="94" height="94" fill="rgba(107, 114, 128, 0.7)" stroke="rgba(107, 114, 128, 0.8)" rx="12" ry="12"></rect>
     
     <!-- Nested SVG containing the icon -->
     <svg x="32" y="32" width="32" height="32" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><polygon points="152 32 152 88 208 88 152 32" opacity="0.2"/><path d="M48,112V40a8,8,0,0,1,8-8h96l56,56v24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><polyline points="152 32 152 88 208 88" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M36,152v56H52a28,28,0,0,0,0-56Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M216,200.87A22.12,22.12,0,0,1,200,208c-13.26,0-24-12.54-24-28s10.74-28,24-28a22.12,22.12,0,0,1,16,7.13" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><ellipse cx="128" cy="180" rx="24" ry="28" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
-</svg>
+</svg>

template/images/icons/mime-type-image.svg

@@ -1,7 +1,7 @@
 <svg width="96" height="96" xmlns="http://www.w3.org/2000/svg" style="box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);">
     <!-- Rounded rectangle with background and border -->
-    <rect x="1" y="1" width="94" height="94" fill="rgba(107, 114, 128, 0.2)" stroke="rgba(107, 114, 128, 0.2)" rx="12" ry="12"></rect>
+    <rect x="1" y="1" width="94" height="94" fill="rgba(107, 114, 128, 0.7)" stroke="rgba(107, 114, 128, 0.8)" rx="12" ry="12"></rect>
     
     <!-- Nested SVG containing the icon -->
     <svg x="32" y="32" width="32" height="32" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><polygon points="152 224 104 152 76.36 193.46 60 168 24 224 152 224" opacity="0.2"/><polygon points="152 224 104 152 76.36 193.46 60 168 24 224 152 224" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><polygon points="152 32 152 88 208 88 152 32" opacity="0.2"/><polyline points="152 32 152 88 208 88" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M192,224h8a8,8,0,0,0,8-8V88L152,32H56a8,8,0,0,0-8,8v96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
-</svg>
+</svg>

template/images/icons/mime-type-png.svg

@@ -1,7 +1,7 @@
 <svg width="96" height="96" xmlns="http://www.w3.org/2000/svg" style="box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);">
     <!-- Rounded rectangle with background and border -->
-    <rect x="1" y="1" width="94" height="94" fill="rgba(107, 114, 128, 0.2)" stroke="rgba(107, 114, 128, 0.2)" rx="12" ry="12"></rect>
+    <rect x="1" y="1" width="94" height="94" fill="rgba(107, 114, 128, 0.7)" stroke="rgba(107, 114, 128, 0.8)" rx="12" ry="12"></rect>
     
     <!-- Nested SVG containing the icon -->
     <svg x="32" y="32" width="32" height="32" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><polygon points="152 32 152 88 208 88 152 32" opacity="0.2"/><path d="M48,112V40a8,8,0,0,1,8-8h96l56,56v24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><polyline points="152 32 152 88 208 88" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M44,192H60a20,20,0,0,0,0-40H44v56" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M208,184h8v16.87A22.12,22.12,0,0,1,200,208c-13.25,0-24-12.54-24-28s10.75-28,24-28a21.28,21.28,0,0,1,12,3.75" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><polyline points="108 208 108 152 148 208 148 152" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
-</svg>
+</svg>

template/images/icons/mime-type-presentation.svg

@@ -1,7 +1,7 @@
 <svg width="96" height="96" xmlns="http://www.w3.org/2000/svg" style="box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);">
     <!-- Rounded rectangle with background and border -->
-    <rect x="1" y="1" width="94" height="94" fill="rgba(107, 114, 128, 0.2)" stroke="rgba(107, 114, 128, 0.2)" rx="12" ry="12"></rect>
+    <rect x="1" y="1" width="94" height="94" fill="rgba(107, 114, 128, 0.7)" stroke="rgba(107, 114, 128, 0.8)" rx="12" ry="12"></rect>
     
     <!-- Nested SVG containing the icon -->
     <svg x="32" y="32" width="32" height="32" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="216" y1="152" x2="176" y2="152" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="196" y1="152" x2="196" y2="208" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M48,192H64a20,20,0,0,0,0-40H48v56" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M116,192h16a20,20,0,0,0,0-40H116v56" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><polygon points="152 32 152 88 208 88 152 32" opacity="0.2"/><path d="M48,112V40a8,8,0,0,1,8-8h96l56,56v24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><polyline points="152 32 152 88 208 88" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
-</svg>
+</svg>

template/images/icons/mime-type-psd.svg

@@ -1,7 +1,7 @@
 <svg width="96" height="96" xmlns="http://www.w3.org/2000/svg" style="box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);">
     <!-- Rounded rectangle with background and border -->
-    <rect x="1" y="1" width="94" height="94" fill="rgba(107, 114, 128, 0.2)" stroke="rgba(107, 114, 128, 0.2)" rx="12" ry="12"></rect>
+    <rect x="1" y="1" width="94" height="94" fill="rgba(107, 114, 128, 0.7)" stroke="rgba(107, 114, 128, 0.8)" rx="12" ry="12"></rect>
     
     <!-- Nested SVG containing the icon -->
     <svg x="32" y="32" width="32" height="32" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><polygon points="152 224 104 152 76.36 193.46 60 168 24 224 152 224" opacity="0.2"/><polygon points="152 224 104 152 76.36 193.46 60 168 24 224 152 224" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><polygon points="152 32 152 88 208 88 152 32" opacity="0.2"/><polyline points="152 32 152 88 208 88" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M192,224h8a8,8,0,0,0,8-8V88L152,32H56a8,8,0,0,0-8,8v96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
-</svg>
+</svg>

template/images/icons/mime-type-spreadsheet.svg

@@ -1,7 +1,7 @@
 <svg width="96" height="96" xmlns="http://www.w3.org/2000/svg" style="box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);">
     <!-- Rounded rectangle with background and border -->
-    <rect x="1" y="1" width="94" height="94" fill="rgba(107, 114, 128, 0.2)" stroke="rgba(107, 114, 128, 0.2)" rx="12" ry="12"></rect>
+    <rect x="1" y="1" width="94" height="94" fill="rgba(107, 114, 128, 0.7)" stroke="rgba(107, 114, 128, 0.8)" rx="12" ry="12"></rect>
     
     <!-- Nested SVG containing the icon -->
     <svg x="32" y="32" width="32" height="32" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><polygon points="152 32 152 88 208 88 152 32" opacity="0.2"/><path d="M48,112V40a8,8,0,0,1,8-8h96l56,56v24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><polyline points="152 32 152 88 208 88" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><polyline points="148 208 120 208 120 152" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="48" y1="152" x2="88" y2="208" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="88" y1="152" x2="48" y2="208" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M203.9,153.6s-29.43-7.78-31.8,11,38.43,10.12,35.78,30.72c-2.47,19.16-31.78,11-31.78,11" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
-</svg>
+</svg>

template/images/icons/mime-type-vector.svg

@@ -1,7 +1,7 @@
 <svg width="96" height="96" xmlns="http://www.w3.org/2000/svg" style="box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);">
     <!-- Rounded rectangle with background and border -->
-    <rect x="1" y="1" width="94" height="94" fill="rgba(107, 114, 128, 0.2)" stroke="rgba(107, 114, 128, 0.2)" rx="12" ry="12"></rect>
+    <rect x="1" y="1" width="94" height="94" fill="rgba(107, 114, 128, 0.7)" stroke="rgba(107, 114, 128, 0.8)" rx="12" ry="12"></rect>
     
     <!-- Nested SVG containing the icon -->
     <svg x="32" y="32" width="32" height="32" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><polygon points="152 32 152 88 208 88 152 32" opacity="0.2"/><path d="M48,112V40a8,8,0,0,1,8-8h96l56,56v24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><polyline points="152 32 152 88 208 88" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M75.9,153.6s-29.43-7.78-31.8,11,38.43,10.12,35.78,30.72c-2.47,19.16-31.78,11-31.78,11" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><polyline points="104 152 124 208 144 152" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M200,184h8v16.87A22.12,22.12,0,0,1,192,208c-13.25,0-24-12.54-24-28s10.75-28,24-28a21.28,21.28,0,0,1,12,3.75" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
-</svg>
+</svg>

template/images/icons/mime-type-video.svg

@@ -1,6 +1,6 @@
 <svg width="96" height="96" xmlns="http://www.w3.org/2000/svg" style="box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);">
     <!-- Rounded rectangle with background and border -->
-    <rect x="1" y="1" width="94" height="94" fill="rgba(107, 114, 128, 0.2)" stroke="rgba(107, 114, 128, 0.2)" rx="12" ry="12"></rect>
+    <rect x="1" y="1" width="94" height="94" fill="rgba(107, 114, 128, 0.7)" stroke="rgba(107, 114, 128, 0.8)" rx="12" ry="12"></rect>
 
     <!-- Nested SVG containing the icon -->
     <svg x="32" y="32" width="32" height="32" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M112,175.67V168a8,8,0,0,0-8-8H48a8,8,0,0,0-8,8v40a8,8,0,0,0,8,8h56a8,8,0,0,0,8-8v-8.82L144,216V160Z" opacity="0.2"/><polyline points="112 175.67 144 160 144 216 112 199.18" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><rect x="40" y="160" width="72" height="56" rx="8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><polygon points="152 32 152 88 208 88 152 32" opacity="0.2"/><polyline points="152 32 152 88 208 88" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M176,224h24a8,8,0,0,0,8-8V88L152,32H56a8,8,0,0,0-8,8v88" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>