Ticket #3399 - Popups, Account Units, Tailwind core rebuild.

modules/boonex/artificer/data/template/mod_profile/css/main.css

@@ -13,6 +13,13 @@
     justify-content: flex-start;
 }
 
+.bx-base-pofile-units-wrapper .bx-base-pofile-unit-with-cover {
+    -webkit-flex: 0 0 100%;
+    flex: 0 0 100%;
+
+    overflow: hidden;
+}
+
 /*+++ MEDIA: tablet2 +++*/
 .bx-media-tablet2 .bx-layout-column-wide .bx-base-pofile-units-wrapper .bx-base-pofile-unit-with-cover,
 .bx-media-tablet2 #sys_search_results .bx-base-pofile-units-wrapper .bx-base-pofile-unit-with-cover,

modules/boonex/artificer/data/template/mod_profile/unit_with_cover.html

@@ -15,7 +15,7 @@
                 </div>
             </bx_if:show_thumbnail>
         </a>
-        <div class="bx-base-pofile-unit-title p-2 box-border text-center">
+        <div class="bx-base-pofile-unit-title p-2 box-border text-center truncate">
             <a href="__content_url__" onclick="__content_click__" class="hover:underline text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white font-semibold">__title__</a>__badges__
         </div>
         <span class="text-sm text-gray-500 dark:text-gray-400">__addon__</span>

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

@@ -0,0 +1,17 @@
+<div class="bx-account-unit bx-def-unit flex items-center mb-4 mr-2">
+    <div class="bx-def-unit-img bx-def-__size__ bx-def-__size__-size flex-none">
+        <a class="text-center" href="__content_url__">
+            <p class="bx-account-unit-thumb bx-def-__size__ bx-def-__size__-size flex items-center justify-center box-border m-0 rounded-full text-white font-bold" style="background-color:rgba(__color__)">__letter__</p>
+        </a>
+        <bx_if:show_online>
+            <div class="bx-account-unit-online"></div>
+        </bx_if:show_online>
+    </div>
+    <div class="bx-def-unit-info bx-def-__size__-size-min-height bx-def-__size__-size-max-height flex items-center ml-4">
+        <div class="bx-def-unit-info-cnt box-border">
+            <div class="bx-def-unit-line">
+                <a class="bx-def-unit-info-title" href="__content_url__">__title__</a>
+            </div>
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,10 @@
+<div class="bx-account-unit-wo-info bx-def-__size__-size text-center">
+    <div class="bx-def-unit-img bx-def-__size__-size">
+        <a href="__content_url__">
+            <p class="bx-account-unit-thumb bx-def-__size__ bx-def-__size__-size flex items-center justify-center box-border m-0 rounded-full text-white font-bold" style="background-color:rgba(__color__)">__letter__</p>
+        </a>
+        <bx_if:show_online>
+            <div class="bx-account-unit-online"></div>
+        </bx_if:show_online>
+    </div>
+</div>

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

@@ -0,0 +1,8 @@
+<div class="bx-account-unit-wo-info bx-def-__size__-size text-center">
+    <div class="bx-def-unit-img bx-def-__size__-size">
+        <p class="bx-account-unit-thumb bx-def-__size__ bx-def-__size__-size flex items-center justify-center box-border m-0 rounded-full text-white font-bold" style="background-color:rgba(__color__)">__letter__</p>
+        <bx_if:show_online>
+            <div class="bx-account-unit-online"></div>
+        </bx_if:show_online>
+    </div>
+</div>

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

@@ -168,6 +168,17 @@ import url(../../../../../../../template/css/common.css);
 
 
 /*--- Popup boxes ---*/
+html.bx-popup-lock,
+body.bx-popup-lock {
+    overflow: hidden;
+}
+
+body > .bx-popup-wrapper {
+    max-height: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+}
+
 .bx-popup-transitions {
     -webkit-transition: opacity 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
     transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
@@ -212,4 +223,40 @@ import url(../../../../../../../template/css/common.css);
 .bx-popup-menu ul {
     margin-top: 0.5rem;
     margin-bottom: 0.5rem;
+}
+
+
+/*--- Loading indicator ---*/
+.bx-loading-ajax {
+    position: absolute;
+    width: 6rem;
+    height: 6rem;
+    margin-left: auto;
+    margin-right: auto;
+
+    background-color: transparent;
+
+    border-radius: 0.5rem;
+    -moz-border-radius: 0.5rem;
+    -webkit-border-radius: 0.5rem;
+
+    text-align: center;
+    color: #CCCCCC;
+}
+.bx-loading-ajax.static {
+    position: static;
+}
+.bx-loading-ajax-btn {
+    position: relative;
+    display: inline-block;
+    vertical-align: top;
+
+    min-width: 2.0rem;
+
+    margin-left: 0.25rem;
+}
+
+button.bx-btn:focus,
+button.bx-btn:focus .bx-loading-ajax-btn {
+    outline: 0;	
 }

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

@@ -1,9 +1,9 @@
 <div id="__id__" class="bx-popup-wrapper bx-popup-box-wrapper box-border" style="__wrapper_style__" role="dialog" aria-describedby="__id___title">
-    <div class="bx-popup-gap mx-4 my-px md:m-px">
+    <div class="bx-popup-gap mx-4 my-px">
         <div class="bx-popup bx-popup-box bx-popup-width relative ring-1 ring-gray-200 dark:ring-gray-700 bg-white dark:bg-gray-800 rounded-md shadow">
             <div class="bx-popup-header flex items-center justify-between p-3 md:p-4 lg:p-6">
                 <h2 id="__id___title">__title__</h2>
-                <div class="bx-popup-close-wrapper bx-def-media-desktop-hide bx-def-media-tablet-hide relative">
+                <div class="bx-popup-close-wrapper relative">
                     <a href="javascript:void(0);" class="bx-popup-element-close flex items-center justify-center w-6 h-6 text-base"><i class="sys-icon times text-gray-800 dark:text-gray-100"></i></a>
                 </div>
             </div>

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

@@ -1,5 +1,5 @@
 <div  id="__id__" class="bx-popup-wrapper bx-popup-responsive bx-popup-trans-wrapper box-border __wrapper_class__" style="__wrapper_style__" role="alert">
-    <div class="bx-popup-gap mx-4 my-px md:m-px">
+    <div class="bx-popup-gap mx-4 my-px">
         <div class="bx-popup bx-popup-trans relative ring-1 ring-gray-200 dark:ring-gray-700 bg-white dark:bg-gray-800 rounded-md shadow">
             <div class="bx-popup-close-wrapper bx-def-media-desktop-hide bx-def-media-tablet-hide relative pt-2 px-2 text-right">
                 <a href="javascript:void(0);" class="bx-popup-element-close flex items-center justify-center w-6 h-6 text-base"><i class="sys-icon times text-gray-800 dark:text-gray-100"></i></a>

modules/boonex/artificer/js/tailwind.config.js

@@ -13,7 +13,7 @@ module.exports = {
         'text-red-400', 
         'bx-def-a-colored',
         'bx-form-required', 'bx-form-warn',
-        'bx-popup-fog',
+        'bx-popup-full-screen', 'bx-popup-fog',
         'bx-informer-msg-info', 'bx-informer-msg-alert', 'bx-informer-msg-error',
     ]
   },

modules/boonex/artificer/template/css/tailwind.css

@@ -107,14 +107,22 @@
         @apply rounded-lg;
     }
 
-    .bx-popup-responsive:not(.bx-popup-menu) {
+    .bx-popup-responsive:not(.bx-popup-full-screen):not(.bx-popup-menu) {
         @apply w-full md:w-auto;
     }
 
+    .bx-popup-full-screen {
+        @apply w-full;
+    }
+
     .bx-popup-width {
         @apply w-full md:w-128;
     }
 
+    .bx-popup-full-screen .bx-popup-width {
+        @apply w-full md:w-full;
+    }
+
     .bx-popup-fog {
         @apply bg-gray-600 opacity-75;
     }