Ticket #3988 - Artificer template (part 5): Point 1: Layout changes. Updated Notifications.

inc/js/functions.js

@@ -642,50 +642,50 @@ function bx_menu_slide_close_all_opened () {
  * Note. oData.count_old and oData.count_new are also available and can be checked or used in notification popup.  
  */
 function bx_menu_show_live_update(oData) {
-	var sSelectorAddon = '.bx-menu-item-addon';
+    var sSelectorAddon = '.bx-menu-item-addon';
 
-	//--- Update Child Menu Item
-	if(oData.mi_child) {
-		var oMenuItem = $('.bx-menu-object-' + oData.mi_child.menu_object + ' .bx-menu-item-' + oData.mi_child.menu_item);
-		var oMenuItemAddon = oMenuItem.find(sSelectorAddon);
+    //--- Update Child Menu Item
+    if(oData.mi_child) {
+        var oMenuItem = $('.bx-menu-object-' + oData.mi_child.menu_object + ' .bx-menu-item-' + oData.mi_child.menu_item);
+        var oMenuItemAddon = oMenuItem.find(sSelectorAddon);
 
-		if(oMenuItemAddon.length > 0)
-			oMenuItemAddon.html(oData.count_new);
-		else
-			oMenuItem.append(oData.code.replace('{count}', oData.count_new));
+        if(oMenuItemAddon.length > 0)
+            oMenuItemAddon.html(oData.count_new);
+        else
+            oMenuItem.append(oData.code.replace('{count}', oData.count_new));
 
-		//+++ Check for 0 value
-		oMenuItemAddon = oMenuItem.find(sSelectorAddon);
-		if(parseInt(oData.count_new) > 0)
-			oMenuItemAddon.show();
-		else
-			oMenuItemAddon.hide();
-	}
+        //+++ Check for 0 value
+        oMenuItemAddon = oMenuItem.find(sSelectorAddon);
+        if(parseInt(oData.count_new) > 0)
+            oMenuItemAddon.show();
+        else
+            oMenuItemAddon.hide();
+    }
 
-	//--- Update Parent Menu Item
-	if(oData.mi_parent) {
-		var oMenuItem = $('.bx-menu-object-' + oData.mi_parent.menu_object + ' .bx-menu-item-' + oData.mi_parent.menu_item);
-		var oMenuItemAddon = oMenuItem.find(sSelectorAddon);
+    //--- Update Parent Menu Item
+    if(oData.mi_parent) {
+        var oMenuItem = $('.bx-menu-object-' + oData.mi_parent.menu_object + ' .bx-menu-item-' + oData.mi_parent.menu_item);
+        var oMenuItemAddon = oMenuItem.find(sSelectorAddon);
 
-		var iSum = 0;
-		$('.bx-menu-object-' + oData.mi_child.menu_object + ' .bx-menu-item .bx-menu-item-addon').each(function() {
-			iValue = parseInt($(this).html());
-			if(iValue && iValue > 0)
-				iSum += iValue;
-		});
+        var iSum = 0;
+        $('.bx-menu-object-' + oData.mi_child.menu_object + ' .bx-menu-item:visible .bx-menu-item-addon').each(function() {
+            iValue = parseInt($(this).html());
+            if(iValue && iValue > 0)
+                iSum += iValue;
+        });
 
-		if(oMenuItemAddon.length > 0)
-			oMenuItemAddon.html(iSum);
-		else
-			oMenuItem.append(oData.code.replace('{count}', iSum));
+        if(oMenuItemAddon.length > 0)
+            oMenuItemAddon.html(iSum);
+        else
+            oMenuItem.append(oData.code.replace('{count}', iSum));
 
-		//+++ Check for 0 value
-		oMenuItemAddon = oMenuItem.find(sSelectorAddon);
-		if(iSum > 0)
-			oMenuItemAddon.show();
-		else
-			oMenuItemAddon.hide();
-	}
+        //+++ Check for 0 value
+        oMenuItemAddon = oMenuItem.find(sSelectorAddon);
+        if(iSum > 0)
+            oMenuItemAddon.show();
+        else
+            oMenuItemAddon.hide();
+    }
 }
 
 function bx_menu_show_more_less(oLink, sMenu, sSelectorParent) {

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

@@ -1,6 +1,6 @@
 <ul class="bx-menu-toolbar bx-menu-object-__object__ flex items-center pr-0 md:pr-2">
     <bx_repeat:menu_items>
-        <li id="bx-menu-toolbar-item-__name__" class="bx-menu-toolbar-item bx-menu-item-__name__ group relative inline-flex items-center ml-2 first:ml-0 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 text-base font-medium leading-6 border border-transparent hover:border-gray-200/50 active:border-gray-300 dark:hover:border-gray-700/50 dark:active:border-gray-700 bg-gray-100 dark:bg-gray-700/50 active:bg-gray-300 dark:active:bg-black/50 hover:bg-gray-200/50 dark:hover:bg-gray-700/50 rounded-full __class_add__">
+        <li id="bx-menu-toolbar-item-__name__" class="bx-menu-toolbar-item bx-menu-item-__name__ group relative inline-flex items-center mr-2 last:mr-0 bx-mdr-hidden:mr-0 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 text-base font-medium leading-6 border border-transparent hover:border-gray-200/50 active:border-gray-300 dark:hover:border-gray-700/50 dark:active:border-gray-700 bg-gray-100 dark:bg-gray-700/50 active:bg-gray-300 dark:active:bg-black/50 hover:bg-gray-200/50 dark:hover:bg-gray-700/50 rounded-full __class_add__">
             <a href="__link__" onclick="__onclick__" class="inline-block rounded-full __class_add_a__"__attrs__>
                 <bx_if:icon><span class="relative flex items-center justify-center h-8 w-8 md:h-10 md:w-10"><i class="sys-icon __icon__"></i></bx_if:icon>
                 <bx_if:icon-a><i class="sys-icon-a" data-rotate="down" data-icon="__icon-a__" data-color="#fff"></i></bx_if:icon-a>

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

@@ -6,11 +6,7 @@
         <div class="px-3 py-3 lg:px-5 lg:pl-3">
             <div class="flex items-center justify-between">
                 <div class="flex flex-1 items-center justify-start">
-                    <!-- Mobile: Hamburger -->
-                    <div class="flex-none items-center lg:hidden mr-4 hidden">
-                        <bx_menu:sys_toolbar_site />
-                    </div>
-
+                    <!-- Sidebar Toggler -->
                     <button id="toggleSidebar" aria-expanded="true" aria-controls="sidebar" class="hidden p-2 mr-6 text-gray-600 rounded cursor-pointer lg:inline hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-700">
                       <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h6a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
                     </button>
@@ -18,29 +14,31 @@
                       <svg id="toggleSidebarMobileHamburger" class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h6a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
                       <svg id="toggleSidebarMobileClose" class="hidden w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
                     </button>
-                    <!-- Logo -->
-                    <div id="bx-logo-container" class="bx-toolbar-item bx-ti-left bx-ti-logo flex-none items-center">
-                        <bx_injection:injection_logo_before />
-                        __main_logo__
-                        <bx_injection:injection_logo_after />
-                    </div>
-                    <!-- Menu -->
-                    <div class="bx-toolbar-item bx-ti-menu flex-2 w-64 ml-4">
-                        <div id="bx-menu-toolbar-1-container" class="bx-toolbar-item bx-ti-menu w-full">
-                            <bx_menu:sys_application />
+                    <div class="bx-toolbar-items-group relative flex flex-1 items-center justify-start">
+                        <!-- Logo -->
+                        <div id="bx-logo-container" class="bx-toolbar-item bx-ti-left bx-ti-logo flex-none items-center">
+                            <bx_injection:injection_logo_before />
+                            __main_logo__
+                            <bx_injection:injection_logo_after />
                         </div>
-                    </div>
-                    <!-- Search -->
-                    <div class="bx-toolbar-item bx-ti-search flex flex-1 items-center justify-end">
-                        <div class="bx-ti-search-box flex items-start md:min-w-88 mx-4 bg-white dark:bg-gray-800 rounded-md shadow-lg lg:shadow-none hidden lg:block">
-                            <div class="relative w-full">__sys_site_search__</div>
+                        <!-- Menu -->
+                        <div class="bx-toolbar-item bx-ti-menu flex-2 hidden lg:block w-64 ml-4">
+                            <div id="bx-menu-toolbar-1-container" class="bx-toolbar-item bx-ti-menu w-full">
+                                <bx_menu:sys_application />
+                            </div>
                         </div>
-                        <div class="bx-ti-search-button group relative inline-flex lg:hidden items-center mx-2 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 text-base font-medium leading-6 border border-transparent hover:border-gray-200/50 active:border-gray-300 dark:hover:border-gray-700/50 dark:active:border-gray-700 bg-gray-100 dark:bg-gray-700/50 active:bg-gray-300 dark:active:bg-black/50 hover:bg-gray-200/50 dark:hover:bg-gray-700/50 rounded-full">
-                            <a href="javascript:void(0)" onclick="javascript:bx_site_search_show(this)">
-                                <span class="relative flex items-center justify-center h-8 w-8 md:h-10 md:w-10">
-                                    <bx_image_auto:search />
-                                </span>
-                            </a>
+                        <!-- Search -->
+                        <div class="bx-toolbar-item bx-ti-search flex flex-1 items-center justify-end">
+                            <div class="bx-ti-search-box flex items-start md:min-w-88 mr-2 bg-white dark:bg-gray-800 rounded-md shadow-lg lg:shadow-none hidden lg:block">
+                                <div class="relative w-full">__sys_site_search__</div>
+                            </div>
+                            <div class="bx-ti-search-button group relative inline-flex lg:hidden items-center mx-2 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 text-base font-medium leading-6 border border-transparent hover:border-gray-200/50 active:border-gray-300 dark:hover:border-gray-700/50 dark:active:border-gray-700 bg-gray-100 dark:bg-gray-700/50 active:bg-gray-300 dark:active:bg-black/50 hover:bg-gray-200/50 dark:hover:bg-gray-700/50 rounded-full">
+                                <a href="javascript:void(0)" onclick="javascript:bx_site_search_show(this)">
+                                    <span class="relative flex items-center justify-center h-8 w-8 md:h-10 md:w-10">
+                                        <bx_image_auto:search />
+                                    </span>
+                                </a>
+                            </div>
                         </div>
                     </div>
                 </div>

modules/boonex/notifications/install/sql/enable.sql

@@ -56,13 +56,13 @@ INSERT INTO `sys_menu_items`(`set_name`, `module`, `name`, `title_system`, `titl
 
 -- MENU: member toolbar
 SET @iMenuToolbarMenuOrder = (SELECT IFNULL(MAX(`order`), 0) FROM `sys_menu_items` WHERE `set_name`='sys_toolbar_member' LIMIT 1);
-INSERT INTO `sys_menu_items`(`set_name`, `module`, `name`, `title_system`, `title`, `link`, `onclick`, `target`, `icon`, `addon`, `markers`, `submenu_object`, `submenu_popup`, `visible_for_levels`, `active`, `copyable`, `order`) VALUES 
-('sys_toolbar_member', @sName, 'notifications-preview', '_bx_ntfs_menu_item_title_system_preview', '_bx_ntfs_menu_item_title_preview', 'javascript:void(0)', 'bx_menu_slide(''bx_notifications_preview'', this, ''site'', {id:{value:''bx_notifications_preview'', force:1}, cssClass: ''''});', '', 'bell col-green3', 'a:2:{s:6:"module";s:16:"bx_notifications";s:6:"method";s:28:"get_unread_notifications_num";}', '', 'bx_notifications_preview', 1, 2147483646, 1, 1, 0);
+INSERT INTO `sys_menu_items`(`set_name`, `module`, `name`, `title_system`, `title`, `link`, `onclick`, `target`, `icon`, `addon`, `markers`, `submenu_object`, `submenu_popup`, `visible_for_levels`, `hidden_on`, `active`, `copyable`, `order`) VALUES 
+('sys_toolbar_member', @sName, 'notifications-preview', '_bx_ntfs_menu_item_title_system_preview', '_bx_ntfs_menu_item_title_preview', 'javascript:void(0)', 'bx_menu_slide(''bx_notifications_preview'', this, ''site'', {id:{value:''bx_notifications_preview'', force:1}, cssClass: ''''});', '', 'bell col-green3', 'a:2:{s:6:"module";s:16:"bx_notifications";s:6:"method";s:28:"get_unread_notifications_num";}', '', 'bx_notifications_preview', 1, 2147483646, 9, 1, 1, 0);
 
 -- MENU: Notifications
 SET @iMIOrder = (SELECT IFNULL(MAX(`order`), 0) FROM `sys_menu_items` WHERE `set_name` = 'sys_account_notifications' AND `order` < 9999);
-INSERT INTO `sys_menu_items` (`set_name`, `module`, `name`, `title_system`, `title`, `link`, `onclick`, `target`, `icon`, `addon`, `markers`, `submenu_object`, `submenu_popup`, `visible_for_levels`, `active`, `copyable`, `order`) VALUES
-('sys_account_notifications', @sName, 'notifications-notifications', '_bx_ntfs_menu_item_title_system_notifications', '_bx_ntfs_menu_item_title_notifications', 'javascript:void(0)', 'bx_menu_slide(''bx_notifications_preview'', this, ''site'', {id:{value:''bx_notifications_preview'', force:1}});', '', 'bell col-green3', 'a:2:{s:6:"module";s:16:"bx_notifications";s:6:"method";s:28:"get_unread_notifications_num";}', '', 'bx_notifications_preview', 1, 2147483646, 0, 1, @iMIOrder + 1);
+INSERT INTO `sys_menu_items` (`set_name`, `module`, `name`, `title_system`, `title`, `link`, `onclick`, `target`, `icon`, `addon`, `markers`, `submenu_object`, `submenu_popup`, `visible_for_levels`, `hidden_on`, `active`, `copyable`, `order`) VALUES
+('sys_account_notifications', @sName, 'notifications-notifications', '_bx_ntfs_menu_item_title_system_notifications', '_bx_ntfs_menu_item_title_notifications', 'javascript:void(0)', 'bx_menu_slide(''bx_notifications_preview'', this, ''site'', {id:{value:''bx_notifications_preview'', force:1}});', '', 'bell col-green3', 'a:2:{s:6:"module";s:16:"bx_notifications";s:6:"method";s:28:"get_unread_notifications_num";}', '', 'bx_notifications_preview', 1, 2147483646, 6, 1, 1, @iMIOrder + 1);
 
 -- MENU: account settings menu
 SET @iMoAccountSettings = (SELECT IFNULL(MAX(`order`), 0) FROM `sys_menu_items` WHERE `set_name`='sys_account_settings' AND `order` < 9999 LIMIT 1);

template/_sub_header.html

@@ -1,40 +1,40 @@
 <bx_include_auto:_header.html />
-
 <div class="bx-main <bx_injection:injection_main_class />">
     <bx_injection:top />
-
     <div id="bx-toolbar" class="bx-header bx-def-z-index-nav fixed top-0 w-full ring-1 ring-gray-300 dark:ring-gray-700 bg-white/95 dark:bg-gray-800/95 backdrop-blur shadow">
         <div class="bx-header-cnt __sys_header_width__ mx-auto px-3 md:px-4 lg:px-6 box-border">
             <div class="bx-toolbar-content-wrapper">
                 <div id="bx-toolbar-content" class="bx-toolbar-content relative flex items-center justify-start h-16">
                     <!-- Mobile: Hamburger -->
-                    <div class="flex-none items-center lg:hidden mr-4">
+                    <div class="bx-toolbar-item bx-ti-hamburger flex-none items-center lg:hidden mr-4">
                         <bx_menu:sys_toolbar_site />
                     </div>
 
-                    <!-- Logo -->
-                    <div id="bx-logo-container" class="bx-toolbar-item bx-ti-left bx-ti-logo flex-none items-center">
-                        <bx_injection:injection_logo_before />
-                        __main_logo__
-                        <bx_injection:injection_logo_after />
-                    </div>
-                    <!-- Menu -->
-                    <div class="bx-toolbar-item bx-ti-menu flex-2 hidden lg:block w-64 ml-4">
-                        <div id="bx-menu-toolbar-1-container" class="bx-toolbar-item bx-ti-menu w-full">
-                            <bx_menu:sys_site />
+                    <div class="bx-toolbar-items-group relative flex flex-1 items-center justify-start h-16">
+                        <!-- Logo -->
+                        <div id="bx-logo-container" class="bx-toolbar-item bx-ti-left bx-ti-logo flex-none items-center">
+                            <bx_injection:injection_logo_before />
+                            __main_logo__
+                            <bx_injection:injection_logo_after />
                         </div>
-                    </div>
-                    <!-- Search -->
-                    <div class="bx-toolbar-item bx-ti-search relative flex-1 lg:flex-none flex items-center justify-end">
-                        <div class="bx-ti-search-box flex-auto flex items-start md:min-w-88 mx-4 bg-white/95 dark:bg-gray-800/95 rounded-md shadow-md hidden">
-                            <div class="relative w-full">__sys_site_search__</div>
+                        <!-- Menu -->
+                        <div class="bx-toolbar-item bx-ti-menu flex-2 hidden lg:block w-64 ml-4">
+                            <div id="bx-menu-toolbar-1-container" class="bx-toolbar-item bx-ti-menu w-full">
+                                <bx_menu:sys_site />
+                            </div>
                         </div>
-                        <div class="bx-ti-search-button group relative inline-flex items-center mx-2 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 text-base font-medium leading-6 border border-transparent hover:border-gray-200/50 active:border-gray-300 dark:hover:border-gray-700/50 dark:active:border-gray-700 bg-gray-100 dark:bg-gray-700/50 active:bg-gray-300 dark:active:bg-black/50 hover:bg-gray-200/50 dark:hover:bg-gray-700/50 rounded-full">
-                            <a href="javascript:void(0)" onclick="javascript:bx_site_search_show(this)">
-                                <span class="relative flex items-center justify-center h-8 w-8 md:h-10 md:w-10">
-                                    <bx_image_auto:search />
-                                </span>
-                            </a>
+                        <!-- Search -->
+                        <div class="bx-toolbar-item bx-ti-search flex-1 lg:flex-none flex items-center justify-end">
+                            <div class="bx-ti-search-box flex-auto flex items-start md:min-w-88 mr-2 bg-white/95 dark:bg-gray-800/95 rounded-md shadow-md hidden">
+                                <div class="relative w-full">__sys_site_search__</div>
+                            </div>
+                            <div class="bx-ti-search-button group relative inline-flex items-center mx-2 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 text-base font-medium leading-6 border border-transparent hover:border-gray-200/50 active:border-gray-300 dark:hover:border-gray-700/50 dark:active:border-gray-700 bg-gray-100 dark:bg-gray-700/50 active:bg-gray-300 dark:active:bg-black/50 hover:bg-gray-200/50 dark:hover:bg-gray-700/50 rounded-full">
+                                <a href="javascript:void(0)" onclick="javascript:bx_site_search_show(this)">
+                                    <span class="relative flex items-center justify-center h-8 w-8 md:h-10 md:w-10">
+                                        <bx_image_auto:search />
+                                    </span>
+                                </a>
+                            </div>
                         </div>
                     </div>
                     <!-- Members Toolbar -->
@@ -45,11 +45,9 @@
             </div>
         </div>
     </div>
-
     <bx_injection:injection_between_cover_logo />
     __cover__
     <bx_injection:injection_between_cover_top_menu />
-
     <div id="bx-menu-main-bar-wrapper" class="bx-menu-main-bar-wrapper bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 __site_submenu_hidden__">
         <div id="bx-menu-main-bar" class="bx-menu-main-bar __site_submenu_class__ bx-def-page-width mx-auto px-4 sm:px-6 lg:px-8 box-border">
             <div class="bx-menu-main-bar-cnt relative -mb-px">
@@ -61,12 +59,10 @@
             </div>
         </div>
     </div>
-
     <bx_injection:injection_between_content_menu />
-
     <div id="bx-content-wrapper">
         __informer__
         <div class="bx-page-wrapper bx-def-page-width mx-auto px-3 md:px-4 lg:px-6 box-border">
             <div id="bx-content-container" class="bx-content-container">
                 <bx_injection:injection_content_before />
-                <div id="bx-content-main" class="bx-content-main my-2 lg:my-3">
+                <div id="bx-content-main" class="bx-content-main my-2 lg:my-3">