Ticket #3941 - Artificer template (part 4): Move to core: Photos, Timeline, Videos.

modules/boonex/artificer/data/template/bx_photos/form_ghost_template.html

@@ -1,22 +0,0 @@
-<div id="bx-uploader-file-{storage_object}-{file_id}" class="bx-uploader-ghost flex items-start mt-2">
-    <input type="hidden" name="__name__[]" value="{file_id}" />
-    <div class="bx-base-general-icon-wrapper mr-2">
-        <img src="{file_icon}" class="bx-def-round-corners bx-base-general-icon bx-base-general-icon-{file_id}" />
-    </div>
-    <span class="bx-base-general-uploader-ghost">
-        <a class="bx-btn bx-btn-small mr-2" href="javascript:void(0);" onclick="bx_base_general_delete_ghost('{file_id}', '{file_url}', '{file_icon}', ['__editor_id__'], {js_instance_name});"><bx_text:_sys_txt_form_entry_input_picture_delete /></a>
-        <bx_if:set_thumb>
-            <input type="hidden" name="__name_thumb__[]" value="{file_id}" />
-        </bx_if:set_thumb>
-    </span>
-</div>
-<script>
-    $('#bx-base-general-intert-to-post-link-{file_id}').show();
-
-    $('#bx-uploader-file-{storage_object}-{file_id} .bx-base-general-use-as-thumb input[value="__thumb_id__"]').attr('checked', true);
-
-    // disable images drag&drop, because resized images address can be reset after some time
-    $(".bx-base-general-icon-{file_id}").bind('dragstart', function(){
-        return false; 
-    });
-</script>

modules/boonex/artificer/data/template/bx_photos/form_ghost_template_upload.html

@@ -1,15 +0,0 @@
-<div id="bx-uploader-file-{storage_object}-{file_id}" class="bx-uploader-ghost flex items-start mt-2">
-    <input type="hidden" name="__name__[]" value="{file_id}" />
-    <div class="bx-base-general-icon-wrapper mr-2">
-        <img src="{file_icon}" class="bx-def-round-corners bx-base-general-icon bx-base-general-icon-{file_id}" />
-    </div>
-    <span class="bx-base-general-uploader-ghost">
-        <div class="font-bold"><bx_text:_bx_photos_form_entry_input_title /></div>
-        <div class="bx-form-input-wrapper bx-form-input-wrapper-text mt-1">
-            <input class="bx-def-font-inputs bx-form-input-text block w-full py-2 px-3 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm bg-white dark:bg-gray-900 placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-2 focus:text-gray-900 dark:focus:text-gray-100 focus:ring-blue-500 focus:border-opacity-70 focus:ring-opacity-20 focus:border-blue-500 text-sm text-gray-700 dark:text-gray-300 appearance-none" type="text" value="" name="title-{file_id}" />
-        </div>
-        <div class="mt-2">
-            <a class="bx-btn bx-btn-small bx-def-margin-sec-right" href="javascript:void(0);" onclick="bx_base_general_delete_ghost('{file_id}', '{file_url}', '{file_icon}', ['__editor_id__'], {js_instance_name});"><bx_text:_sys_txt_form_entry_input_picture_delete /></a>
-        </div>
-    </span>
-</div>

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

@@ -1,59 +0,0 @@
-<div class="bx-tl-cont-ph-boxes flex space-x-6">
-    <div class="flex-1 mb-4 ring-1 ring-gray-200 dark:ring-gray-700 bg-white dark:bg-gray-800 rounded-md">
-        <div class="flex items-center p-4">
-            <div class="flex-0 h-10 w-10 bg-gray-200 dark:bg-gray-700 rounded-full">&nbsp;</div>
-            <div class="flex-1 ml-4 space-y-2 animate-pulse">
-                <div class="h-3 w-1/3 bg-gray-300 dark:bg-gray-600 rounded-xl">&nbsp;</div>
-                <div class="h-3 w-1/2 bg-gray-200 dark:bg-gray-600 rounded-xl">&nbsp;</div>
-            </div>
-        </div>
-        <div class="h-48 m-1 bg-gray-200 dark:bg-gray-700 rounded animate-pulse">&nbsp;</div>
-        <div class="p-4 space-y-4 animate-pulse">
-            <div class="h-5 w-2/3 bg-gray-300 dark:bg-gray-600 rounded-full">&nbsp;</div>
-            <div class="flex space-x-1">
-                <div class="h-3 w-1/3 bg-gray-200 dark:bg-gray-700 rounded-xl"></div>
-                <div class="h-3 w-2/3 bg-gray-200 dark:bg-gray-700 rounded-xl"></div>
-            </div>
-            <div class="h-3 w-2/3 bg-gray-200 dark:bg-gray-700 rounded-xl"></div>
-        </div>
-    </div>
-    <div class="flex-1 mb-4 p-4 ring-1 ring-gray-200 dark:ring-gray-700 bg-white dark:bg-gray-800 rounded-md">
-        <div class="flex items-center">
-            <div class="flex-0 h-10 w-10 bg-gray-200 dark:bg-gray-700 rounded-full">&nbsp;</div>
-            <div class="flex-1 ml-4 space-y-2 animate-pulse">
-                <div class="h-3 w-1/3 bg-gray-300 dark:bg-gray-600 rounded-xl">&nbsp;</div>
-                <div class="h-3 w-1/2 bg-gray-200 dark:bg-gray-600 rounded-xl">&nbsp;</div>
-            </div>
-        </div>
-        <div class="mt-4 space-y-2 animate-pulse">
-            <div class="h-3 bg-gray-200 dark:bg-gray-600 rounded-xl">&nbsp;</div>
-            <div class="h-3 bg-gray-200 dark:bg-gray-600 rounded-xl">&nbsp;</div>
-            <div class="h-3 bg-gray-200 dark:bg-gray-600 rounded-xl">&nbsp;</div>
-            <div class="h-3 bg-gray-200 dark:bg-gray-600 rounded-xl">&nbsp;</div>
-        </div>
-    </div>
-    <div class="flex-1 mb-4 ring-1 ring-gray-200 dark:ring-gray-700 bg-white dark:bg-gray-800 rounded-md">
-        <div class="flex items-center p-4">
-            <div class="flex-0 h-10 w-10 bg-gray-200 dark:bg-gray-700 rounded-full">&nbsp;</div>
-            <div class="flex-1 ml-4 space-y-2 animate-pulse">
-                <div class="h-3 w-1/3 bg-gray-300 dark:bg-gray-600 rounded-xl">&nbsp;</div>
-                <div class="h-3 w-1/2 bg-gray-200 dark:bg-gray-600 rounded-xl">&nbsp;</div>
-            </div>
-        </div>
-        <div class="h-48 m-1 bg-gray-200 dark:bg-gray-700 rounded animate-pulse">&nbsp;</div>
-        <div class="p-4 space-y-4 animate-pulse">
-            <div class="h-5 w-2/3 bg-gray-300 dark:bg-gray-600 rounded-full">&nbsp;</div>
-            <div class="flex space-x-1">
-                <div class="h-3 w-1/3 bg-gray-200 dark:bg-gray-700 rounded-xl"></div>
-                <div class="h-3 w-2/3 bg-gray-200 dark:bg-gray-700 rounded-xl"></div>
-            </div>
-            <div class="h-3 w-2/3 bg-gray-200 dark:bg-gray-700 rounded-xl"></div>
-        </div>
-    </div>
-</div>
-<script>
-    $(document).ready(function () {
-        var iBlockID = '__id__';
-        getHtmlData($('#bx-page-block-' + iBlockID), bx_append_url_params(document.location.href, 'dynamic=tab&pageBlock=' + iBlockID), undefined, 'post', false, {includedCss: JSON.stringify(aIncludedCss), includedJs: JSON.stringify(aIncludedJs)}, false);
-    });
-</script>

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

@@ -1,39 +0,0 @@
-<div class="flex-1 mb-4 ring-1 ring-gray-200 dark:ring-gray-700 bg-white dark:bg-gray-800 rounded-md">
-    <div class="flex items-center p-4">
-        <div class="flex-0 h-10 w-10 bg-gray-200 dark:bg-gray-700 rounded-full">&nbsp;</div>
-        <div class="flex-1 ml-4 space-y-2 animate-pulse">
-            <div class="bg-gray-300 dark:bg-gray-600 h-3 w-1/3 rounded-xl">&nbsp;</div>
-            <div class="bg-gray-200 dark:bg-gray-600 h-3 w-1/2 rounded-xl">&nbsp;</div>
-        </div>
-    </div>
-    <div class="h-48 m-1 bg-gray-200 dark:bg-gray-700 rounded animate-pulse">&nbsp;</div>
-    <div class="p-4 space-y-4 animate-pulse">
-        <div class="h-5 w-2/3 bg-gray-300 dark:bg-gray-600 rounded-full">&nbsp;</div>
-        <div class="flex space-x-1">
-            <div class="bg-gray-200 dark:bg-gray-700 h-3 w-1/3 rounded-xl"></div>
-            <div class="bg-gray-200 dark:bg-gray-700 h-3 w-2/3 rounded-xl"></div>
-        </div>
-        <div class="bg-gray-200 dark:bg-gray-700 h-3 w-2/3 rounded-xl"></div>
-    </div>
-</div>
-<div class="flex-1 mb-4 p-4 ring-1 ring-gray-200 dark:ring-gray-700 bg-white dark:bg-gray-800 rounded-md">
-    <div class="flex items-center">
-        <div class="flex-0 h-10 w-10 bg-gray-200 dark:bg-gray-700 rounded-full">&nbsp;</div>
-        <div class="flex-1 ml-4 space-y-2 animate-pulse">
-            <div class="h-3 w-1/3 bg-gray-300 dark:bg-gray-600 rounded-xl">&nbsp;</div>
-            <div class="h-3 w-1/2 bg-gray-200 dark:bg-gray-600 rounded-xl">&nbsp;</div>
-        </div>
-    </div>
-    <div class="mt-4 space-y-2 animate-pulse">
-        <div class="h-3 bg-gray-200 dark:bg-gray-600 rounded-xl">&nbsp;</div>
-        <div class="h-3 bg-gray-200 dark:bg-gray-600 rounded-xl">&nbsp;</div>
-        <div class="h-3 bg-gray-200 dark:bg-gray-600 rounded-xl">&nbsp;</div>
-        <div class="h-3 bg-gray-200 dark:bg-gray-600 rounded-xl">&nbsp;</div>
-    </div>
-</div>
-<script>
-    $(document).ready(function () {
-        var iBlockID = '__id__';
-        getHtmlData($('#bx-page-block-' + iBlockID), bx_append_url_params(document.location.href, 'dynamic=tab&pageBlock=' + iBlockID), undefined, 'post', false, {includedCss: JSON.stringify(aIncludedCss), includedJs: JSON.stringify(aIncludedJs)}, false);
-    });
-</script>

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

@@ -1,16 +0,0 @@
-<div id="__html_id__" class="__style_prefix__-view __style_prefix__-view-__view__ bx-def-bc-margin">
-    <div class="__style_prefix__-cnt">
-        __content_before__
-        <div class="__style_prefix__-back-holder">__back__</div>
-        <div class="__style_prefix__-empty-holder">__empty__</div>
-        <div class="__style_prefix__-items-wrapper">
-            <div class="__style_prefix__-items relative">__content__</div>
-        </div>
-        <div class="__style_prefix__-load-more-holder">__load_more__</div>
-        __content_after__
-    </div>
-    __show_more__
-    __view_image_popup__
-    __live_update_code__
-    __js_content__
-</div>

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

@@ -1,7 +0,0 @@
-<div id="__html_id__" class="sys-action __style_prefix__-repost __class__ bx-def-margin-right-auto bx-def-valign-center bx-clearfix" bx_repost_data_count="__count__">
-    <div class="sys-action-element-holder __style_prefix__-repost-element-holder">__do_repost__</div>
-    <bx_if:show_counter>
-        <div class="sys-action-counter-holder __style_prefix__-repost-counter-holder ml-2 first:ml-0"<bx_if:show_hidden> style="display:none"</bx_if:show_hidden>>__counter__</div>
-    </bx_if:show_counter>
-    __script__
-</div>

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

@@ -1,56 +0,0 @@
-<bx_if:show_top_raw>
-    <div class="__style_prefix__-item-top-raw mt-3 lg:mt-4">__item_content_top_raw__</div>
-</bx_if:show_top_raw>
-<bx_if:show_images>
-    <div class="__style_prefix__-item-images __style_prefix__-ii-main __style_prefix__-ii-__display__ mt-3 lg:mt-4 rounded">
-        <bx_repeat:items>
-            <div class="__style_prefix__-item-image flex-shrink-0 px-1 rounded overflow-hidden box-border">__item__</div>
-        </bx_repeat:items>
-    </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-3 lg:mt-4 rounded">
-        <bx_repeat:items>
-            <div class="__style_prefix__-item-video rounded">__item__</div>
-        </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 mt-3 lg:mt-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 mt-3 lg:mt-4 mx-3 lg:mx-4">
-    <bx_if:show_title>
-        <div class="__style_prefix__-title mb-1 lg:mb-2 text-lg lg:text-xl font-semibold text-gray-700 dark:text-gray-300">__title__</div>
-    </bx_if:show_title>
-    <bx_if:show_content>
-        <div class="__style_prefix__-content bx-overflow-ready bx-def-vanilla-html relative mb-2 prose dark:prose-invert prose-sm max-w-none">__item_content__</div>
-    </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 lg:mt-4">
-        <bx_repeat:items>
-            <div class="__style_prefix__-item-attachment__class__">__item__</div>
-        </bx_repeat:items>
-    </div>
-</bx_if:show_attachments>
-<bx_if:show_links>
-    <div class="__style_prefix__-item-links px-3 lg:px-4">
-        <bx_repeat:links>
-            <div class="__style_prefix__-item-link mt-3 lg:mt-4">__link__</div>
-        </bx_repeat:links>
-    </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 lg:mt-4">
-        <bx_repeat:items>
-            <div class="__style_prefix__-item-attachment__class__">__item__</div>
-        </bx_repeat:items>
-    </div>
-</bx_if:show_attachments_files>
-<bx_if:show_raw>
-    <div class="__style_prefix__-item-raw px-3 lg:px-4 mt-3 lg:mt-4">__item_content_raw__</div>
-</bx_if:show_raw>

modules/boonex/artificer/data/template/bx_videos/form_ghost_template.html

@@ -1,45 +0,0 @@
-<div id="bx-uploader-file-{storage_object}-{file_id}" class="bx-uploader-ghost mt-2 flex items-start">
-    <input type="hidden" name="__name__[]" value="{file_id}" />
-    <div class="bx-base-general-icon-wrapper mr-2">
-        <img src="{file_icon}" class="bx-def-round-corners bx-base-general-icon bx-base-general-icon-{file_id}" />
-    </div>
-    <span class="bx-base-general-uploader-ghost">
-        <div class="font-bold"><bx_text:_sys_txt_form_entry_input_picture_pic_url /></div>
-        <div class="bx-form-input-wrapper bx-form-input-wrapper-text mt-1">
-            <input class="bx-def-font-inputs bx-form-input-text block w-full py-2 px-3 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm bg-white dark:bg-gray-900 placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-2 focus:text-gray-900 dark:focus:text-gray-100 focus:ring-blue-500 focus:border-opacity-70 focus:ring-opacity-20 focus:border-blue-500 text-sm text-gray-700 dark:text-gray-300 appearance-none" type="text" value="{file_url}" readonly="1" />
-        </div>
-        <div class="mt-2">
-            <span id="bx-base-general-intert-to-post-link-{file_id}" style="display:none;">
-                <a class="bx-btn bx-btn-small bx-def-margin-sec-right" href="javascript:void(0);" onclick="bx_base_general_insert_to_post('{file_id}', '{file_url}', '__editor_id__');"><bx_text:_sys_txt_form_entry_input_picture_insert /></a>
-            </span>
-            <a class="bx-btn bx-btn-small bx-def-margin-sec-right" href="javascript:void(0);" onclick="bx_base_general_delete_ghost('{file_id}', '{file_url}', '{file_icon}', ['__editor_id__'], {js_instance_name});"><bx_text:_sys_txt_form_entry_input_picture_delete /></a>
-            <bx_if:set_thumb>
-                <br />
-                <span class="bx-base-general-use-as-thumb">
-                    <input type="checkbox" name="__name_thumb__[]" value="{file_id}" onclick="bx_base_general_select_thumb(this)" id="__name_thumb__-{file_id}" /> 
-                    <label for="__name_thumb__-{file_id}">__txt_pict_use_as_thumb__</label>
-                </span>
-            </bx_if:set_thumb>
-            <bx_if:set_poster>
-                <br />
-                <span class="bx-base-general-use-as-poster">
-                    <input type="checkbox" name="__name_poster__[]" value="{file_id}" onclick="bx_base_general_select_ghost(this, '__name_poster__')" id="__name_poster__-{file_id}" /> 
-                    <label for="__name_poster__-{file_id}">__txt_pict_use_as_poster__</label>
-                </span>
-            </bx_if:set_poster>
-        </div>
-    </span>
-</div>
-<script>
-    $('#bx-base-general-intert-to-post-link-{file_id}').show();
-
-    $('#bx-uploader-file-{storage_object}-{file_id} .bx-base-general-use-as-thumb input[value="__thumb_id__"]').attr('checked', true);
-	<bx_if:init_poster>
-    $('#bx-uploader-file-{storage_object}-{file_id} .bx-base-general-use-as-poster input[value="__poster_id__"]').attr('checked', true);
-	</bx_if:init_poster>
-
-    // disable images drag&drop, because resized images address can be reset after some time
-    $(".bx-base-general-icon-{file_id}").bind('dragstart', function(){
-        return false; 
-    });
-</script>

modules/boonex/artificer/data/template/bx_videos/form_ghost_template_video.html

@@ -1,22 +0,0 @@
-<div id="bx-uploader-file-{storage_object}-{file_id}" class="bx-uploader-ghost mt-2 flex items-start">
-    <input type="hidden" name="__name__[]" value="{file_id}" />
-    <div class="bx-base-general-icon-wrapper mr-2">
-        <img src="{file_icon}" class="bx-def-round-corners bx-base-general-icon bx-base-general-icon-{file_id}" />
-    </div>
-    <span class="bx-base-general-uploader-ghost">
-        <div class="font-bold"><bx_text:_sys_txt_form_entry_input_picture_pic_url /></div>
-        <div class="bx-form-input-wrapper bx-form-input-wrapper-text mt-1">
-            <input class="bx-def-font-inputs bx-form-input-text block w-full py-2 px-3 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm bg-white dark:bg-gray-900 placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-2 focus:text-gray-900 dark:focus:text-gray-100 focus:ring-blue-500 focus:border-opacity-70 focus:ring-opacity-20 focus:border-blue-500 text-sm text-gray-700 dark:text-gray-300 appearance-none" type="text" value="{file_url}" readonly="1" />
-        </div>
-        <div class="mt-2">
-            <input type="hidden" name="__name_thumb__" value="{file_id}" />
-            <a class="bx-btn bx-btn-small bx-def-margin-sec-right" href="javascript:void(0);" onclick="bx_base_general_delete_ghost('{file_id}', '{file_url}', '{file_icon}', [], {js_instance_name});"><bx_text:_sys_txt_form_entry_input_picture_delete /></a>
-        </div>
-    </span>
-</div>
-<script>
-    // disable images drag&drop, because resized images address can be reset after some time
-    $(".bx-base-general-icon-{file_id}").bind('dragstart', function() {
-        return false; 
-    });
-</script>

modules/boonex/photos/template/form_ghost_template.html

@@ -1,10 +1,10 @@
-<div id="bx-uploader-file-{storage_object}-{file_id}" class="bx-uploader-ghost bx-def-margin-sec-top bx-clearfix">
+<div id="bx-uploader-file-{storage_object}-{file_id}" class="bx-uploader-ghost flex items-start mt-2">
     <input type="hidden" name="__name__[]" value="{file_id}" />
-    <div class="bx-base-general-icon-wrapper bx-def-margin-sec-right">
+    <div class="bx-base-general-icon-wrapper mr-2">
         <img src="{file_icon}" class="bx-def-round-corners bx-base-general-icon bx-base-general-icon-{file_id}" />
     </div>
     <span class="bx-base-general-uploader-ghost">
-        <a class="bx-btn bx-btn-small bx-def-margin-sec-right" href="javascript:void(0);" onclick="bx_base_general_delete_ghost('{file_id}', '{file_url}', '{file_icon}', ['__editor_id__'], {js_instance_name});"><bx_text:_sys_txt_form_entry_input_picture_delete /></a>
+        <a class="bx-btn bx-btn-small mr-2" href="javascript:void(0);" onclick="bx_base_general_delete_ghost('{file_id}', '{file_url}', '{file_icon}', ['__editor_id__'], {js_instance_name});"><bx_text:_sys_txt_form_entry_input_picture_delete /></a>
         <bx_if:set_thumb>
             <input type="hidden" name="__name_thumb__[]" value="{file_id}" />
         </bx_if:set_thumb>
@@ -19,4 +19,4 @@
     $(".bx-base-general-icon-{file_id}").bind('dragstart', function(){
         return false; 
     });
-</script>
+</script>

modules/boonex/photos/template/form_ghost_template_upload.html

@@ -1,11 +1,15 @@
-<div id="bx-uploader-file-{storage_object}-{file_id}" class="bx-uploader-ghost bx-def-margin-sec-top bx-clearfix">
+<div id="bx-uploader-file-{storage_object}-{file_id}" class="bx-uploader-ghost flex items-start mt-2">
     <input type="hidden" name="__name__[]" value="{file_id}" />
-    <div class="bx-base-general-icon-wrapper bx-def-margin-sec-right">
+    <div class="bx-base-general-icon-wrapper mr-2">
         <img src="{file_icon}" class="bx-def-round-corners bx-base-general-icon bx-base-general-icon-{file_id}" />
     </div>
     <span class="bx-base-general-uploader-ghost">
-        <b><bx_text:_bx_photos_form_entry_input_title /></b> <br />
-        <input class="bx-def-font-inputs bx-form-input-text bx-def-margin-sec-bottom" type="text" value="" name="title-{file_id}" /> <br />
-        <a class="bx-btn bx-btn-small bx-def-margin-sec-right" href="javascript:void(0);" onclick="bx_base_general_delete_ghost('{file_id}', '{file_url}', '{file_icon}', ['__editor_id__'], {js_instance_name});"><bx_text:_sys_txt_form_entry_input_picture_delete /></a>
+        <div class="font-bold"><bx_text:_bx_photos_form_entry_input_title /></div>
+        <div class="bx-form-input-wrapper bx-form-input-wrapper-text mt-1">
+            <input class="bx-def-font-inputs bx-form-input-text block w-full py-2 px-3 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm bg-white dark:bg-gray-900 placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-2 focus:text-gray-900 dark:focus:text-gray-100 focus:ring-blue-500 focus:border-opacity-70 focus:ring-opacity-20 focus:border-blue-500 text-sm text-gray-700 dark:text-gray-300 appearance-none" type="text" value="" name="title-{file_id}" />
+        </div>
+        <div class="mt-2">
+            <a class="bx-btn bx-btn-small bx-def-margin-sec-right" href="javascript:void(0);" onclick="bx_base_general_delete_ghost('{file_id}', '{file_url}', '{file_icon}', ['__editor_id__'], {js_instance_name});"><bx_text:_sys_txt_form_entry_input_picture_delete /></a>
+        </div>
     </span>
-</div>
+</div>

modules/boonex/timeline/template/block_async_outline.html

@@ -1,72 +1,53 @@
-<style>
-    .bx-tl-cont-ph-boxes {
-        display: -webkit-flex;
-        display: flex;
-        -webkit-justify-content: space-between;
-        justify-content: space-between;
-    }
-    .bx-tl-cont-ph-boxes .bx-def-box {
-        width: 30%;
-    }
-
-    .bx-cont-ph-u {
-        display: -webkit-flex;
-        display: flex;
-        -webkit-align-items: center;
-        align-items: center;
-    }
-    .bx-cont-ph-ut {
-        -webkit-flex: 0 0 auto;
-        -ms-flex: 0 0 auto;
-        flex: 0 0 auto;
-    }
-    .bx-cont-ph-ui {
-        -webkit-flex: 1 1 auto;
-        -ms-flex: 1 1 auto;
-        flex: 1 1 auto;
-    }
-    
-</style>
-<div class="bx-tl-cont-ph-boxes">
-    <div class="bx-def-box bx-def-padding-topbottom bx-def-round-corners bx-def-color-bg-box bx-def-margin-bottom">
-        <div class="bx-cont-ph-u bx-def-padding">
-            <div class="bx-cont-ph-ut bx-cont-ph bx-def-thumb-size bx-def-thumb bx-def-box-sizing">&nbsp;</div>
-            <div class="bx-cont-ph-ui bx-def-margin-left">
-                <span class="bx-cont-ph-inline" style="width:100%;">&nbsp;</span><br />
-                <span class="bx-cont-ph-inline bx-def-margin-thd-top bx-def-font-small" style="width:70%;">&nbsp;</span>
+<div class="bx-tl-cont-ph-boxes flex space-x-6">
+    <div class="flex-1 mb-4 ring-1 ring-gray-200 dark:ring-gray-700 bg-white dark:bg-gray-800 rounded-md">
+        <div class="flex items-center p-4">
+            <div class="flex-0 h-10 w-10 bg-gray-200 dark:bg-gray-700 rounded-full">&nbsp;</div>
+            <div class="flex-1 ml-4 space-y-2 animate-pulse">
+                <div class="h-3 w-1/3 bg-gray-300 dark:bg-gray-600 rounded-xl">&nbsp;</div>
+                <div class="h-3 w-1/2 bg-gray-200 dark:bg-gray-600 rounded-xl">&nbsp;</div>
             </div>
         </div>
-        <div class="bx-cont-ph" style="height:20rem;"></div>
-        <div class="bx-def-padding-lefttopright">
-            <span class="bx-cont-ph-inline bx-def-font-h3" style="width:85%;">&nbsp;</span>
+        <div class="h-48 m-1 bg-gray-200 dark:bg-gray-700 rounded animate-pulse">&nbsp;</div>
+        <div class="p-4 space-y-4 animate-pulse">
+            <div class="h-5 w-2/3 bg-gray-300 dark:bg-gray-600 rounded-full">&nbsp;</div>
+            <div class="flex space-x-1">
+                <div class="h-3 w-1/3 bg-gray-200 dark:bg-gray-700 rounded-xl"></div>
+                <div class="h-3 w-2/3 bg-gray-200 dark:bg-gray-700 rounded-xl"></div>
+            </div>
+            <div class="h-3 w-2/3 bg-gray-200 dark:bg-gray-700 rounded-xl"></div>
         </div>
     </div>
-    <div class="bx-def-box bx-def-padding-topbottom bx-def-round-corners bx-def-color-bg-box bx-def-margin-bottom">
-        <div class="bx-cont-ph-u bx-def-padding">
-            <div class="bx-cont-ph-ut bx-cont-ph bx-def-thumb-size bx-def-thumb bx-def-box-sizing">&nbsp;</div>
-            <div class="bx-cont-ph-ui bx-def-margin-left">
-                <span class="bx-cont-ph-inline" style="width:100%;">&nbsp;</span><br />
-                <span class="bx-cont-ph-inline bx-def-margin-thd-top bx-def-font-small" style="width:70%;">&nbsp;</span>
+    <div class="flex-1 mb-4 p-4 ring-1 ring-gray-200 dark:ring-gray-700 bg-white dark:bg-gray-800 rounded-md">
+        <div class="flex items-center">
+            <div class="flex-0 h-10 w-10 bg-gray-200 dark:bg-gray-700 rounded-full">&nbsp;</div>
+            <div class="flex-1 ml-4 space-y-2 animate-pulse">
+                <div class="h-3 w-1/3 bg-gray-300 dark:bg-gray-600 rounded-xl">&nbsp;</div>
+                <div class="h-3 w-1/2 bg-gray-200 dark:bg-gray-600 rounded-xl">&nbsp;</div>
             </div>
         </div>
-        <div class="bx-def-padding-rightbottomleft">
-            <div class="bx-cont-ph bx-def-margin-thd-bottom">&nbsp;</div>
-            <div class="bx-cont-ph bx-def-margin-thd-bottom">&nbsp;</div>
-            <div class="bx-cont-ph bx-def-margin-thd-bottom">&nbsp;</div>
-            <div class="bx-cont-ph bx-def-margin-thd-bottom">&nbsp;</div>
+        <div class="mt-4 space-y-2 animate-pulse">
+            <div class="h-3 bg-gray-200 dark:bg-gray-600 rounded-xl">&nbsp;</div>
+            <div class="h-3 bg-gray-200 dark:bg-gray-600 rounded-xl">&nbsp;</div>
+            <div class="h-3 bg-gray-200 dark:bg-gray-600 rounded-xl">&nbsp;</div>
+            <div class="h-3 bg-gray-200 dark:bg-gray-600 rounded-xl">&nbsp;</div>
         </div>
     </div>
-    <div class="bx-def-box bx-def-padding-topbottom bx-def-round-corners bx-def-color-bg-box bx-def-margin-bottom">
-        <div class="bx-cont-ph-u bx-def-padding">
-            <div class="bx-cont-ph-ut bx-cont-ph bx-def-thumb-size bx-def-thumb bx-def-box-sizing">&nbsp;</div>
-            <div class="bx-cont-ph-ui bx-def-margin-left">
-                <span class="bx-cont-ph-inline" style="width:100%;">&nbsp;</span><br />
-                <span class="bx-cont-ph-inline bx-def-margin-thd-top bx-def-font-small" style="width:70%;">&nbsp;</span>
+    <div class="flex-1 mb-4 ring-1 ring-gray-200 dark:ring-gray-700 bg-white dark:bg-gray-800 rounded-md">
+        <div class="flex items-center p-4">
+            <div class="flex-0 h-10 w-10 bg-gray-200 dark:bg-gray-700 rounded-full">&nbsp;</div>
+            <div class="flex-1 ml-4 space-y-2 animate-pulse">
+                <div class="h-3 w-1/3 bg-gray-300 dark:bg-gray-600 rounded-xl">&nbsp;</div>
+                <div class="h-3 w-1/2 bg-gray-200 dark:bg-gray-600 rounded-xl">&nbsp;</div>
             </div>
         </div>
-        <div class="bx-cont-ph" style="height:20rem;"></div>
-        <div class="bx-def-padding-lefttopright">
-            <span class="bx-cont-ph-inline bx-def-font-h3" style="width:85%;">&nbsp;</span>
+        <div class="h-48 m-1 bg-gray-200 dark:bg-gray-700 rounded animate-pulse">&nbsp;</div>
+        <div class="p-4 space-y-4 animate-pulse">
+            <div class="h-5 w-2/3 bg-gray-300 dark:bg-gray-600 rounded-full">&nbsp;</div>
+            <div class="flex space-x-1">
+                <div class="h-3 w-1/3 bg-gray-200 dark:bg-gray-700 rounded-xl"></div>
+                <div class="h-3 w-2/3 bg-gray-200 dark:bg-gray-700 rounded-xl"></div>
+            </div>
+            <div class="h-3 w-2/3 bg-gray-200 dark:bg-gray-700 rounded-xl"></div>
         </div>
     </div>
 </div>
@@ -75,4 +56,4 @@
         var iBlockID = '__id__';
         getHtmlData($('#bx-page-block-' + iBlockID), bx_append_url_params(document.location.href, 'dynamic=tab&pageBlock=' + iBlockID), undefined, 'post', false, {includedCss: JSON.stringify(aIncludedCss), includedJs: JSON.stringify(aIncludedJs)}, false);
     });
-</script>
+</script>

modules/boonex/timeline/template/block_async_timeline.html

@@ -1,23 +1,34 @@
-<div class="bx-def-box bx-def-padding-topbottom bx-def-round-corners bx-def-color-bg-box bx-def-margin-bottom">
-    <div class="bx-clearfix">
-        <div class="bx-cont-ph bx-def-thumb-size bx-def-thumb bx-def-box-sizing bx-def-margin" style="float:left;">&nbsp;</div>
-        <span class="bx-cont-ph-inline bx-def-margin-top" style="width:10rem;">&nbsp;</span><br />
-        <span class="bx-cont-ph-inline bx-def-margin-thd-top bx-def-font-small" style="width:7rem;">&nbsp;</span>
+<div class="flex-1 mb-4 ring-1 ring-gray-200 dark:ring-gray-700 bg-white dark:bg-gray-800 rounded-md">
+    <div class="flex items-center p-4">
+        <div class="flex-0 h-10 w-10 bg-gray-200 dark:bg-gray-700 rounded-full">&nbsp;</div>
+        <div class="flex-1 ml-4 space-y-2 animate-pulse">
+            <div class="bg-gray-300 dark:bg-gray-600 h-3 w-1/3 rounded-xl">&nbsp;</div>
+            <div class="bg-gray-200 dark:bg-gray-600 h-3 w-1/2 rounded-xl">&nbsp;</div>
+        </div>
+    </div>
+    <div class="h-48 m-1 bg-gray-200 dark:bg-gray-700 rounded animate-pulse">&nbsp;</div>
+    <div class="p-4 space-y-4 animate-pulse">
+        <div class="h-5 w-2/3 bg-gray-300 dark:bg-gray-600 rounded-full">&nbsp;</div>
+        <div class="flex space-x-1">
+            <div class="bg-gray-200 dark:bg-gray-700 h-3 w-1/3 rounded-xl"></div>
+            <div class="bg-gray-200 dark:bg-gray-700 h-3 w-2/3 rounded-xl"></div>
+        </div>
+        <div class="bg-gray-200 dark:bg-gray-700 h-3 w-2/3 rounded-xl"></div>
     </div>
-    <div class="bx-cont-ph" style="height:20rem;"></div>
-    <span class="bx-cont-ph-inline bx-def-margin bx-def-font-h3" style="width:18rem;">&nbsp;</span>
 </div>
-<div class="bx-def-box bx-def-padding-topbottom bx-def-round-corners bx-def-color-bg-box bx-def-margin-bottom">
-    <div class="bx-clearfix">
-        <div class="bx-cont-ph bx-def-thumb-size bx-def-thumb bx-def-box-sizing bx-def-margin" style="float:left;">&nbsp;</div>
-        <span class="bx-cont-ph-inline bx-def-margin-top" style="width:10rem;">&nbsp;</span><br />
-        <span class="bx-cont-ph-inline bx-def-margin-thd-top bx-def-font-small" style="width:7rem;">&nbsp;</span>
+<div class="flex-1 mb-4 p-4 ring-1 ring-gray-200 dark:ring-gray-700 bg-white dark:bg-gray-800 rounded-md">
+    <div class="flex items-center">
+        <div class="flex-0 h-10 w-10 bg-gray-200 dark:bg-gray-700 rounded-full">&nbsp;</div>
+        <div class="flex-1 ml-4 space-y-2 animate-pulse">
+            <div class="h-3 w-1/3 bg-gray-300 dark:bg-gray-600 rounded-xl">&nbsp;</div>
+            <div class="h-3 w-1/2 bg-gray-200 dark:bg-gray-600 rounded-xl">&nbsp;</div>
+        </div>
     </div>
-    <div class="bx-def-padding">
-        <div class="bx-cont-ph bx-def-margin-thd-bottom">&nbsp;</div>
-        <div class="bx-cont-ph bx-def-margin-thd-bottom">&nbsp;</div>
-        <div class="bx-cont-ph bx-def-margin-thd-bottom">&nbsp;</div>
-        <div class="bx-cont-ph bx-def-margin-thd-bottom">&nbsp;</div>
+    <div class="mt-4 space-y-2 animate-pulse">
+        <div class="h-3 bg-gray-200 dark:bg-gray-600 rounded-xl">&nbsp;</div>
+        <div class="h-3 bg-gray-200 dark:bg-gray-600 rounded-xl">&nbsp;</div>
+        <div class="h-3 bg-gray-200 dark:bg-gray-600 rounded-xl">&nbsp;</div>
+        <div class="h-3 bg-gray-200 dark:bg-gray-600 rounded-xl">&nbsp;</div>
     </div>
 </div>
 <script>
@@ -25,4 +36,4 @@
         var iBlockID = '__id__';
         getHtmlData($('#bx-page-block-' + iBlockID), bx_append_url_params(document.location.href, 'dynamic=tab&pageBlock=' + iBlockID), undefined, 'post', false, {includedCss: JSON.stringify(aIncludedCss), includedJs: JSON.stringify(aIncludedJs)}, false);
     });
-</script>
+</script>

modules/boonex/timeline/template/repost_element_block.html

@@ -1,7 +1,7 @@
-<div id="__html_id__" class="sys-action __style_prefix__-repost __class__ bx-def-margin-right-auto bx-def-margin-thd-topbottom bx-def-valign-center bx-clearfix" bx_repost_data_count="__count__">
+<div id="__html_id__" class="sys-action __style_prefix__-repost __class__ bx-def-margin-right-auto bx-def-valign-center bx-clearfix" bx_repost_data_count="__count__">
     <div class="sys-action-element-holder __style_prefix__-repost-element-holder">__do_repost__</div>
     <bx_if:show_counter>
-        <div class="sys-action-counter-holder __style_prefix__-repost-counter-holder bx-btn-border"<bx_if:show_hidden> style="display:none"</bx_if:show_hidden>>__counter__</div>
+        <div class="sys-action-counter-holder __style_prefix__-repost-counter-holder ml-2 first:ml-0"<bx_if:show_hidden> style="display:none"</bx_if:show_hidden>>__counter__</div>
     </bx_if:show_counter>
     __script__
 </div>

modules/boonex/timeline/template/type_post.html

@@ -1,56 +1,56 @@
 <bx_if:show_top_raw>
-    <div class="__style_prefix__-item-top-raw bx-def-margin-top">__item_content_top_raw__</div>
+    <div class="__style_prefix__-item-top-raw mt-3 lg:mt-4">__item_content_top_raw__</div>
 </bx_if:show_top_raw>
 <bx_if:show_images>
-    <div class="__style_prefix__-item-images __style_prefix__-ii-main __style_prefix__-ii-__display__ bx-def-margin-top">
+    <div class="__style_prefix__-item-images __style_prefix__-ii-main __style_prefix__-ii-__display__ mt-3 lg:mt-4 rounded">
         <bx_repeat:items>
-            <div class="__style_prefix__-item-image">__item__</div>
+            <div class="__style_prefix__-item-image flex-shrink-0 px-1 rounded overflow-hidden box-border">__item__</div>
         </bx_repeat:items>
     </div>
 </bx_if:show_images>
 <bx_if:show_videos>
-    <div class="__style_prefix__-item-videos __style_prefix__-iv-main __style_prefix__-iv-__display__ bx-def-margin-top">
+    <div class="__style_prefix__-item-videos __style_prefix__-iv-main __style_prefix__-iv-__display__ mx-1 mt-3 lg:mt-4 rounded">
         <bx_repeat:items>
-            <div class="__style_prefix__-item-video">__item__</div>
+            <div class="__style_prefix__-item-video rounded">__item__</div>
         </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__ bx-def-margin-top">
+    <div class="__style_prefix__-item-files __style_prefix__-if-main __style_prefix__-if-__display__ mx-1 mt-3 lg:mt-4 rounded">
         <bx_repeat:items>
-            <div class="__style_prefix__-item-file">__item__</div>
+            <div class="__style_prefix__-item-file rounded">__item__</div>
         </bx_repeat:items>
     </div>
 </bx_if:show_files>
-<div class="__style_prefix__-item-text bx-def-margin-lefttopright">
+<div class="__style_prefix__-item-text mt-3 lg:mt-4 mx-3 lg:mx-4">
     <bx_if:show_title>
-        <div class="__style_prefix__-title bx-def-margin-sec-bottom bx-def-font-h3">__title__</div>
+        <div class="__style_prefix__-title mb-1 lg:mb-2 text-lg lg:text-xl font-semibold text-gray-700 dark:text-gray-300">__title__</div>
     </bx_if:show_title>
     <bx_if:show_content>
-        <div class="__style_prefix__-content bx-overflow-ready bx-def-vanilla-html prose dark:prose-invert prose-sm max-w-none">__item_content__</div>
+        <div class="__style_prefix__-content bx-overflow-ready bx-def-vanilla-html relative mb-2 prose dark:prose-invert prose-sm max-w-none">__item_content__</div>
     </bx_if:show_content>
 </div>
 <bx_if:show_attachments>
-    <div class="__style_prefix__-item-attachments __style_prefix__-ia-__display__ __style_prefix__-ia-i__count__ bx-def-margin-top bx-def-margin-leftright">
+    <div class="__style_prefix__-item-attachments __style_prefix__-ia-__display__ __style_prefix__-ia-i__count__ mx-1 mt-3 lg:mt-4">
         <bx_repeat:items>
             <div class="__style_prefix__-item-attachment__class__">__item__</div>
         </bx_repeat:items>
     </div>
 </bx_if:show_attachments>
 <bx_if:show_links>
-    <div class="__style_prefix__-item-links bx-def-margin-top bx-def-margin-leftright">
+    <div class="__style_prefix__-item-links px-3 lg:px-4">
         <bx_repeat:links>
-            <div class="__style_prefix__-item-link bx-def-margin-top-auto">__link__</div>
+            <div class="__style_prefix__-item-link mt-3 lg:mt-4">__link__</div>
         </bx_repeat:links>
     </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__ bx-def-margin-top bx-def-margin-leftright">
+    <div class="__style_prefix__-item-attachments __style_prefix__-iaf-__display__ __style_prefix__-iaf-i__count__ mx-1 mt-3 lg:mt-4">
         <bx_repeat:items>
             <div class="__style_prefix__-item-attachment__class__">__item__</div>
         </bx_repeat:items>
     </div>
 </bx_if:show_attachments_files>
 <bx_if:show_raw>
-    <div class="__style_prefix__-item-raw bx-def-margin-top bx-def-margin-leftright">__item_content_raw__</div>
+    <div class="__style_prefix__-item-raw px-3 lg:px-4 mt-3 lg:mt-4">__item_content_raw__</div>
 </bx_if:show_raw>

modules/boonex/videos/template/form_ghost_template.html

@@ -1,30 +1,33 @@
-<div id="bx-uploader-file-{storage_object}-{file_id}" class="bx-uploader-ghost bx-def-margin-sec-top bx-clearfix">
+<div id="bx-uploader-file-{storage_object}-{file_id}" class="bx-uploader-ghost mt-2 flex items-start">
     <input type="hidden" name="__name__[]" value="{file_id}" />
-    <div class="bx-base-general-icon-wrapper bx-def-margin-sec-right">
+    <div class="bx-base-general-icon-wrapper mr-2">
         <img src="{file_icon}" class="bx-def-round-corners bx-base-general-icon bx-base-general-icon-{file_id}" />
     </div>
     <span class="bx-base-general-uploader-ghost">
-        <b><bx_text:_sys_txt_form_entry_input_picture_pic_url /></b><br />
-        <input class="bx-def-font-inputs bx-form-input-text bx-def-margin-sec-bottom" type="text" value="{file_url}" readonly="1" /> <br />
-
-        <span id="bx-base-general-intert-to-post-link-{file_id}" style="display:none;">
-            <a class="bx-btn bx-btn-small bx-def-margin-sec-right" href="javascript:void(0);" onclick="bx_base_general_insert_to_post('{file_id}', '{file_url}', '__editor_id__');"><bx_text:_sys_txt_form_entry_input_picture_insert /></a>
-        </span>
-        <a class="bx-btn bx-btn-small bx-def-margin-sec-right" href="javascript:void(0);" onclick="bx_base_general_delete_ghost('{file_id}', '{file_url}', '{file_icon}', ['__editor_id__'], {js_instance_name});"><bx_text:_sys_txt_form_entry_input_picture_delete /></a>
-        <bx_if:set_thumb>
-            <br />
-            <span class="bx-base-general-use-as-thumb">
-                <input type="checkbox" name="__name_thumb__[]" value="{file_id}" onclick="bx_base_general_select_thumb(this)" id="__name_thumb__-{file_id}" /> 
-                <label for="__name_thumb__-{file_id}">__txt_pict_use_as_thumb__</label>
-            </span>
-        </bx_if:set_thumb>
-        <bx_if:set_poster>
-            <br />
-            <span class="bx-base-general-use-as-poster">
-                <input type="checkbox" name="__name_poster__[]" value="{file_id}" onclick="bx_base_general_select_ghost(this, '__name_poster__')" id="__name_poster__-{file_id}" /> 
-                <label for="__name_poster__-{file_id}">__txt_pict_use_as_poster__</label>
+        <div class="font-bold"><bx_text:_sys_txt_form_entry_input_picture_pic_url /></div>
+        <div class="bx-form-input-wrapper bx-form-input-wrapper-text mt-1">
+            <input class="bx-def-font-inputs bx-form-input-text block w-full py-2 px-3 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm bg-white dark:bg-gray-900 placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-2 focus:text-gray-900 dark:focus:text-gray-100 focus:ring-blue-500 focus:border-opacity-70 focus:ring-opacity-20 focus:border-blue-500 text-sm text-gray-700 dark:text-gray-300 appearance-none" type="text" value="{file_url}" readonly="1" />
+        </div>
+        <div class="mt-2">
+            <span id="bx-base-general-intert-to-post-link-{file_id}" style="display:none;">
+                <a class="bx-btn bx-btn-small bx-def-margin-sec-right" href="javascript:void(0);" onclick="bx_base_general_insert_to_post('{file_id}', '{file_url}', '__editor_id__');"><bx_text:_sys_txt_form_entry_input_picture_insert /></a>
             </span>
-        </bx_if:set_poster>
+            <a class="bx-btn bx-btn-small bx-def-margin-sec-right" href="javascript:void(0);" onclick="bx_base_general_delete_ghost('{file_id}', '{file_url}', '{file_icon}', ['__editor_id__'], {js_instance_name});"><bx_text:_sys_txt_form_entry_input_picture_delete /></a>
+            <bx_if:set_thumb>
+                <br />
+                <span class="bx-base-general-use-as-thumb">
+                    <input type="checkbox" name="__name_thumb__[]" value="{file_id}" onclick="bx_base_general_select_thumb(this)" id="__name_thumb__-{file_id}" /> 
+                    <label for="__name_thumb__-{file_id}">__txt_pict_use_as_thumb__</label>
+                </span>
+            </bx_if:set_thumb>
+            <bx_if:set_poster>
+                <br />
+                <span class="bx-base-general-use-as-poster">
+                    <input type="checkbox" name="__name_poster__[]" value="{file_id}" onclick="bx_base_general_select_ghost(this, '__name_poster__')" id="__name_poster__-{file_id}" /> 
+                    <label for="__name_poster__-{file_id}">__txt_pict_use_as_poster__</label>
+                </span>
+            </bx_if:set_poster>
+        </div>
     </span>
 </div>
 <script>

modules/boonex/videos/template/form_ghost_template_video.html

@@ -1,13 +1,17 @@
-<div id="bx-uploader-file-{storage_object}-{file_id}" class="bx-uploader-ghost bx-def-margin-sec-top bx-clearfix">
+<div id="bx-uploader-file-{storage_object}-{file_id}" class="bx-uploader-ghost mt-2 flex items-start">
     <input type="hidden" name="__name__[]" value="{file_id}" />
-    <div class="bx-base-general-icon-wrapper bx-def-margin-sec-right">
+    <div class="bx-base-general-icon-wrapper mr-2">
         <img src="{file_icon}" class="bx-def-round-corners bx-base-general-icon bx-base-general-icon-{file_id}" />
     </div>
     <span class="bx-base-general-uploader-ghost">
-        <b><bx_text:_sys_txt_form_entry_input_picture_pic_url /></b><br />
-        <input class="bx-def-font-inputs bx-form-input-text bx-def-margin-sec-bottom" type="text" value="{file_url}" readonly="1" /><br />
-        <input type="hidden" name="__name_thumb__" value="{file_id}" />
-        <a class="bx-btn bx-btn-small bx-def-margin-sec-right" href="javascript:void(0);" onclick="bx_base_general_delete_ghost('{file_id}', '{file_url}', '{file_icon}', [], {js_instance_name});"><bx_text:_sys_txt_form_entry_input_picture_delete /></a>
+        <div class="font-bold"><bx_text:_sys_txt_form_entry_input_picture_pic_url /></div>
+        <div class="bx-form-input-wrapper bx-form-input-wrapper-text mt-1">
+            <input class="bx-def-font-inputs bx-form-input-text block w-full py-2 px-3 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm bg-white dark:bg-gray-900 placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-2 focus:text-gray-900 dark:focus:text-gray-100 focus:ring-blue-500 focus:border-opacity-70 focus:ring-opacity-20 focus:border-blue-500 text-sm text-gray-700 dark:text-gray-300 appearance-none" type="text" value="{file_url}" readonly="1" />
+        </div>
+        <div class="mt-2">
+            <input type="hidden" name="__name_thumb__" value="{file_id}" />
+            <a class="bx-btn bx-btn-small bx-def-margin-sec-right" href="javascript:void(0);" onclick="bx_base_general_delete_ghost('{file_id}', '{file_url}', '{file_icon}', [], {js_instance_name});"><bx_text:_sys_txt_form_entry_input_picture_delete /></a>
+        </div>
     </span>
 </div>
 <script>
@@ -15,4 +19,4 @@
     $(".bx-base-general-icon-{file_id}").bind('dragstart', function() {
         return false; 
     });
-</script>
+</script>