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.
This commit is contained in:
Zack Spear
2025-05-22 16:28:29 -07:00
parent c9d106ead4
commit f8513aecd1
2 changed files with 102 additions and 6 deletions

View File

@@ -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>

View File

@@ -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;
}
}