Ticket #3629 - Artificer template (Part 2): Auth.

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

@@ -1,11 +1,11 @@
-<div class="sys-auth-block __class_container__ flex flex-wrap justify-between">
+<div class="sys-auth-block __class_container__ grid gap-2 mb-4">
     <bx_repeat:buttons>
-        <div class="sys-auth __class__ flex w-1/2 mb-2">
-            <a class="group inline-flex items-center justify-center w-full px-4 py-2 border border-gray-300 dark:border-gray-700 shadow-sm hover:shadow-md text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 dark:hover:text-white hover:text-gray-800 bg-white dark:bg-gray-800 dark:hover:bg-gray-700 hover:bg-gray-50" href="__href__" <bx_if:show_onclick> onclick="__onclick__"</bx_if:show_onclick> title="__title_alt__">
+        <div class="sys-auth __class__ flex">
+            <a class="group inline-flex items-center justify-start w-full px-4 py-2 border border-gray-300 dark:border-gray-700 shadow-sm hover:shadow-md text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 dark:hover:text-white hover:text-gray-800 bg-white dark:bg-gray-800 dark:hover:bg-gray-700 hover:bg-gray-50" href="__href__" <bx_if:show_onclick> onclick="__onclick__"</bx_if:show_onclick> title="__title_alt__">
                 <bx_if:show_icon>
                     <span class="sys-auth-icon flex items-center justify-center h-5 w-5"><i class="sys-icon __icon__ sys-colored"></i></span>
                 </bx_if:show_icon>
-                <bx_if:show_title><span class="sys-auth-text ml-2">__title__</span></bx_if:show_title>
+                <bx_if:show_title><span class="sys-auth-text ml-2 truncate">__title__</span></bx_if:show_title>
             </a>
         </div>
     </bx_repeat:buttons>

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

@@ -2,14 +2,9 @@
 import url(../../../../../../../template/css/auth.css);
 --*/
 
-.sys-auth-block.sys-auth-compact-container {
-    -webkit-justify-content:flex-start;
-    justify-content:flex-start;
-    margin-left: 0;
-}
-
-.sys-auth.sys-auth-compact {
-    width: auto;
+.sys-auth.sys-auth-compact a {
+    -webkit-justify-content: center;
+    justify-content: center;
 }
 
 .sys-auth.sys-auth-compact .bx-btn {

plugins_public/tailwind/css/tailwind.css

@@ -560,7 +560,15 @@
     .bx-artificer .bx-base-general-unit-meta ul.bx-menu-custom.bx-menu-custom-hor .bx-base-pofile-unit {
         @apply p-1 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700;
     }
-    
+
+    /* Common elements: Auth */
+    .sys-auth-block {
+        @apply grid-cols-2;
+    }
+    .sys-auth-block.sys-auth-compact-container {
+        @apply grid-cols-4;
+    }
+
     /* Modules: Timeline */
     .bx-artificer .bx-menu-custom-hor.bx-menu-object-bx_timeline_menu_view li.bx-menu-tab-active a {
         @apply bg-gray-50 dark:bg-gray-700 ring-1 ring-gray-200 dark:ring-gray-600 text-gray-900 dark:text-white shadow;

plugins_public/tailwind/js/tailwind.config.js

@@ -44,16 +44,18 @@ module.exports = {
         'bx-def-padding-thd', 'bx-def-padding-thd-left', 'bx-def-padding-thd-left-auto', 'bx-def-padding-thd-right', 'bx-def-padding-thd-top', 'bx-def-padding-thd-top-auto', 'bx-def-padding-thd-bottom', 'bx-def-padding-thd-leftright', 'bx-def-padding-thd-topbottom', 'bx-def-padding-thd-lefttopright', 'bx-def-padding-thd-rightbottomleft', 
         'bx-def-font-small', 'bx-def-font-middle', 'bx-def-font-large', 'bx-def-font-h3', 'bx-def-font-h2', 'bx-def-font-h1', 
         'bx-def-a-colored',
-
-        'bx-form-required', 'bx-form-warn', 'bx-switcher-cont', 
-        'bx-popup-full-screen', 'bx-popup-fog',
-        'bx-informer-msg-info', 'bx-informer-msg-alert', 'bx-informer-msg-error',
         'bx-def-unit-alert', 'bx-def-unit-alert-small', 'bx-def-unit-alert-middle',
         'bx-def-label',
         'bx-def-icon-size', 'bx-def-thumb-size', 'bx-def-ava-size', 'bx-def-ava-big-size',
         'bx-def-color-bg-box-active', 
 
+        'bx-form-required', 'bx-form-warn', 'bx-switcher-cont', 
+        'bx-popup-full-screen', 'bx-popup-fog',
+        'bx-informer-msg-info', 'bx-informer-msg-alert', 'bx-informer-msg-error',
+
         'bx-base-general-unit-meta-username',
+
+        'sys-auth-block', 'sys-auth-compact-container',
     ]
   },
   darkMode: 'media', // false or 'media' or 'class'

template/auth.html

@@ -1,10 +1,10 @@
 <div class="sys-auth-block bx-def-margin-bottom __class_container__">
     <bx_repeat:buttons>
-        <div class="sys-auth __class__ bx-def-margin-sec-bottom  bx-clearfix">
+        <div class="sys-auth __class__ bx-def-margin-sec-right bx-def-margin-sec-bottom bx-clearfix">
             <a class="bx-btn" href="__href__"
                 <bx_if:show_onclick> onclick="__onclick__"</bx_if:show_onclick> title="__title_alt__">
                 <bx_if:show_icon><i class="sys-icon __icon__ sys-colored"></i></bx_if:show_icon><bx_if:show_title><u>__title__</u></bx_if:show_title>
             </a>
         </div>
     </bx_repeat:buttons>
-</div>
+</div>

template/css/auth.css

@@ -10,7 +10,7 @@
 }
 
 .sys-auth-block .sys-auth:not(.sys-auth-compact) {
-    width: 48%;
+    width: 47%;
 }
 
 .sys-auth .bx-btn {

template/scripts/BxBaseServiceLogin.php

@@ -68,7 +68,7 @@ class BxBaseServiceLogin extends BxDol
             $sTitle = _t($aItems['Title']);
 
             $aTmplButtons[] = array( 
-            	'class' => ($bCompact ? 'sys-auth-compact bx-def-margin-sec-left-auto ' : '') . $aItems['Name'],
+            	'class' => ($bCompact ? 'sys-auth-compact ' : '') . $aItems['Name'],
                 'href' => !empty($aItems['Link']) ? BX_DOL_URL_ROOT . $aItems['Link'] : 'javascript:void(0)',
                 'title_alt' => bx_html_attribute($sTitle),
                 'bx_if:show_onclick' => array(