Ticket #3988 - Artificer template (part 5): Application mode: Left panel appears after XL.

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

@@ -7,10 +7,10 @@
             <div class="flex items-center justify-between">
                 <div class="flex flex-1 items-center justify-start">
                     <!-- 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">
+                    <button id="toggleSidebar" aria-expanded="true" aria-controls="sidebar" class="hidden p-2 mr-6 text-gray-600 rounded cursor-pointer xl: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>
-                    <button id="toggleSidebarMobile" aria-expanded="true" aria-controls="sidebar" class="p-2 mr-2 text-gray-600 rounded cursor-pointer lg:hidden hover:text-gray-900 hover:bg-gray-100 focus:bg-gray-100 dark:focus:bg-gray-700 focus:ring-2 focus:ring-gray-100 dark:focus:ring-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
+                    <button id="toggleSidebarMobile" aria-expanded="true" aria-controls="sidebar" class="p-2 mr-2 text-gray-600 rounded cursor-pointer xl:hidden hover:text-gray-900 hover:bg-gray-100 focus:bg-gray-100 dark:focus:bg-gray-700 focus:ring-2 focus:ring-gray-100 dark:focus:ring-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
                       <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>
@@ -22,17 +22,17 @@
                             <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 class="bx-toolbar-item bx-ti-menu flex-2 hidden xl: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>
                         <!-- 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="bx-ti-search-box flex items-start md:min-w-88 mr-2 bg-white dark:bg-gray-800 rounded-md shadow-lg xl:shadow-none hidden xl: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">
+                            <div class="bx-ti-search-button group relative inline-flex xl: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 />
@@ -53,14 +53,14 @@
 
     <div class="bx-main-content flex pt-16 overflow-hidden">
         <!-- BEG: Sidebar -->
-        <aside id="sidebar" class="bx-main-column narrow fixed top-0 left-0 z-20 flex flex-col flex-shrink-0 hidden w-64 h-full pt-16 duration-75 lg:flex transition-width" aria-label="Sidebar">
+        <aside id="sidebar" class="bx-main-column narrow fixed top-0 left-0 z-20 hidden xl:flex flex-col flex-shrink-0 w-64 h-full pt-16 duration-75 transition-width" aria-label="Sidebar">
             <div class="bx-mc-border relative flex flex-col flex-1 min-h-0 pt-0 bg-white border-r border-gray-200 dark:bg-gray-800 dark:border-gray-700">
                 <div class="flex flex-col flex-1 py-2 overflow-y-auto">
                     <div class="bx-mc-cnt flex-1 px-4 space-y-1 bg-white divide-y divide-gray-200 dark:bg-gray-800 dark:divide-gray-700">
                         <bx_menu:sys_site_panel />
                     </div>
                 </div>
-                <div class="absolute bottom-0 left-0 justify-center hidden w-full p-4 space-x-4 lg:flex" sidebar-bottom-menu>
+                <div class="absolute bottom-0 left-0 justify-center hidden w-full p-4 space-x-4 xl:flex" sidebar-bottom-menu>
                     <!-- Some button based menu may be here -->
                 </div>
             </div>
@@ -69,7 +69,7 @@
         <!-- END: Sidebar -->    
 
         <!-- BEG: Main Content -->
-        <div id="main-content" class="bx-main-column wide relative w-full h-full overflow-y-auto lg:ml-64">
+        <div id="main-content" class="bx-main-column wide relative w-full h-full overflow-y-auto xl:ml-64">
             <main>
                 <bx_injection:injection_between_cover_logo />
                 __cover__

modules/boonex/artificer/js/sidebar.js

@@ -8,14 +8,14 @@ const toggleSidebar = (sidebarEl, expand, setExpanded = false) => {
     if (expand) {
         sidebarEl.classList.remove('bx-mc-narrowed');
         sidebarEl.classList.add('bx-mc-expanded');
-        sidebarEl.classList.add('lg:w-64');
-        sidebarEl.classList.remove('lg:w-16');
-        mainContentEl.classList.add('lg:ml-64');
-        mainContentEl.classList.remove('lg:ml-16');
+        sidebarEl.classList.add('xl:w-64');
+        sidebarEl.classList.remove('xl:w-16');
+        mainContentEl.classList.add('xl:ml-64');
+        mainContentEl.classList.remove('xl:ml-16');
 
         document.querySelectorAll('#' + sidebarEl.getAttribute('id') + ' [sidebar-toggle-item]').forEach(sidebarToggleEl => {
-            sidebarToggleEl.classList.remove('lg:hidden');
-            sidebarToggleEl.classList.remove('lg:absolute');
+            sidebarToggleEl.classList.remove('xl:hidden');
+            sidebarToggleEl.classList.remove('xl:absolute');
             sidebarToggleEl.classList.remove('bx-mpi-toggle-hidden');
         });
 
@@ -34,13 +34,13 @@ const toggleSidebar = (sidebarEl, expand, setExpanded = false) => {
     else {
         sidebarEl.classList.add('bx-mc-narrowed');
         sidebarEl.classList.remove('bx-mc-expanded');
-        sidebarEl.classList.remove('lg:w-64');
-        sidebarEl.classList.add('lg:w-16');
-        mainContentEl.classList.remove('lg:ml-64');
-        mainContentEl.classList.add('lg:ml-16');
+        sidebarEl.classList.remove('xl:w-64');
+        sidebarEl.classList.add('xl:w-16');
+        mainContentEl.classList.remove('xl:ml-64');
+        mainContentEl.classList.add('xl:ml-16');
         document.querySelectorAll('#' + sidebarEl.getAttribute('id') + ' [sidebar-toggle-item]').forEach(sidebarToggleEl => {
-            sidebarToggleEl.classList.add('lg:hidden');
-            sidebarToggleEl.classList.add('lg:absolute');
+            sidebarToggleEl.classList.add('xl:hidden');
+            sidebarToggleEl.classList.add('xl:absolute');
             sidebarToggleEl.classList.add('bx-mpi-toggle-hidden');
         });