mirror of
https://github.com/unraid/webgui.git
synced 2026-01-07 10:10:05 -06:00
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:
@@ -147,7 +147,80 @@ $(function() {
|
||||
<?endif;?>
|
||||
showLog(logfile);
|
||||
});
|
||||
$('.tabs').append("<span class='status'><span class='lite label'>_(Log size)_: <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>
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user