From f8513aecd1cf8eeaa7c44f7de110bb550584e20f Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Thu, 22 May 2025 16:28:29 -0700
Subject: [PATCH] fix: enhance layout consistency in Syslog.page and Syslog.css

- Refactored Syslog.page to use flexbox for improved layout of log controls and buttons.
- Updated Syslog.css to include new styles for .syslog-controls and .label for better alignment and spacing.
- This change continues the effort to enhance visual consistency across the plugin.
---
 emhttp/plugins/dynamix/Syslog.page       | 79 +++++++++++++++++++++++-
 emhttp/plugins/dynamix/sheets/Syslog.css | 29 ++++++++-
 2 files changed, 102 insertions(+), 6 deletions(-)

diff --git a/emhttp/plugins/dynamix/Syslog.page b/emhttp/plugins/dynamix/Syslog.page
index f2440d532..43cb18f73 100644
--- a/emhttp/plugins/dynamix/Syslog.page
+++ b/emhttp/plugins/dynamix/Syslog.page
@@ -147,7 +147,80 @@ $(function() {
 <?endif;?>
   showLog(logfile);
 });
-$('.tabs').append("<span class='status'><span class='lite label'>_(Log size)_:&nbsp;&nbsp;<input type='number' id='max' value='' placeholder='<?=$max?>'></span><?=$select?><span class='lite label'><label>_(Text)_<input type='checkbox' class='ctrl' onclick='highlight(!this.checked,\"N\")' checked></label></span><span class='error label'><label>_(Error)_<input type='checkbox' onclick='highlight(this.checked,\"E\")' checked></label></span><span class='warn label'><label>_(Warning)_<input type='checkbox' onclick='highlight(this.checked,\"W\")' checked></label></span><span class='system label'><label>_(System)_<input type='checkbox' onclick='highlight(this.checked,\"S\")' checked></label></span><span class='array label'><label>_(Array)_<input type='checkbox' onclick='highlight(this.checked,\"A\")' checked></label></span><span class='login label'><label>_(Login)_<input type='checkbox' onclick='highlight(this.checked,\"L\")' checked></label></span><span class='lite label'><input type='checkbox' class='ctrl' onclick='toggle(this.checked)' checked></span></span>");
+// $('.title .right').append("");
 </script>
-<pre class='up'></pre>
-<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 class="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">
+        </label>
+      </div>
+
+      <?if (!empty($select)):?>
+      <div class="lite label">
+        <label class="flex flex-row items-center gap-2">
+          <span class="flex-shrink-0">_(Log file)_:</span>
+          <?= $select ?>
+        </label>
+      </div>
+      <?endif;?>
+    </div>
+
+    <div class="flex flex-wrap flex-row items-center gap-3">
+      <div class="lite label">
+        <label class="flex flex-row items-center gap-2">
+          <input type="checkbox" class="ctrl" onclick="highlight(!this.checked, 'N')" checked>
+          _(Text)_
+        </label>
+      </div>
+      <span class="error label">
+        <label class="flex flex-row items-center gap-2">
+          <input type="checkbox" onclick="highlight(this.checked, 'E')" checked>
+          _(Error)_
+        </label>
+      </span>
+      <span class="warn label">
+        <label class="flex flex-row items-center gap-2">
+          <input type="checkbox" onclick="highlight(this.checked, 'W')" checked>
+          _(Warning)_
+        </label>
+      </span>
+      <span class="system label">
+        <label class="flex flex-row items-center gap-2">
+          <input type="checkbox" onclick="highlight(this.checked, 'S')" checked>
+          _(System)_
+        </label>
+      </span>
+      <span class="array label">
+        <label class="flex flex-row items-center gap-2">
+          <input type="checkbox" onclick="highlight(this.checked, 'A')" checked>
+          _(Array)_
+        </label>
+      </span>
+      <span class="login label">
+        <label class="flex flex-row items-center gap-2">
+          <input type="checkbox" onclick="highlight(this.checked, 'L')" checked>
+          _(Login)_
+        </label>
+      </span>
+      <span class="lite label">
+        <label class="flex items-center gap-2">
+          <input type="checkbox" class="ctrl" onclick="toggle(this.checked)" checked>
+          _(Toggle All)_
+        </label>
+      </span>
+    </div>
+  </div>
+</div>
+
+<pre class="up"></pre>
+
+<div class="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>
\ No newline at end of file
diff --git a/emhttp/plugins/dynamix/sheets/Syslog.css b/emhttp/plugins/dynamix/sheets/Syslog.css
index 388772351..a418409f7 100644
--- a/emhttp/plugins/dynamix/sheets/Syslog.css
+++ b/emhttp/plugins/dynamix/sheets/Syslog.css
@@ -1,6 +1,29 @@
 input#max {
-    border: none;
     width: 60px;
-    margin: 0;
-    padding: 0;
 }
+
+.syslog-controls {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 10px;
+    box-sizing: border-box;
+
+    * {
+        box-sizing: border-box;
+    }
+
+    .label {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 10px;
+        margin: 0;
+        padding: .2rem .6rem;
+    }
+
+    input[type="checkbox"] {
+        margin: 0;
+    }
+}
\ No newline at end of file