Ticket #3766 - Artificer template (part 3): Menus, Application mode, Forms, etc.

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

@@ -80,7 +80,7 @@
             </bx_if:show_menu_item_actions>
             <bx_if:show_manage>
                 <div class="__style_prefix__-item-manage">
-                    <a class="group flex items-center p-1 px-2 border border-transparent rounded-md space-x-1 text-gray-500 hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700" href="javascript:void(0)" onclick="__onclick__">
+                    <a class="group bx-stl-mil" href="javascript:void(0)" onclick="__onclick__">
                         <span class="bx-menu-item-icon bx-def-align-center leading-5"><i class="sys-icon ellipsis-h"></i></span>
                     </a>
                 </div>

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

@@ -3,7 +3,7 @@
         <bx_if:icon><div class="bx-menu-item-icon bx-stl-mii-sm mr-0 group-hover:text-gray-700 dark:group-hover:text-gray-300"><i class="sys-icon __icon__"></i></div></bx_if:icon>
         <bx_if:image><div class="bx-menu-item-icon bx-stl-mii-sm mr-0"><img style="background-image:url(__icon_url__)" src="<bx_icon_url:spacer.gif />" /></div></bx_if:image>
         <bx_if:icon-html><div class="bx-menu-item-icon bx-stl-mii-sm mr-0 group-hover:text-gray-700 dark:group-hover:text-gray-300">__icon__</div></bx_if:icon-html>
-        <bx_if:title><div class="bx-menu-item-title bx-stl-mit ml-1 first:ml-0">__title__</div></bx_if:title>
+        <bx_if:title><div class="bx-menu-item-title bx-stl-mit">__title__</div></bx_if:title>
     </a>
     <bx_if:addon>__addon__</bx_if:addon>
 </div>

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

@@ -141,13 +141,17 @@ div.bx-popup-menu-main.sys-add-content ul {
     -webkit-justify-content: center;
     justify-content: center;
 
-    padding: 0;
+    padding-left: 0;
+    padding-right: 0;
 }
 .bx-mc-narrowed .bx-menu-panel li .bx-stl-mii {
     width: 100%;
-    margin: 0;
     text-align: center;
 }
+.bx-mc-narrowed .bx-menu-panel li .bx-stl-mii,
+.bx-mc-narrowed .bx-menu-panel li .bx-stl-mii > * {
+    margin: 0;
+}
 .bx-mc-narrowed .bx-menu-panel .bx-def-thumb-size {
     width: 2rem;
     height: 2rem;

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

@@ -3,7 +3,7 @@
         <bx_if:icon><span class="bx-mi-icon bx-stl-mii-sm mr-0  group-hover:text-gray-700 dark:group-hover:text-gray-300"><i class="sys-icon __icon__"></i></span></bx_if:icon>
         <bx_if:image><span class="bx-mi-icon bx-stl-mii-sm mr-0 "><img style="background-image:url(__icon_url__)" src="<bx_icon_url:spacer.gif />" /></span></bx_if:image>
         <bx_if:icon-html><span class="bx-mi-icon bx-stl-mii-sm mr-0 group-hover:text-gray-700 dark:group-hover:text-gray-300">__icon__</span></bx_if:icon-html>
-        <bx_if:title><span class="bx-mi-title bx-stl-mit ml-1 first:ml-0">__title__</span></bx_if:title>
+        <bx_if:title><span class="bx-mi-title bx-stl-mit">__title__</span></bx_if:title>
     </a>
     <bx_if:addon>__addon__</bx_if:addon>
 </div>

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

@@ -12,7 +12,7 @@
         <bx_if:show_submenu>
             <ul class="bx-sidebar-dropdown-content space-y-1 hidden">
                 <bx_repeat:submenu_items>
-                    <li class="bx-stl-mil-hover group flex items-center w-full pl-11 pr-2 py-2 text-gray-600 dark:text-gray-300 text-sm font-medium rounded-md">
+                    <li class="bx-stl-mil-hover group flex items-center w-full pl-12 pr-2 py-2 text-gray-600 dark:text-gray-300 text-sm font-medium rounded-md">
                         <a href="__link__" onclick="__onclick__"__attrs__>__title__</a>
                     </li>
                 </bx_repeat:submenu_items>

plugins_public/tailwind/css/tailwind.css

@@ -14,6 +14,10 @@
 
 @layer components {
     /* Global: HTML tags */
+    a {
+        @apply hover:underline;
+    }
+
     ol, ul {
         @apply pl-10 list-outside;
     }
@@ -427,18 +431,26 @@
     }
 
     .bx-def-font-author {
-        @apply text-sm text-gray-700 dark:text-gray-200 font-semibold;
+        @apply text-sm text-gray-800 hover:text-black dark:text-gray-300 dark:hover:text-white font-semibold;
     }
 
     .bx-def-font-meta {
         @apply text-sm font-normal;
     }
     .bx-def-font-meta:not(a) {
-        @apply text-gray-700 dark:text-gray-500 text-opacity-60;
+        @apply text-gray-700 dark:text-gray-400 text-opacity-60;
     }
 
     .bx-artificer .bx-def-a-colored {
-        @apply no-underline text-blue-600 hover:text-blue-700 dark:text-blue-500 dark:hover:text-blue-600;
+        @apply text-blue-600 hover:text-blue-700 dark:text-blue-500 dark:hover:text-blue-600;
+    }
+
+    .bx-artificer a.bx-def-font-meta,
+    .bx-artificer a.bx-def-font-meta.bx-def-a-colored {
+        @apply text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-50;
+    }
+    .bx-artificer .bx-def-font-meta:not(a) {
+        @apply text-opacity-100;
     }
 
     .bx-artificer .bx-def-font-small {
@@ -628,7 +640,8 @@
         @apply font-normal text-blue-600 hover:text-blue-700 dark:text-blue-500 dark:hover:text-blue-600;
     }
 
-    .bx-artificer .bx-form-caption {
+    .bx-artificer .bx-form-caption,
+    .bx-artificer .bx-form-row-view-caption {
         @apply text-gray-700 dark:text-gray-300 text-sm font-medium;
     }
 
@@ -785,7 +798,7 @@
     }
 
 
-    /* Common elements: Menus */
+    /* Common elements: Menus */   
     .bx-artificer .bx-stl-mil,
     .bx-artificer .bx-stl-mil-sm,
     .bx-artificer .bx-stl-mil-wo-bg,
@@ -793,6 +806,16 @@
         @apply leading-6 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 font-medium;
     }
     
+    .bx-artificer .bx-menu-item a:not(.bx-def-font-meta),
+    .bx-artificer a.bx-stl-mil:not(.bx-def-font-meta),
+    .bx-artificer a.bx-stl-mil-wo-bg:not(.bx-def-font-meta),
+    .bx-artificer a.bx-stl-mil-wo-bg-gaps:not(.bx-def-font-meta),
+    .bx-artificer .bx-stl-mil a:not(.bx-def-font-meta),
+    .bx-artificer .bx-stl-mil-wo-bg a:not(.bx-def-font-meta),
+    .bx-artificer .bx-stl-mil-wo-bg-gaps a:not(.bx-def-font-meta) {
+        @apply hover:no-underline;
+    }
+
     .bx-artificer .bx-stl-mil,
     .bx-artificer .bx-stl-mil-sm,
     .bx-artificer .bx-stl-mil-wo-bg {
@@ -847,14 +870,14 @@
     .bx-artificer .bx-stl-mil .sys-action-do-icon ~ .sys-action-do-text {
         @apply ml-0; 
     }
-    .bx-artificer .bx-stl-mii-sm {
-        @apply h-4 w-4 mr-1 leading-4 text-sm;
+    .bx-artificer .bx-stl-mii-sm > * {
+        @apply h-4 w-4 mr-1.5 leading-4 text-sm;
     }
     .bx-artificer .bx-stl-mit {
         @apply truncate;
     }
     .bx-artificer .bx-stl-mia {
-        @apply inline-block py-0.5 px-2 bg-gray-200 dark:bg-gray-800 text-gray-600 dark:text-gray-300 text-xs rounded-full;
+        @apply inline-block py-0.5 px-2 bg-gray-200/50 dark:bg-gray-800/50 text-gray-600 dark:text-gray-300 text-xs rounded-full;
     }
 
     /* Horizontal menu */
@@ -959,7 +982,7 @@
 
     .bx-artificer .bx-base-text-unit-title a,
     .bx-artificer .bx-tl-title a {
-        @apply hover:underline hover:text-blue-700 dark:hover:text-blue-600;
+        @apply text-gray-800 hover:text-black dark:text-gray-300 dark:hover:text-white hover:no-underline;
     }
 
     .bx-artificer .bx-base-pofile-unit-online {

plugins_public/tailwind/js/tailwind.config.js

@@ -85,7 +85,7 @@ module.exports = {
 
     'flickity-button',
 	  
-	'ql-editor',
+    'ql-editor',
   ],
   darkMode: 'class', // false or 'media' or 'class'
   theme: {

template/menu_apps.html

@@ -1,9 +1,9 @@
-<div id="__name__" class="bx-popup bx-popup-box z-20 z-50 max-w-sm my-4 hidden overflow-hidden text-base divide-y divide-gray-100 dark:divide-gray-600 bg-white dark:bg-gray-800 rounded-md shadow">
-    <div class="bx-popup-header block px-4 py-2 text-center text-lg lg:text-xl font-semibold text-gray-800 dark:text-gray-100">__title__</div>
-    <div class="bx-popup-content grid grid-cols-3 gap-4 p-4">
+<div id="__name__" class="bx-popup bx-popup-box z-20 z-50 max-w-sm my-4 p-4 hidden overflow-hidden text-base bg-white dark:bg-gray-800 ring-1 ring-gray-300 dark:ring-gray-700 rounded-md shadow">
+    <div class="bx-popup-header block pb-4 leading-8 text-lg lg:text-xl text-gray-800 dark:text-gray-100 font-semibold">__title__</div>
+    <div class="bx-popup-content grid grid-cols-3 gap-4">
         <bx_repeat:menu_items>
             <a class="block p-4 text-center rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600" href="__link__" onclick="__onclick__"__attrs__>
-                <div class="w-7 h-7 mx-auto mb-1 text-gray-500 dark:text-gray-400">
+                <div class="w-8 h-8 mx-auto mb-1 text-gray-500 dark:text-gray-400 text-2xl">
                     <bx_include_auto:menu_icon.html />
                 </div>
                 <div class="text-sm font-medium text-gray-900 dark:text-white">__title__</div>