Merge pull request #2279 from unraid/feat/fill-available-height-js

fix: display settings listing height responsive regression
2025-12-30 14:09:53 -06:00 · 2025-06-28 10:44:42 -07:00
parent de34ff933d fefc4c5bba
commit 480f9d5c23
9 changed files with 274 additions and 103 deletions
--- a/emhttp/plugins/dynamix.docker.manager/DockerContainers.page
+++ b/emhttp/plugins/dynamix.docker.manager/DockerContainers.page
@@ -44,17 +44,20 @@ $cpus    = cpu_list();
                <th class="five">_(Uptime)_</th>
            </tr>
        </thead>
-        <tbody id="docker_list"><tr><td colspan='9'></td></tr></tbody>
+        <tbody id="docker_list" class="js-fill-available-height"><tr><td colspan='9'></td></tr></tbody>
    </table>
 </div>
-<input type="button" onclick="addContainer()" value="_(Add Container)_" style="display:none">
-<input type="button" onclick="startAll()" value="_(Start All)_" style="display:none">
-<input type="button" onclick="stopAll()" value="_(Stop All)_" style="display:none">
-<input type="button" onclick="pauseAll()" value="_(Pause All)_" style="display:none">
-<input type="button" onclick="resumeAll()" value="_(Resume All)_" style="display:none">
-<input type="button" onclick="checkAll()" value="_(Check for Updates)_" id="checkAll" style="display:none">
-<input type="button" onclick="updateAll()" value="_(Update All)_" id="updateAll" style="display:none">
-<input type="button" onclick="contSizes()" value="_(Container Size)_" style="display:none">
+
+<div class="js-actions">
+  <input type="button" onclick="addContainer()" value="_(Add Container)_" style="display:none">
+  <input type="button" onclick="startAll()" value="_(Start All)_" style="display:none">
+  <input type="button" onclick="stopAll()" value="_(Stop All)_" style="display:none">
+  <input type="button" onclick="pauseAll()" value="_(Pause All)_" style="display:none">
+  <input type="button" onclick="resumeAll()" value="_(Resume All)_" style="display:none">
+  <input type="button" onclick="checkAll()" value="_(Check for Updates)_" id="checkAll" style="display:none">
+  <input type="button" onclick="updateAll()" value="_(Update All)_" id="updateAll" style="display:none">
+  <input type="button" onclick="contSizes()" value="_(Container Size)_" style="display:none">
+</div>
 <div id="iframe-popup" style="display:none;-webkit-overflow-scrolling:touch;"></div>

 <script src="<?autov('/webGui/javascript/jquery.switchbutton.js')?>"></script>
@@ -66,15 +69,6 @@ $('.title').append("<span id='busy' class='red-text strong' style='display:none;
 <?else:?>
 $('.tabs').append("<span id='busy' class='red-text strong' style='display:none;position:relative;top:<?=$top?>px;left:40px;font-size:1.4rem;letter-spacing:2px'><?=$busy?></span>");
 <?endif;?>
-<?if (_var($display,'resize')):?>
-function resize() {
-  $('#docker_list').height(Math.max(window.innerHeight-340,330));
-  $('#docker_containers thead,#docker_containers tbody').removeClass('fixed');
-  $('#docker_containers thead tr th').each(function(){$(this).width($(this).width());});
-  $('#docker_containers tbody tr td').each(function(){$(this).width($(this).width());});
-  $('#docker_containers thead,#docker_containers tbody').addClass('fixed');
-}
-<?endif;?>
 function resetSorting() {
  if ($.cookie('lockbutton')==null) return;
  $('input[type=button]').prop('disabled',true);
@@ -146,10 +140,6 @@ function loadlist(init) {
      }
    });
    $('head').append('<script>'+data[1]+'<\/script>');
-<?if (_var($display,'resize')):?>
-    resize();
-    if (init) $(window).bind('resize',function(){resize();});
-<?endif;?>
    $('.iconstatus').each(function(){
      if ($(this).hasClass('stopped')) $('div.'+$(this).prop('id')).hide();
    });
@@ -174,6 +164,28 @@ function loadlist(init) {
    listview();
    $('div.spinner.fixed').hide('slow');
    if (data[2]==1) {$('#busy').show(); setTimeout(loadlist,5000);} else if ($('#busy').is(':visible')) {$('#busy').hide(); setTimeout(loadlist,3000);}
+    <?if (_var($display,'resize')):?>
+        function resizeTableColumns() { // Handle table header fixed positioning after resize
+          $('#docker_containers thead,#docker_containers tbody').removeClass('fixed');
+          $('#docker_containers thead tr th').each(function(){$(this).width($(this).width());});
+          $('#docker_containers tbody tr td').each(function(){$(this).width($(this).width());});
+          $('#docker_containers thead,#docker_containers tbody').addClass('fixed');
+        };
+        fillAvailableHeight({
+          targetElementSelector: '.js-fill-available-height',
+          elementSelectorsForHeight: [
+            '.js-actions',
+            '#docker_containers thead',
+          ],
+          manualSpacingOffset: 30, // without this, the main content will still be scrollable by like 20px
+        });
+        resizeTableColumns()
+        if (init) {
+          $(window).bind('resize',function(){
+            resizeTableColumns();
+          });
+        }
+    <?endif;?>
    if (!update) $('input#updateAll').prop('disabled',true);
    if (rebuild) rebuildAll();
  });
--- a/emhttp/plugins/dynamix.vm.manager/VMMachines.page
+++ b/emhttp/plugins/dynamix.vm.manager/VMMachines.page
@@ -123,15 +123,6 @@ if (empty($vms)) {
 <script src="<?autov('/plugins/dynamix.vm.manager/javascript/vmmanager.js')?>"></script>
 <script src="<?autov("/webGui/javascript/jquery.filetree.js")?>"></script>
 <script>
-<?if (_var($display,'resize')):?>
-function resize() {
-  $('#kvm_list').height(Math.max(window.innerHeight-340,330));
-  $('#kvm_table thead,#kvm_table tbody').removeClass('fixed');
-  $('#kvm_table thead tr th').each(function(){$(this).width($(this).width());});
-  $('#kvm_table tbody tr td').each(function(){$(this).width($(this).width());});
-  $('#kvm_table thead,#kvm_table tbody').not('.child').addClass('fixed');
-}
-<?endif;?>
 function resetSorting() {
  if ($.cookie('lockbutton')==null) return;
  $('input[type=button]').prop('disabled',true);
@@ -446,10 +437,6 @@ function loadlist() {
    var data = d.split(/\0/);
    $('#kvm_list').html(data[0]);
    $('head').append('<script>'+data[1]+'<\/script>');
-<?if (_var($display,'resize')):?>
-    resize();
-    $(window).bind('resize',function(){resize();});
-<?endif;?>
 <?foreach ($vms as $vm) {
  $res = $lv->get_domain_by_name($vm);
  $uuid = $lv->domain_get_uuid($res);
@@ -474,6 +461,30 @@ function loadlist() {
    $('input[type=button]').prop('disabled',false).show('slow');
    $('.text').click(showInput);
    $('.input').blur(hideInput);
+    <?if (_var($display,'resize')):?>
+      fillAvailableHeight({
+        targetElementSelector: '.js-fill-available-height',
+        elementSelectorsForHeight: [
+          '.js-actions',
+          '#kvm_table thead',
+        ],
+        elementSelectorsForSpacing: [
+          '#kvm_table',
+        ],
+        manualSpacingOffset: 30, // without this, the main content will still be scrollable by like 20px
+      });
+      // Handle table header fixed positioning after resize
+      function tableHeaderResize() {
+        $('#kvm_table thead,#kvm_table tbody').removeClass('fixed');
+        $('#kvm_table thead tr th').each(function(){$(this).width($(this).width());});
+        $('#kvm_table tbody tr td').each(function(){$(this).width($(this).width());});
+        $('#kvm_table thead,#kvm_table tbody').not('.child').addClass('fixed');
+      }
+      tableHeaderResize();
+      $(window).bind('resize',function(){
+        tableHeaderResize();
+      });
+  <?endif;?>
  });
 }
 $(function() {
@@ -501,13 +512,15 @@ $(function() {
                <th class="th3">_(Autostart)_</th>
            </tr>
        </thead>
-        <tbody id="kvm_list"><tr><td colspan='8'></td></tr></tbody>
+        <tbody id="kvm_list" class="js-fill-available-height"><tr><td colspan='8'></td></tr></tbody>
    </table>
 </div>

-<input type="button" onclick="addVM()" id="btnAddVM" value="_(Add VM)_" style="display:none">
-<input type="button" onclick="startAll()" value="_(Start All)_" style="display:none">
-<input type="button" onclick="stopAll()" value="_(Stop All)_" style="display:none">
+<div class="js-actions">
+  <input type="button" onclick="addVM()" id="btnAddVM" value="_(Add VM)_" style="display:none">
+  <input type="button" onclick="startAll()" value="_(Start All)_" style="display:none">
+  <input type="button" onclick="stopAll()" value="_(Stop All)_" style="display:none">
+</div>

 <div id="dialogWindow"></div>
 <div id="iframe-popup"></div>
--- a/emhttp/plugins/dynamix/PageMap.page
+++ b/emhttp/plugins/dynamix/PageMap.page
@@ -17,12 +17,13 @@ Tag="map-o"
 ?>
 <?if (_var($display,'resize')):?>
 <script>
-function resize() {
-  $('div.up').height(Math.max(window.innerHeight-320,330));
-}
 $(function() {
-  resize();
-  $(window).bind('resize',function(){resize();});
+  fillAvailableHeight({
+    targetElementSelector: '.js-fill-available-height',
+    elementSelectorsForHeight: [
+      '.js-actions',
+    ],
+  });
 });
 </script>
 <?endif;?>
@@ -57,10 +58,15 @@ foreach($uri as $more) {
    $language = array_merge($language,unserialize(file_get_contents($store)));
  }
 }
-
-echo "<div class='up'>";
-show_map("Tasks", 1);
-show_map("Buttons", 1);
-echo "</div>";
 ?>
-<input type="button" value="_(Done)_" onclick="done()">
+
+<div class="js-fill-available-height up">
+  <?
+  show_map("Tasks", 1);
+  show_map("Buttons", 1);
+  ?>
+</div>
+
+<div class="js-actions">
+  <input type="button" value="_(Done)_" onclick="done()">
+</div>
--- a/emhttp/plugins/dynamix/Processes.page
+++ b/emhttp/plugins/dynamix/Processes.page
@@ -17,16 +17,19 @@ Tag="cogs"
 ?>
 <?if (_var($display,'resize')):?>
 <script>
-function resize() {
-  $('pre.up').height(Math.max(window.innerHeight-320,330));
-}
 $(function() {
-  resize();
-  $(window).bind('resize',function(){resize();});
+  fillAvailableHeight({
+    targetElementSelector: '.js-fill-available-height',
+    elementSelectorsForHeight: [
+      '.js-actions',
+    ],
+  });
 });
 </script>
 <?endif;?>
-<?
-echo "<pre class='up'>",shell_exec('ps -aux'),"</pre>";
-?>
-<input type="button" value="_(Done)_" onclick="done()">
+
+<pre class='js-fill-available-height up'><?= shell_exec('ps -aux');?></pre>
+
+<div class="js-actions">
+  <input type="button" value="_(Done)_" onclick="done()">
+</div>
--- a/emhttp/plugins/dynamix/Syslog.page
+++ b/emhttp/plugins/dynamix/Syslog.page
@@ -3,7 +3,7 @@ Title="System Log"
 Icon="icon-log"
 Tag="list"
 ---
-<?PHP
+<?php
 /* Copyright 2005-2023, Lime Technology
 * Copyright 2012-2023, Bergware International.
 *
@@ -15,8 +15,8 @@ Tag="list"
 * all copies or substantial portions of the Software.
 */
 ?>
-<?
-$zip    = htmlspecialchars(str_replace(' ','_',strtolower($var['NAME'])));
+<?php
+$zip    = htmlspecialchars(str_replace(' ', '_', strtolower($var['NAME'])));
 $log    = '/var/log/syslog';
 $prev   = '/boot/logs/syslog-previous';
 $cfg    = '/boot/config/rsyslog.cfg';
@@ -24,21 +24,23 @@ $max    = 5000;
 $select = [];
 $logs   = [];
 if (file_exists($cfg)) {
-  $syslog = parse_ini_file($cfg);
-  if (!empty($syslog['local_server']) && !empty($syslog['server_folder']) && $logs = glob($syslog['server_folder'].'/syslog-*.log',GLOB_NOSORT)) {
-    natsort($logs);
-  }
+    $syslog = parse_ini_file($cfg);
+    if (!empty($syslog['local_server']) && !empty($syslog['server_folder']) && $logs = glob($syslog['server_folder'].'/syslog-*.log', GLOB_NOSORT)) {
+        natsort($logs);
+    }
 }
 if (file_exists($prev)) {
-  // add syslog-previous to front of logs array
-  array_unshift($logs, $prev);
+    // add syslog-previous to front of logs array
+    array_unshift($logs, $prev);
 }
 if (count($logs)) {
-  // add syslog to front of logs array
-  array_unshift($logs, $log);
-  $select[] = "<select onchange='showLog(this.value)'>";
-  foreach ($logs as $file) $select[] = mk_option(1,$file,basename($file));
-  $select[] = "</select>";
+    // add syslog to front of logs array
+    array_unshift($logs, $log);
+    $select[] = "<select onchange='showLog(this.value)'>";
+    foreach ($logs as $file) {
+        $select[] = mk_option(1, $file, basename($file));
+    }
+    $select[] = "</select>";
 }
 $select = implode($select);
 ?>
@@ -85,11 +87,6 @@ function toggle(checked) {
  highlight(checked,'L');
  $('span.label input[type=checkbox]').not('.ctrl').prop('checked',checked);
 }
-<?if (_var($display,'resize')):?>
-function resize() {
-  $('pre.up').height(Math.max(window.innerHeight-320,330));
-}
-<?endif;?>

 function showLog(log) {
 	logfile = log;
@@ -141,22 +138,27 @@ $(function() {
      showLog(logfile);
    }
  });
-<?if (_var($display,'resize')):?>
-  resize();
-  $(window).bind('resize',function(){resize();});
-<?endif;?>
  showLog(logfile);
+
+  <?if (_var($display,'resize')):?>
+  fillAvailableHeight({
+      targetElementSelector: '.js-fill-available-height',
+      elementSelectorsForHeight: [
+        '.js-syslog-controls',
+        '.js-syslog-actions',
+      ],
+    });
+  <?endif;?>
 });
-// $('.title .right').append("");
 </script>

-<div class="syslog-controls">
+<div class="js-syslog-controls syslog-controls">
  <div class="flex flex-row justify-between items-center gap-4 flex-wrap w-full">
    <div class="flex flex-row items-center gap-4">
      <div class="lite label">
        <label class="flex flex-row items-center gap-2">
          <span class="flex-shrink-0">_(Log size)_:</span>
-          <input type="number" id="max" value="" placeholder="<?=$max?>" class="w-20">
+          <input type="number" id="max" value="" placeholder="<?=$max?>">
        </label>
      </div>

@@ -217,10 +219,10 @@ $(function() {
  </div>
 </div>

-<pre class="up"></pre>
+<pre class="js-fill-available-height up"></pre>

-<div class="flex flex-row items-center gap-2">
+<div class="js-syslog-actions flex flex-row items-center gap-2">
  <input type="button" id="download" value="_(Download)_" onclick="syslog(zipfile())">
  <input type="button" value="_(Refresh)_" onclick="showLog(logfile)">
  <input type="button" value="_(Done)_" onclick="done()">
-</div>
+</div>
--- a/emhttp/plugins/dynamix/Vars.page
+++ b/emhttp/plugins/dynamix/Vars.page
@@ -15,23 +15,28 @@ Tag="code"
 * all copies or substantial portions of the Software.
 */
 ?>
-<?if (_var($display,'resize')):?>
-<script>
-function resize() {
-  $('pre.up').height(Math.max(window.innerHeight-320,330));
-}
-$(function() {
-  resize();
-  $(window).bind('resize',function(){resize();});
-});
-</script>
-<?endif;?>
 <?
 $globals = [];
 $names   = ['_SERVER','devs','disks','sec','sec_nfs','shares','users','var'];
 foreach ($names as $name) $globals[$name] = $$name;
 // show outgoing proxy information, is in the environment but not a superglobal
 $globals['environment'] = ['http_proxy' => getenv('http_proxy'), 'no_proxy' => getenv('no_proxy')];
-echo "<pre class='up'>",htmlspecialchars(print_r($globals,true)),"</pre>";
 ?>
-<input type="button" value="_(Done)_" onclick="done()">
+<?if (_var($display,'resize')):?>
+<script>
+$(function() {
+  fillAvailableHeight({
+    targetElementSelector: '.js-fill-available-height',
+    elementSelectorsForHeight: [
+      '.js-actions',
+    ],
+  });
+});
+</script>
+<?endif;?>
+
+<pre class='js-fill-available-height up'><?= htmlspecialchars(print_r($globals,true));?></pre>
+
+<div class="js-actions">
+  <input type="button" value="_(Done)_" onclick="done()">
+</div>
--- a/emhttp/plugins/dynamix/include/DefaultPageLayout/BodyInlineJS.php
+++ b/emhttp/plugins/dynamix/include/DefaultPageLayout/BodyInlineJS.php
@@ -446,4 +446,128 @@ function nchanFocusStop(banner=true) {
  }
 }
 <?endif;?>
+
+/**
+ * Calculates and sets the height of a target element to fill the available viewport space.
+ * 
+ * This function dynamically resizes an element to occupy the remaining vertical space
+ * after accounting for other page elements like headers, footers, controls, and their
+ * margins/padding. Useful for creating full-height scrollable content areas.
+ * 
+ * The function includes default elements that are commonly present on pages:
+ * - elementsForHeight: '#header', '#menu', '#footer' (plus any additional provided)
+ * - elementsForSpacing: '.displaybox' (plus any additional provided)
+ * 
+ * @param {Object} params - Configuration object for height calculation
+ * @param {string} [params.targetElementSelector='.js-fill-available-height'] - CSS selector for the element to resize
+ * @param {string[]} [params.elementSelectorsForHeight=[]] - Additional CSS selectors for elements 
+ *   whose full height (including margins) should be subtracted from available space.
+ *   These are added to the default selectors: '#header', '#menu', '#footer'
+ * @param {string[]} [params.elementSelectorsForSpacing=[]] - Additional CSS selectors for elements 
+ *   whose spacing (margins and padding only) should be subtracted from available space.
+ *   These are added to the default selector: '.displaybox'
+ * @param {number} [params.minHeight=330] - Minimum height in pixels for the target element
+ * @param {number} [params.manualSpacingOffset=10] - Additional pixels to subtract for manual spacing
+ * 
+ * @example
+ * // Use with default parameters - targets '.js-fill-available-height'
+ * fillAvailableHeight();
+ * 
+ * @example
+ * // Custom configuration with additional elements
+ * // MUST BE USED IN JQUERY ON READY
+ * $(function() { // or $(document).ready(function() {
+ *   fillAvailableHeight({
+ *     targetElementSelector: '.my-content',
+ *     elementSelectorsForHeight: ['.my-controls', '.my-actions'],
+ *     elementSelectorsForSpacing: ['.my-content'],
+ *     minHeight: 500,
+ *     manualSpacingOffset: 20
+ *   });
+ * });
+ */
+function fillAvailableHeight(params = { // default params
+  targetElementSelector: '.js-fill-available-height',
+  elementSelectorsForHeight: [],
+  elementSelectorsForSpacing: [],
+  minHeight: 330,
+  manualSpacingOffset: 10,
+}) {  
+  const minHeight = params.minHeight || 330;
+
+  // default elementsForHeight
+  const elementsForHeight = [
+    '#header',
+    '#menu',
+    '#footer',
+    '.title',
+    ...(params.elementSelectorsForHeight ? params.elementSelectorsForHeight : []),
+  ];
+
+  // elements with a height and margin we want to subtract from the target height
+  let targetHeight = window.innerHeight - elementsForHeight.reduce((acc, selector) => {
+    const element = document.querySelector(selector);
+
+    if (!element) {
+      return acc;
+    }
+
+    const computedStyle = getComputedStyle(element);
+    const height = element.offsetHeight;
+    const marginTop = parseFloat(computedStyle.marginTop) || 0;
+    const marginBottom = parseFloat(computedStyle.marginBottom) || 0;
+    // we don't need to calculate padding because it's already included in the height
+    const totalForElement = height + marginTop + marginBottom;
+
+    return acc + totalForElement;
+  }, 0);
+  
+  // elements with spacing that we want to subtract from the target height, but not their actual height.
+  const elementsForSpacing = [
+    '#displaybox',
+    ...(params.targetElementSelector ? [params.targetElementSelector] : []),
+    ...(params.elementSelectorsForSpacing ? params.elementSelectorsForSpacing : []),
+  ];
+  
+  targetHeight -= elementsForSpacing.reduce((acc, selector) => {
+    const element = document.querySelector(selector);
+
+    if (!element) {
+      return acc;
+    }
+
+    const computedStyle = getComputedStyle(element);
+    const marginTop = parseFloat(computedStyle.marginTop) || 0;
+    const marginBottom = selector !== '#displaybox' ? parseFloat(computedStyle.marginBottom) || 0 : 0;
+    const paddingTop = parseFloat(computedStyle.paddingTop) || 0;
+    const paddingBottom = selector !== '#displaybox' ? parseFloat(computedStyle.paddingBottom) || 0 : 0;
+    // we don't want to subtract paddingBottom or marginBottom for #displaybox b/c it adds unnecessary spacing in the calculations
+    // b/c the paddingBottom is accounting for the fixed footer.
+
+    const totalForElement = marginTop + marginBottom + paddingTop + paddingBottom;
+
+    return acc + totalForElement;
+  }, 0);
+
+  // subtract addtional spacing from the target height to provide spacing between the actions & the footer
+  targetHeight -= params.manualSpacingOffset || 10;
+
+  const finalHeight = Math.max(targetHeight, minHeight);
+
+  $(params.targetElementSelector).height(finalHeight);
+
+  // Set up resize listener to call itself with same params
+  // Remove existing listener first to avoid duplicates
+  if (window.fillAvailableHeightResizeHandler) {
+    window.removeEventListener('resize', window.fillAvailableHeightResizeHandler);
+  }
+  
+  // Create debounced handler that calls this function with same params
+  window.fillAvailableHeightResizeHandler = debounce(function() {
+    fillAvailableHeight(params);
+  }, 150);
+  
+  // Add the new listener
+  window.addEventListener('resize', window.fillAvailableHeightResizeHandler);
+}
 </script>
--- a/emhttp/plugins/dynamix/include/DefaultPageLayout/HeadInlineJS.php
+++ b/emhttp/plugins/dynamix/include/DefaultPageLayout/HeadInlineJS.php
@@ -562,4 +562,12 @@ $.ajaxPrefilter(function(s, orig, xhr){
    }
    setTimerReload();
 <?endif;?>
+
+function debounce(func, wait = 300) {
+  let timeout;
+  return function(...args) {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => func.apply(this, args), wait);
+  };
+}
 </script>
--- a/emhttp/plugins/dynamix/sheets/Syslog.css
+++ b/emhttp/plugins/dynamix/sheets/Syslog.css
@@ -6,8 +6,6 @@ input#max {
    display: flex;
    justify-content: space-between;
    align-items: center;
-    gap: 10px;
-    margin-bottom: 10px;
    box-sizing: border-box;

    * {