Sort out max-width for selector

root/usr/share/smanager/themes/default/public/css/hwinfo.css

@@ -1,12 +1,12 @@
 /* 
  * Koozali SME Server Table Styling
  * 
- * This CSS makes tables look good with colors matching the Koozali SME Server interface.
+ * This CSS makes both node and node-unclaimed tables look good with colors matching the Koozali SME Server interface.
  * Compatible with all modern browsers and IE9+.
  */
 
-/* Basic table styling */
+/* Basic table styling for both node and node-unclaimed tables */
-table.node {
+table.node, table.node-unclaimed {
   border-collapse: collapse;
   width: 100%;
   margin: 20px 0;
@@ -19,20 +19,20 @@ table.node {
 }
 
 /* Table header styling */
-table.node thead {
+table.node thead, table.node-unclaimed thead {
   background-color: #e6f2d5;
   border-bottom: 1px solid #d5e5c0;
 }
 
 /* Table header cells */
-table.node thead td {
+table.node thead td, table.node-unclaimed thead td {
   padding: 12px 15px;
   font-weight: bold;
   color: #006600;
 }
 
 /* Table data cells */
-table.node td {
+table.node td, table.node-unclaimed td {
   padding: 10px 15px;
   border-bottom: 1px solid #e6f2d5;
   line-height: 1.4;
@@ -44,8 +44,8 @@ table.node td {
           hyphens: auto;
 }
 
-/* First column styling (labels) */
+/* First column styling (labels) - Updated color as requested */
-table.node td.first {
+table.node td.first, table.node-unclaimed td.first {
   width: 25%;
   font-weight: bold;
   color: #333;
@@ -53,22 +53,22 @@ table.node td.first {
 }
 
 /* Second column styling (values) */
-table.node td.second {
+table.node td.second, table.node-unclaimed td.second {
   width: 75%;
 }
 
 /* Zebra striping for better readability */
-table.node tbody tr:nth-child(even) {
+table.node tbody tr:nth-child(even), table.node-unclaimed tbody tr:nth-child(even) {
   background-color: #fafdf7;
 }
 
 /* Hover effect for rows */
-table.node tbody tr:hover {
+table.node tbody tr:hover, table.node-unclaimed tbody tr:hover {
   background-color: #edf5e2;
 }
 
 /* Nested tables styling */
-table.node table {
+table.node table, table.node-unclaimed table {
   width: 100%;
   border: none;
   -webkit-box-shadow: none;
@@ -76,7 +76,7 @@ table.node table {
   margin: 0;
 }
 
-table.node table td {
+table.node table td, table.node-unclaimed table td {
   padding: 4px 6px;
   border: none;
   background-color: transparent !important;
@@ -100,81 +100,190 @@ dfn {
 }
 
 /* Add some spacing between tables */
-table.node + table.node {
+table.node + table.node, 
+table.node-unclaimed + table.node-unclaimed,
+table.node + table.node-unclaimed,
+table.node-unclaimed + table.node {
   margin-top: 30px;
 }
 
+/* Navigation container styling */
+.koozali-table-nav {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  background-color: #e6f2d5;
+  padding: 10px;
+  margin-bottom: 20px;
+  z-index: 100;
+  border-bottom: 1px solid #d5e5c0;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+          box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+/* Dropdown styling */
+.koozali-table-select {
+  padding: 8px;
+  font-size: 16px;
+  border: 1px solid #d5e5c0;
+  border-radius: 4px;
+  background-color: #f5f9ef;
+  cursor: pointer;
+  margin-right: 10px;
+  color: #333;
+  width: 70%;
+  max-width: 500px;
+}
+
+/* Button styling */
+.koozali-show-all-button {
+  padding: 8px 12px;
+  background-color: #006600;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-weight: bold;
+  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+          box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+}
+
+.koozali-show-all-button:hover {
+  background-color: #008800;
+}
+
+/* Table visibility wrapper */
+.table-visibility-wrapper {
+  margin-bottom: 30px;
+  -webkit-transition: all 0.3s ease;
+  -o-transition: all 0.3s ease;
+  transition: all 0.3s ease;
+}
+
+/* Hidden tables */
+.table-visibility-wrapper.hidden {
+  display: none;
+  height: 0;
+  overflow: hidden;
+}
+
+/* Visible tables */
+.table-visibility-wrapper.visible {
+  display: block;
+  height: auto;
+  overflow: visible;
+  -webkit-box-shadow: 0 0 10px rgba(0, 102, 0, 0.2);
+          box-shadow: 0 0 10px rgba(0, 102, 0, 0.2);
+}
+
 /* Fix for older browsers */
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   /* IE10+ specific styles */
-  table.node td {
+  table.node td, table.node-unclaimed td {
     word-break: break-all;
   }
   
-  table.node td.first {
+  table.node td.first, table.node-unclaimed td.first {
     word-break: normal;
   }
+  
+  .koozali-table-nav {
+    position: relative;
+  }
 }
 
 /* Make sure tables don't overflow on small screens */
 @media (max-width: 768px) {
-  table.node {
+  table.node, table.node-unclaimed {
     font-size: 14px;
   }
   
-  table.node td {
+  table.node td, table.node-unclaimed td {
     padding: 8px 10px;
   }
   
-  table.node td.first {
+  table.node td.first, table.node-unclaimed td.first {
     width: 35%;
   }
   
-  table.node td.second {
+  table.node td.second, table.node-unclaimed td.second {
     width: 65%;
   }
+  
+  .koozali-table-select {
+    width: 60%;
+  }
 }
 
 /* Very small screens */
 @media (max-width: 480px) {
-  table.node {
+  table.node, table.node-unclaimed {
     font-size: 13px;
   }
   
-  table.node td {
+  table.node td, table.node-unclaimed td {
     padding: 6px 8px;
   }
   
-  table.node td.first {
+  table.node td.first, table.node-unclaimed td.first {
     width: 40%;
   }
   
-  table.node td.second {
+  table.node td.second, table.node-unclaimed td.second {
     width: 60%;
   }
+  
+  .koozali-table-nav {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+  }
+  
+  .koozali-table-select {
+    width: 100%;
+    margin-bottom: 10px;
+    margin-right: 0;
+  }
 }
 
 /* Print styles */
 @media print {
-  table.node {
+  .koozali-table-nav {
+    display: none;
+  }
+  
+  table.node, table.node-unclaimed {
     -webkit-box-shadow: none;
             box-shadow: none;
     border: 1px solid #999;
     page-break-inside: avoid;
   }
   
-  table.node + table.node {
+  table.node + table.node, 
+  table.node-unclaimed + table.node-unclaimed,
+  table.node + table.node-unclaimed,
+  table.node-unclaimed + table.node {
     margin-top: 20px;
   }
   
-  table.node thead {
+  table.node thead, table.node-unclaimed thead {
     background-color: #f5f9ef !important;
     -webkit-print-color-adjust: exact;
             color-adjust: exact;
   }
   
-  table.node td.first {
+  table.node td.first, table.node-unclaimed td.first {
-    background-color: #f9fcf5 !important;
+    background-color: #e8f3e1 !important;
     -webkit-print-color-adjust: exact;
             color-adjust: exact;
   }

root/usr/share/smanager/themes/default/public/js/hwinfo.js

@@ -1,194 +1,449 @@
 /**
- * Table Navigation Dropdown - JavaScript Only Solution for Mojolicious Sites
+ * Koozali SME Server Table Fade Transitions
  * 
- * This script automatically creates a dropdown menu to navigate between tables
+ * This script creates smooth fade transitions between tables
- * on a page without requiring any HTML modifications.
+ * with 1-2 second fade-in and fade-out effects.
  * 
- * Compatible with all modern browsers and IE11+.
+ * Works with the koozali_table_styles.css file.
+ * Compatible with all modern browsers and IE9+.
  * 
- * How to use:
+ * FIXED VERSION: Ensures table selector is always created at the top
- * 1. Add this script to your Mojolicious site using a <script> tag
- * 2. The script will automatically run when the page loads
- * 3. A dropdown menu will be created at the top of the page
  */
 
-(function() {
+document.addEventListener('DOMContentLoaded', function() {
-  // Function to run when DOM is fully loaded
+    // Find all tables with class 'node' or 'node-unclaimed'
-  function initTableNavigation() {
+    var tables = document.querySelectorAll('table.node, table.node-unclaimed');
-    // Find all tables with class 'node' (based on your HTML structure)
-    var tables = document.querySelectorAll('table.node');
     
     if (!tables || tables.length === 0) {
-      console.log('No tables found with class "node"');
+        console.log('No tables found with class "node" or "node-unclaimed"');
-      return;
+        return;
     }
     
-    // Create container for the dropdown
+    // Create container for the dropdown and controls
     var navContainer = document.createElement('div');
-    navContainer.style.position = 'sticky';
+    navContainer.className = 'koozali-table-nav';
-    navContainer.style.top = '0';
+    
-    navContainer.style.backgroundColor = '#fff';
+    // Set styles with fallbacks for older browsers
-    navContainer.style.padding = '10px 0';
+    var navStyles = {
-    navContainer.style.marginBottom = '20px';
+        'position': 'sticky',
-    navContainer.style.zIndex = '100';
+        'top': '0',
-    navContainer.style.borderBottom = '1px solid #ddd';
+        'background-color': '#e6f2d5',
-    navContainer.style.width = '300px';
+        'padding': '10px',
+        'margin-bottom': '20px',
+        'z-index': '100',
+        'border-bottom': '1px solid #d5e5c0',
+        'display': 'flex',
+        'justify-content': 'space-between',
+        'align-items': 'center',
+        'box-shadow': '0 2px 4px rgba(0,0,0,0.1)',
+        'max-width': '680px'
+    };
+    
+    // Apply styles with vendor prefixes
+    for (var prop in navStyles) {
+        if (navStyles.hasOwnProperty(prop)) {
+            navContainer.style.setProperty(prop, navStyles[prop]);
+            
+            // Add vendor prefixes for key properties
+            if (prop === 'position' && navStyles[prop] === 'sticky') {
+                navContainer.style.setProperty('-webkit-position', 'sticky');
+                navContainer.style.setProperty('-moz-position', 'sticky');
+                navContainer.style.setProperty('-ms-position', 'sticky');
+            }
+            
+            if (prop === 'display' && navStyles[prop] === 'flex') {
+                navContainer.style.setProperty('-webkit-display', 'flex');
+                navContainer.style.setProperty('-moz-display', 'flex');
+                navContainer.style.setProperty('-ms-display', 'flex');
+            }
+            
+            if (prop === 'justify-content') {
+                navContainer.style.setProperty('-webkit-justify-content', navStyles[prop]);
+                navContainer.style.setProperty('-moz-justify-content', navStyles[prop]);
+                navContainer.style.setProperty('-ms-justify-content', navStyles[prop]);
+            }
+            
+            if (prop === 'align-items') {
+                navContainer.style.setProperty('-webkit-align-items', navStyles[prop]);
+                navContainer.style.setProperty('-moz-align-items', navStyles[prop]);
+                navContainer.style.setProperty('-ms-align-items', navStyles[prop]);
+            }
+        }
+    }
     
     // Create the select element
     var select = document.createElement('select');
-    select.style.width = '100%';
+    select.className = 'koozali-table-select';
-    select.style.padding = '10px';
+    
-    select.style.fontSize = '16px';
+    // Set select styles
-    select.style.border = '1px solid #ddd';
+    var selectStyles = {
-    select.style.borderRadius = '4px';
+        'padding': '8px',
-    select.style.backgroundColor = '#f8f8f8';
+        'font-size': '16px',
-    select.style.cursor = 'pointer';
+        'border': '1px solid #d5e5c0',
+        'border-radius': '4px',
+        'background-color': '#f5f9ef',
+        'cursor': 'pointer',
+        'margin-right': '10px',
+        'color': '#333',
+        'width': '500px',
+        'max-width': '500px'
+    };
+    
+    // Apply select styles
+    for (var prop in selectStyles) {
+        if (selectStyles.hasOwnProperty(prop)) {
+            select.style.setProperty(prop, selectStyles[prop]);
+        }
+    }
     
     // Add default option
     var defaultOption = document.createElement('option');
     defaultOption.value = '';
-    defaultOption.textContent = '-- Jump to a table --';
+    defaultOption.textContent = '-- Select a table --';
     select.appendChild(defaultOption);
     
+    // Create "Show All" button
+    var showAllButton = document.createElement('button');
+    showAllButton.textContent = 'Show All Tables';
+    showAllButton.className = 'koozali-show-all-button';
+    
+    // Set button styles
+    var buttonStyles = {
+        'padding': '8px 12px',
+        'background-color': '#006600',
+        'color': 'white',
+        'border': 'none',
+        'border-radius': '4px',
+        'cursor': 'pointer',
+        'font-weight': 'bold',
+        'box-shadow': '0 1px 3px rgba(0,0,0,0.1)'
+    };
+    
+    // Apply button styles
+    for (var prop in buttonStyles) {
+        if (buttonStyles.hasOwnProperty(prop)) {
+            showAllButton.style.setProperty(prop, buttonStyles[prop]);
+        }
+    }
+    
+    // Add hover effect to button (with IE fallback)
+    function setButtonHoverState(isHover) {
+        showAllButton.style.backgroundColor = isHover ? '#008800' : '#006600';
+    }
+    
+    if (showAllButton.addEventListener) {
+        showAllButton.addEventListener('mouseover', function() {
+            setButtonHoverState(true);
+        });
+        showAllButton.addEventListener('mouseout', function() {
+            setButtonHoverState(false);
+        });
+    } else if (showAllButton.attachEvent) {
+        showAllButton.attachEvent('onmouseover', function() {
+            setButtonHoverState(true);
+        });
+        showAllButton.attachEvent('onmouseout', function() {
+            setButtonHoverState(false);
+        });
+    }
+    
     // Process each table and add to dropdown
     for (var i = 0; i < tables.length; i++) {
-      var table = tables[i];
+        var table = tables[i];
         
-      // Try to get table ID from the first row if it contains "id:"
+        // Try to get table ID from the first row if it contains "id:"
-      var tableId = 'table-' + i;
+        var tableId = 'table-' + i;
-      var tableName = 'Table ' + (i + 1);
+        var tableName = 'Table ' + (i + 1);
         
-      // Look for the ID in the table header
+        // Look for the ID in the table header
-      var idCell = table.querySelector('thead td.first');
+        var idCell = table.querySelector('thead td.first');
-      var idValue = table.querySelector('thead td.second');
+        var idValue = table.querySelector('thead td.second');
         
-      if (idCell && idValue && idCell.textContent.trim().toLowerCase() === 'id:') {
+        if (idCell && idValue && idCell.textContent.trim().toLowerCase() === 'id:') {
-        // Get the ID value (might be in a div with class 'id')
+            // Get the ID value (might be in a div with class 'id')
-        var idDiv = idValue.querySelector('.id');
+            var idDiv = idValue.querySelector('.id');
-        if (idDiv) {
+            if (idDiv) {
-          tableId = idDiv.textContent.trim();
+                tableId = idDiv.textContent.trim();
-          tableName = tableId;
+                tableName = tableId;
-        } else if (idValue.textContent.trim()) {
+            } else if (idValue.textContent.trim()) {
-          tableId = idValue.textContent.trim();
+                tableId = idValue.textContent.trim();
-          tableName = tableId;
+                tableName = tableId;
+            }
         }
-      }
         
-      // Try to get a better name from the description if available
+        // Try to get a better name from the description if available
-      var descRows = table.querySelectorAll('tbody tr');
+        var descRows = table.querySelectorAll('tbody tr');
-      for (var j = 0; j < descRows.length; j++) {
+        for (var j = 0; j < descRows.length; j++) {
-        var descRow = descRows[j];
+            var descRow = descRows[j];
-        var descCell = descRow.querySelector('td.first');
+            var descCell = descRow.querySelector('td.first');
-        var descValue = descRow.querySelector('td.second');
+            var descValue = descRow.querySelector('td.second');
             
-        if (descCell && descValue && 
+            if (descCell && descValue && 
-            descCell.textContent.trim().toLowerCase().includes('description') && 
+                descCell.textContent.trim().toLowerCase().includes('description') && 
-            descValue.textContent.trim()) {
+                descValue.textContent.trim()) {
-          tableName = descValue.textContent.trim() + ' (' + tableName + ')';
+                tableName = descValue.textContent.trim() + ' (' + tableName + ')';
-          break;
+                break;
+            }
         }
-      }
         
-      // Create a unique ID for the table if it doesn't have one
+        // Create a unique ID for the table if it doesn't have one
-      if (!table.id) {
+        if (!table.id) {
-        // Clean the ID to make it valid for HTML
+            // Clean the ID to make it valid for HTML
-        var safeId = tableId.replace(/[^a-z0-9]/gi, '_').toLowerCase();
+            var safeId = tableId.replace(/[^a-z0-9]/gi, '_').toLowerCase();
-        table.id = safeId;
+            table.id = safeId;
-      }
+        }
         
-      // Add option to dropdown
+        // Add option to dropdown
-      var option = document.createElement('option');
+        var option = document.createElement('option');
-      option.value = table.id;
+        option.value = table.id;
-      option.textContent = tableName;
+        option.textContent = tableName;
-      select.appendChild(option);
+        select.appendChild(option);
         
-      // Add scroll margin to the table
+        // Add wrapper div around the table for visibility control
-      table.style.scrollMarginTop = '70px';
+        var wrapper = document.createElement('div');
+        wrapper.className = 'table-visibility-wrapper';
+        wrapper.id = 'wrapper-' + table.id;
+        
+        // Set transition duration for fade effects
+        wrapper.style.transition = 'opacity 1.5s ease, height 1.5s ease';
+        wrapper.style.WebkitTransition = 'opacity 1.5s ease, height 1.5s ease';
+        wrapper.style.MozTransition = 'opacity 1.5s ease, height 1.5s ease';
+        wrapper.style.OTransition = 'opacity 1.5s ease, height 1.5s ease';
+        wrapper.style.msTransition = 'opacity 1.5s ease, height 1.5s ease';
+        
+        // Move the table into the wrapper
+        table.parentNode.insertBefore(wrapper, table);
+        wrapper.appendChild(table);
+        
+        // Set initial state - only first table visible
+        if (i === 0) {
+            // First table is visible
+            wrapper.style.opacity = '1';
+            wrapper.style.display = 'block';
+            wrapper.style.height = 'auto';
+            wrapper.style.overflow = 'visible';
+        } else {
+            // Other tables are hidden
+            wrapper.style.opacity = '0';
+            wrapper.style.display = 'none';
+            wrapper.style.height = '0';
+            wrapper.style.overflow = 'hidden';
+        }
     }
     
-    // Add event listener to the select element
+    // Add the select and button to the container
-    if (select.addEventListener) {
-      // Modern browsers
-      select.addEventListener('change', handleSelectChange);
-    } else if (select.attachEvent) {
-      // IE8 and below
-      select.attachEvent('onchange', handleSelectChange);
-    }
-    
-    // Add the select to the container
     navContainer.appendChild(select);
+    navContainer.appendChild(showAllButton);
     
     // Insert the container at the top of the body or after the first heading
     var heading = document.querySelector('h1, h2');
     if (heading && heading.parentNode) {
-      heading.parentNode.insertBefore(navContainer, heading.nextSibling);
+        heading.parentNode.insertBefore(navContainer, heading.nextSibling);
     } else {
-      var body = document.body;
+        // If no heading found, insert at the beginning of the main content area or body
-      if (body.firstChild) {
+        var mainContent = document.querySelector('.main-content, main, #content, #main');
-        body.insertBefore(navContainer, body.firstChild);
+        if (mainContent) {
-      } else {
+            if (mainContent.firstChild) {
-        body.appendChild(navContainer);
+                mainContent.insertBefore(navContainer, mainContent.firstChild);
-      }
+            } else {
-    }
+                mainContent.appendChild(navContainer);
-  }
+            }
-  
+        } else {
-  // Function to handle select change
+            // Last resort: insert at the beginning of the body
-  function handleSelectChange() {
+            var body = document.body;
-    var selectedValue = this.value;
+            if (body.firstChild) {
-    if (selectedValue) {
+                body.insertBefore(navContainer, body.firstChild);
-      var element = document.getElementById(selectedValue);
+            } else {
-      if (element) {
+                body.appendChild(navContainer);
-        // Scroll to the selected element
+            }
-        scrollToElement(element);
-        
-        // Highlight the selected table briefly
-        var originalBackground = element.style.backgroundColor || '';
-        element.style.backgroundColor = '#ffffd0';
-        
-        // Use setTimeout for the highlight effect
-        setTimeout(function() {
-          element.style.backgroundColor = originalBackground;
-        }, 1500);
-      }
-    }
-  }
-  
-  // Cross-browser scroll function
-  function scrollToElement(element) {
-    // Check if scrollIntoView is supported
-    if (element.scrollIntoView) {
-      // Try smooth scrolling if supported
-      try {
-        element.scrollIntoView({ behavior: 'smooth' });
-      } catch (error) {
-        // Fallback for browsers that don't support smooth scrolling
-        element.scrollIntoView();
-      }
-    } else {
-      // Manual scroll fallback
-      var rect = element.getBoundingClientRect();
-      var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-      var targetY = rect.top + scrollTop - 70; // 70px offset for the sticky header
-      
-      window.scrollTo(0, targetY);
-    }
-  }
-  
-  // Cross-browser DOM ready function
-  function ready(fn) {
-    if (document.readyState !== 'loading') {
-      fn();
-    } else if (document.addEventListener) {
-      document.addEventListener('DOMContentLoaded', fn);
-    } else {
-      document.attachEvent('onreadystatechange', function() {
-        if (document.readyState !== 'loading') {
-          fn();
         }
-      });
     }
-  }
     
-  // Initialize when DOM is ready
+    // Handle dropdown change with fade transitions
-  ready(initTableNavigation);
+    select.addEventListener('change', function() {
-})();
+        var selectedId = this.value;
+        
+        // First fade out all tables
+        fadeOutAllTables(function() {
+            // Then show only the selected table or all tables if none selected
+            var wrappers = document.querySelectorAll('.table-visibility-wrapper');
+            for (var i = 0; i < wrappers.length; i++) {
+                var wrapper = wrappers[i];
+                
+                if (!selectedId || wrapper.id === 'wrapper-' + selectedId) {
+                    // Show and fade in this table
+                    fadeInTable(wrapper);
+                } else {
+                    // Keep this table hidden
+                    wrapper.style.opacity = '0';
+                    wrapper.style.display = 'none';
+                    wrapper.style.height = '0';
+                    wrapper.style.overflow = 'hidden';
+                }
+            }
+        });
+    });
+    
+    // Handle show all button with fade transitions
+    showAllButton.addEventListener('click', function() {
+        // First fade out all tables
+        fadeOutAllTables(function() {
+            // Then fade in all tables
+            var wrappers = document.querySelectorAll('.table-visibility-wrapper');
+            for (var i = 0; i < wrappers.length; i++) {
+                fadeInTable(wrappers[i]);
+            }
+            
+            // Reset the dropdown selection
+            select.value = '';
+        });
+    });
+    
+    // Function to fade out all tables and then execute a callback
+    function fadeOutAllTables(callback) {
+        var wrappers = document.querySelectorAll('.table-visibility-wrapper');
+        var visibleTables = 0;
+        var completedFades = 0;
+        
+        // Count visible tables
+        for (var i = 0; i < wrappers.length; i++) {
+            if (getComputedStyle(wrappers[i]).display !== 'none') {
+                visibleTables++;
+            }
+        }
+        
+        // If no tables are visible, just run the callback
+        if (visibleTables === 0) {
+            callback();
+            return;
+        }
+        
+        // Fade out each visible table
+        for (var i = 0; i < wrappers.length; i++) {
+            var wrapper = wrappers[i];
+            
+            if (getComputedStyle(wrapper).display !== 'none') {
+                // Start fade out
+                wrapper.style.opacity = '0';
+                
+                // Use a closure to capture the current wrapper
+                (function(currentWrapper) {
+                    // Set a timeout for when the fade completes
+                    var fadeTimer = setTimeout(function() {
+                        currentWrapper.style.display = 'none';
+                        currentWrapper.style.height = '0';
+                        currentWrapper.style.overflow = 'hidden';
+                        
+                        // Increment completed fades counter
+                        completedFades++;
+                        
+                        // If all visible tables have faded out, run the callback
+                        if (completedFades >= visibleTables) {
+                            callback();
+                        }
+                    }, 1500); // Match the CSS transition duration
+                    
+                    // Store the timer on the element to allow cancellation if needed
+                    currentWrapper._fadeTimer = fadeTimer;
+                })(wrapper);
+            }
+        }
+    }
+    
+    // Function to fade in a table
+    function fadeInTable(wrapper) {
+        // Cancel any pending fade out timer
+        if (wrapper._fadeTimer) {
+            clearTimeout(wrapper._fadeTimer);
+            wrapper._fadeTimer = null;
+        }
+        
+        // First make it visible but transparent
+        wrapper.style.opacity = '0';
+        wrapper.style.display = 'block';
+        wrapper.style.height = 'auto';
+        wrapper.style.overflow = 'visible';
+        
+        // Force a reflow to ensure the browser registers the display change
+        void wrapper.offsetWidth;
+        
+        // Then fade it in
+        setTimeout(function() {
+            wrapper.style.opacity = '1';
+        }, 50); // Small delay to ensure the browser has processed the display change
+    }
+    
+    // Handle browser compatibility for older browsers
+    function isBrowserIE() {
+        return navigator.userAgent.indexOf('MSIE') !== -1 || 
+               navigator.userAgent.indexOf('Trident/') !== -1;
+    }
+    
+    // Apply special handling for IE
+    if (isBrowserIE()) {
+        // For IE, use a step-based fade
+        fadeOutAllTables = function(callback) {
+            var wrappers = document.querySelectorAll('.table-visibility-wrapper');
+            var visibleTables = 0;
+            var completedFades = 0;
+            
+            // Count visible tables
+            for (var i = 0; i < wrappers.length; i++) {
+                if (wrappers[i].style.display !== 'none') {
+                    visibleTables++;
+                }
+            }
+            
+            if (visibleTables === 0) {
+                callback();
+                return;
+            }
+            
+            // For IE, use a step-based fade
+            for (var i = 0; i < wrappers.length; i++) {
+                var wrapper = wrappers[i];
+                
+                if (wrapper.style.display !== 'none') {
+                    (function(currentWrapper) {
+                        var opacity = 1;
+                        var fadeInterval = setInterval(function() {
+                            opacity -= 0.1;
+                            if (opacity <= 0) {
+                                clearInterval(fadeInterval);
+                                currentWrapper.style.opacity = '0';
+                                currentWrapper.style.display = 'none';
+                                currentWrapper.style.height = '0';
+                                currentWrapper.style.overflow = 'hidden';
+                                
+                                completedFades++;
+                                if (completedFades >= visibleTables) {
+                                    callback();
+                                }
+                            } else {
+                                currentWrapper.style.opacity = opacity.toString();
+                            }
+                        }, 150); // 10 steps over 1.5 seconds
+                    })(wrapper);
+                }
+            }
+        };
+        
+        fadeInTable = function(wrapper) {
+            wrapper.style.opacity = '0';
+            wrapper.style.display = 'block';
+            wrapper.style.height = 'auto';
+            wrapper.style.overflow = 'visible';
+            
+            var opacity = 0;
+            var fadeInterval = setInterval(function() {
+                opacity += 0.1;
+                if (opacity >= 1) {
+                    clearInterval(fadeInterval);
+                    wrapper.style.opacity = '1';
+                } else {
+                    wrapper.style.opacity = opacity.toString();
+                }
+            }, 150); // 10 steps over 1.5 seconds
+        };
+    }
+});

smeserver-hwinfo.spec

@@ -4,7 +4,7 @@
 
 %define name smeserver-hwinfo
 %define version 11.0.0
-%define release 2
+%define release 3
 
 Summary: Harware info panel for SME Server.
 Name: %{name}
@@ -25,6 +25,9 @@ AutoReqProv: no
 smeserver-hwinfo adds panel providing informations about server harware configuration
  
 %changelog
+* Tue Apr 22 2025 Brian Read <brianr@koozali.org> 11.0.0-3.sme
+- Make the table navigation access a bit more interesting. 
+
 * Tue Apr 22 2025 Brian Read <brianr@koozali.org> 11.0.0-2.sme
 - Add some styling to the hardware information and quick navigation