Ticket #3399 - Skeletons for async loading, Login/Join forms.

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

@@ -0,0 +1,59 @@
+<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

@@ -0,0 +1,39 @@
+<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/system/block_async_create_post.html

@@ -1,9 +1,7 @@
-<div class="sys-cpf-form sys-cpf-default flex items-center">
-    <div class="sys-cpf-user">
-        <div class="bx-base-pofile-unit-thumb bx-cont-ph h-10 w-10 mr-4 rounded-full box-border"></div>
-    </div>
-    <div class="sys-cpf-content flex-auto">
-        <span class="bx-cont-ph inline-block w-44">&nbsp;</span>
+<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-8 w-full bg-gray-300 dark:bg-gray-600 rounded-md">&nbsp;</div>
     </div>
 </div>
 <script>

modules/boonex/artificer/data/template/system/block_async_image.html

@@ -0,0 +1,7 @@
+<div class="h-48 m-1 mb-0 bg-gray-200 dark:bg-gray-700 rounded animate-pulse">&nbsp;</div>
+<script>
+    var iBlockID = '__id__';
+    $(document).ready(function () {
+        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/system/block_async_profile_units.html

@@ -1,21 +1,15 @@
-<div class="bx-cont-ph-profile-unit relative flex">
-    <div class="bx-base-pofile-unit-with-cover w-1/3">
-        <div class="bx-base-pofile-unit-cnt m-2 ring-1 ring-gray-200 dark:ring-gray-700 bg-white dark:bg-gray-800 rounded-md shadow-sm overflow-hidden">
-            <div class="bx-base-pofile-unit-cover flex align-items justify-center p-4 bg-gray-100 dark:bg-gray-700">
-                <div class="bx-def-unit-img bx-cont-ph h-24 w-24 rounded-full">&nbsp;</div>
-            </div>
-            <div class="bx-base-pofile-unit-title p-2 flex justify-center box-border">
-                <div class="bx-cont-ph w-20 mb-1">&nbsp;</div>
+<div class="bx-cont-ph-profile-unit relative 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="bx-base-pofile-unit-cover flex align-items justify-center p-4 bg-gray-100 dark:bg-gray-600 rounded-t-md">
+            <div class="flex-0 h-24 w-24 bg-gray-200 dark:bg-gray-700 rounded-full">&nbsp;</div>
+        </div>
+        <div class="p-2 animate-pulse">
+            <div class="flex justify-center">
+                <div class="h-5 w-1/2 bg-gray-300 dark:bg-gray-600 rounded-full">&nbsp;</div>
             </div>
-            <div class="bx-base-pofile-unit-info flex justify-center px-2 pb-2 box-border">
-                <ul id="bx-persons-snippet-meta" class="flex">
-                    <li class="bx-menu-item">
-                        <span class="bx-cont-ph-inline w-24">&nbsp;</span>
-                    </li>
-                    <li class="bx-menu-item ml-4">
-                        <span class="bx-cont-ph-inline w-24">&nbsp;</span>
-                    </li>
-                </ul>
+            <div class="flex mt-2 space-x-1">
+                <div class="h-3 w-1/2 bg-gray-200 dark:bg-gray-700 rounded-xl"></div>
+                <div class="h-3 w-1/2 bg-gray-200 dark:bg-gray-700 rounded-xl"></div>
             </div>
         </div>
     </div>

modules/boonex/artificer/data/template/system/block_async_text.html

@@ -1,10 +1,12 @@
-<div class="bx-cont-ph mb-1">&nbsp;</div>
-<div class="bx-cont-ph mb-1">&nbsp;</div>
-<div class="bx-cont-ph mb-1">&nbsp;</div>
-<div class="bx-cont-ph mb-1">&nbsp;</div>
-<div class="bx-cont-ph mb-1">&nbsp;</div>
-<div class="bx-cont-ph mb-1">&nbsp;</div>
-<div class="bx-cont-ph mb-1">&nbsp;</div>
+<div class="animate-pulse space-y-1">
+    <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded-xl">&nbsp;</div>
+    <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded-xl">&nbsp;</div>
+    <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded-xl">&nbsp;</div>
+    <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded-xl">&nbsp;</div>
+    <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded-xl">&nbsp;</div>
+    <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded-xl">&nbsp;</div>
+    <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded-xl">&nbsp;</div>
+</div>
 <script>
     var iBlockID = '__id__';
     $(document).ready(function () {

modules/boonex/artificer/data/template/system/block_async_text_units_gallery.html

@@ -1,15 +1,27 @@
-<div class="bx-cont-ph-profile-unit relative flex">
-    <div class="bx-base-text-unit bx-base-text-unit-gallery w-1/3">
-        <div class="bx-base-text-unit-cnt m-2 ring-1 ring-gray-200 dark:ring-gray-700 bg-white dark:bg-gray-800 rounded-md shadow-sm overflow-hidden">
-            <div class="bx-base-text-unit-thumb bx-cont-ph h-48 rounded-t-md">&nbsp;</div>
-            <div class="bx-base-text-unit-text px-4 py-2 box-border">
-                <div class="bx-base-text-unit-title bx-cont-ph relative w-3/4 mb-1 leading-7">&nbsp;</div>
-                <div class="bx-base-text-unit-info bx-cont-ph w-28">&nbsp;</div>
+<div class="bx-cont-ph-profile-unit relative 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="h-48 m-1 mb-0 bg-gray-200 dark:bg-gray-700 rounded animate-pulse">&nbsp;</div>
+        <div class="p-4 space-y-4 animate-pulse">
+            <div class="h-3 w-1/3 bg-gray-200 dark:bg-gray-700 rounded-xl"></div>
+            <div class="space-y-2">
+                <div class="flex space-x-1">
+                    <div class="h-5 w-1/2 bg-gray-300 dark:bg-gray-600 rounded-xl"></div>
+                    <div class="h-5 w-1/2 bg-gray-300 dark:bg-gray-600 rounded-xl"></div>
+                </div>
+                <div class="h-5 w-2/3 bg-gray-300 dark:bg-gray-600 rounded-xl"></div>
             </div>
+            <div class="flex space-x-1">
+                <div class="h-3 w-1/2 bg-gray-200 dark:bg-gray-700 rounded-xl"></div>
+                <div class="h-3 w-1/2 bg-gray-200 dark:bg-gray-700 rounded-xl"></div>
+            </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="bg-gray-200 dark:bg-gray-700 h-3 w-2/3 rounded-xl"></div>
         </div>
     </div>
 </div>
-
 <script>
     var iBlockID = '__id__';
     var sTmpl = $('#bx-page-block-' + iBlockID + ' .bx-cont-ph-profile-unit').html();
@@ -17,4 +29,4 @@
     $(document).ready(function () {
         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/artificer/data/template/system/block_async_text_units_list.html

@@ -1,19 +1,24 @@
-<div class="bx-base-text-units">
-    <div class="bx-base-text-unit bx-base-text-unit-ext mb-4 ring-1 ring-gray-200 dark:ring-gray-700 bg-white dark:bg-gray-800 rounded-md shadow-sm overflow-hidden">
-        <div class="bx-base-text-unit-cover bx-base-text-unit-cover bx-cont-ph h-72 rounded-t-md"></div>
-        <div class="bx-base-text-unit-text p-4 box-border">
-            <div class="bx-base-text-unit-title bx-cont-ph-inline relative w-3/4 mb-2 leading-7">&nbsp;</div>           
-            <div class="bx-base-text-unit-info mb-2 leading-3">
-                <ul id="bx-posts-snippet-meta">
-                    <li class="bx-menu-item bx-menu-item-date bx-cont-ph w-40">&nbsp;</li>
-                </ul>
+<div class="bx-base-text-units flex flex-col">
+    <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="h-48 m-1 mb-0 bg-gray-200 dark:bg-gray-700 rounded animate-pulse">&nbsp;</div>
+        <div class="p-4 space-y-4 animate-pulse">
+            <div class="h-3 w-1/3 bg-gray-200 dark:bg-gray-700 rounded-xl"></div>
+            <div class="space-y-2">
+                <div class="flex space-x-1">
+                    <div class="h-5 w-1/2 bg-gray-300 dark:bg-gray-600 rounded-xl"></div>
+                    <div class="h-5 w-1/2 bg-gray-300 dark:bg-gray-600 rounded-xl"></div>
+                </div>
+                <div class="h-5 w-2/3 bg-gray-300 dark:bg-gray-600 rounded-xl"></div>
             </div>
-            <div class="bx-base-text-unit-summary">
-                <div class="bx-cont-ph mb-1">&nbsp;</div>
-                <div class="bx-cont-ph mb-1">&nbsp;</div>
-                <div class="bx-cont-ph mb-1">&nbsp;</div>
-                <div class="bx-cont-ph mb-1">&nbsp;</div>
-            </div> 
+            <div class="flex space-x-1">
+                <div class="h-3 w-1/2 bg-gray-200 dark:bg-gray-700 rounded-xl"></div>
+                <div class="h-3 w-1/2 bg-gray-200 dark:bg-gray-700 rounded-xl"></div>
+            </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="bg-gray-200 dark:bg-gray-700 h-3 w-2/3 rounded-xl"></div>
         </div>
     </div>
 </div>

modules/boonex/artificer/data/template/system/block_join.html

@@ -1,6 +1,12 @@
 <bx_if:show_auth>__content__</bx_if:show_auth>
 <bx_if:show_form>__content__</bx_if:show_form>
 <bx_if:show_login>
-    <hr class="bx-def-hr my-2" />
-    <div class="text-sm font-normal text-gray-700 dark:text-gray-300"><bx_text:_sys_txt_join_description_question /> <a class="text-blue-600 hover:text-blue-700 dark:text-blue-500 dark:hover:text-blue-600" href="__url__"><bx_text:_sys_txt_join_description_action /></a></div>
-</bx_if:show_login>
+    <hr class="bx-def-hr my-4" />
+    <div class="sys-jf-login">
+        <a class="bx-btn w-full text-center" href="__url__"><bx_text:_sys_txt_join_description_action /></a>
+    </div>
+</bx_if:show_login>
+<div class="sys-jf-agreement -mx-4">
+    <hr class="bx-def-hr mt-4" />
+    <div class="sys-jf-agreement-cnt pt-4 px-4 text-xs text-gray-500">__agreement__</div>
+</div>

modules/boonex/artificer/data/template/system/block_login.html

@@ -3,11 +3,15 @@ __custom_html_before__
 <bx_if:show_form>__content__</bx_if:show_form>
 __custom_html_after__
 <bx_if:show_join>
-    <hr class="bx-def-hr my-2" />
-    <div class="text-sm font-normal text-gray-700 dark:text-gray-300">
-        <bx_text:_sys_txt_login_description_question /> <a class="text-blue-600 hover:text-blue-700 dark:text-blue-500 dark:hover:text-blue-600" href="__url__"><bx_text:_sys_txt_login_description_action /></a>
+    <hr class="bx-def-hr my-4" />
+    <div class="sys-lf-join">
+        <a class="bx-btn w-full text-center" href="__url__"><bx_text:_sys_txt_login_description_action /></a>
     </div>
 </bx_if:show_join>
+<div class="sys-lf-agreement -mx-4">
+    <hr class="bx-def-hr mt-4" />
+    <div class="sys-jf-agreement-cnt pt-4 px-4 text-xs text-gray-500">__agreement__</div>
+</div>
 <bx_if:show_js_code>
     <script>
         (bx_login_init_ajax_form = function () {

modules/boonex/artificer/data/template/system/css/general.css

@@ -34,6 +34,17 @@ import url(../../../../../../../template/css/general.css);
     display: none;
 }
 
+/*--- Join/Login Forms ---*/
+
+#sys_account .bx-form-element .bx-form-input-submit.bx-btn,
+#sys-form-login .bx-form-element .bx-form-input-submit.bx-btn {
+    width: 100%;
+    text-align: center;
+}
+#bx-form-element-submit_text .bx-form-value {
+    text-align: right;
+}
+
 
 /* --- Content loader placeholder ---*/
 @-webkit-keyframes bxPlaceHolderShimmer {

plugins_public/tailwind/css/tailwind.css

@@ -285,7 +285,7 @@
 
     /* Common Elements: HR */
     .bx-artificer .bx-def-hr {
-        @apply m-0 p-0 border-t border-gray-200 dark:border-gray-700;
+        @apply mx-0 p-0 border-t border-gray-200 dark:border-gray-700;
     }
 
     /* Common Elements: Labels */
@@ -365,7 +365,9 @@
         @apply text-sm font-normal text-gray-700 dark:text-gray-300;
     }
 
-    .bx-artificer form a {
+    .bx-artificer form a,
+    .bx-artificer .sys-jf-agreement a, 
+    .bx-artificer .sys-lf-agreement a {
         @apply font-normal text-blue-600 hover:text-blue-700 dark:text-blue-500 dark:hover:text-blue-600;
     }