Merge pull request #2285 from unraid/feat/page-option-responsive-no-support

feat: enhance page content generation with responsive layout support

emhttp/plugins/dynamix.vm.manager/AddVM.page

@@ -2,6 +2,7 @@ Title="Add VM"
 Tag="clipboard"
 Cond="(pgrep('libvirtd')!==false)"
 Markdown="false"
+ResponsiveLayout="false"
 ---
 <?PHP
 /* Copyright 2005-2023, Lime Technology

emhttp/plugins/dynamix.vm.manager/UpdateVM.page

@@ -2,6 +2,7 @@ Title="Update VM"
 Tag="clipboard"
 Cond="(pgrep('libvirtd')!==false)"
 Markdown="false"
+ResponsiveLayout="false"
 ---
 <?PHP
 /* Copyright 2005-2023, Lime Technology

emhttp/plugins/dynamix.vm.manager/include/VMedit.php

@@ -105,7 +105,7 @@ if (strpos($strSelectedTemplate,"User-") !== false) {
 <link type="text/css" rel="stylesheet" href="<?autov('/plugins/dynamix.vm.manager/styles/dynamix.vm.manager.css')?>">
 <link type="text/css" rel="stylesheet" href="<?autov('/plugins/dynamix.vm.manager/styles/edit.css')?>">
 
-<div class="Content--non-responsive domain">
+<div class="domain">
 	<form id="vmform" method="POST">
 	<input type="hidden" name="domain[type]" value="kvm" />
 	<input type="hidden" name="template[name]" value="<?=htmlspecialchars($strSelectedTemplateUT)?>" />

emhttp/plugins/dynamix/DisplaySettings.page

@@ -278,15 +278,15 @@ _(Used / Free columns)_:
   </select>
 
 _(Header custom text color)_:
-: <input type="text" class="narrow" name="header" value="<?=$display['header']?>" maxlength="6" pattern="([0-9a-fA-F]{3}){1,2}" title="_(HTML color code of 3 or 6 hexadecimal digits)_">
+: <input type="text" name="header" value="<?=$display['header']?>" maxlength="6" pattern="([0-9a-fA-F]{3}){1,2}" title="_(HTML color code of 3 or 6 hexadecimal digits)_">
 
 :display_custom_text_color_help:
 
 _(Header custom secondary text color)_:
-: <input type="text" class="narrow" name="headermetacolor" value="<?=$display['headermetacolor']?>" maxlength="6" pattern="([0-9a-fA-F]{3}){1,2}" title="_(HTML color code of 3 or 6 hexadecimal digits)_">
+: <input type="text" name="headermetacolor" value="<?=$display['headermetacolor']?>" maxlength="6" pattern="([0-9a-fA-F]{3}){1,2}" title="_(HTML color code of 3 or 6 hexadecimal digits)_">
 
 _(Header custom background color)_:
-: <input type="text" class="narrow" name="background" value="<?=$display['background']?>" maxlength="6" pattern="([0-9a-fA-F]{3}){1,2}" title="_(HTML color code of 3 or 6 hexadecimal digits)_">
+: <input type="text" name="background" value="<?=$display['background']?>" maxlength="6" pattern="([0-9a-fA-F]{3}){1,2}" title="_(HTML color code of 3 or 6 hexadecimal digits)_">
 
 :display_custom_background_color_help:
 

emhttp/plugins/dynamix/include/DefaultPageLayout/MainContent.php

@@ -115,17 +115,26 @@ function generatePanels($page, $path, $defaultIcon, $docroot, $useTabCookie = fa
 /**
  * Generates the content for a page
  * 
- * @param array $page Page data array containing text and Markdown flag
+ * @param array $page Page data array containing text, Markdown flag, and ResponsiveLayout flag
  * @return string Parsed text ready for eval
  * 
  * Usage example:
  * <? eval('?>'.generateContent($page)); ?>
  */
 function generateContent($page) {
+    $content = '';
     if (empty($page['Markdown']) || $page['Markdown'] == 'true') {
-        return Markdown(parse_text($page['text']));
+        $content = Markdown(parse_text($page['text']));
+    } else {
+        $content = parse_text($page['text']);
     }
-    return parse_text($page['text']);
+
+    // Wrap in non-responsive div if specified
+    if (isset($page['ResponsiveLayout']) && $page['ResponsiveLayout'] === 'false') {
+        $content = '<div class="content--non-responsive">' . $content . '</div>';
+    }
+
+    return $content;
 }
 ?>
 

emhttp/plugins/dynamix/styles/default-base.css

@@ -1312,11 +1312,6 @@ a.list {
     }
 }
 
-/* Necessary evil to prevent rewrites of complex page templates for responsive layout - i.e. VMedit.php */
-.Content--non-responsive {
-    min-width: 1200px;
-}
-
 .tabs {
     display: flex;
     align-items: center;
@@ -1576,6 +1571,49 @@ dd {
     }
 }
 
+/* Necessary evil to prevent rewrites of complex page templates for responsive layout - i.e. VMedit.php */
+.content--non-responsive {
+    min-width: 1200px;
+
+    /* override the dl > dt + dd responsive styles, inheriting the "desktop" styles defined below */
+    dl {
+        grid-template-columns: 35% 1fr;
+        gap: 1.5rem 2rem;
+    }
+    dt {
+        text-align: right;
+    }
+    dd {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+        /* white-space: nowrap; */
+
+        input[type="text"],
+        input[type="password"],
+        input[type="number"],
+        input[type="url"],
+        input[type="email"],
+        input[type="date"],
+        input[type="file"],
+        input:not([type="submit"]),
+        input:not([type="button"]),
+        input:not([type="checkbox"]),
+        input:not([type="radio"]),
+        input:not([class*="narrow"]),
+        textarea,
+        .textarea,
+        select,
+        .ui-dropdownchecklist-selector-wrapper {
+            max-width: 400px;
+        }
+
+        .narrow {
+            max-width: 150px !important;
+        }
+    }
+}
+
 /* Responsive styles for definition lists */
 @media (min-width: 769px) {
     dl {