devlab/server-manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

replace number inputs with range sliders in threshold modal

Browse Source
This commit is contained in:
Agent
2026-06-13 16:30:45 -04:00
parent dc34f29169
commit e92f51e36b
2 changed files with 52 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
public/assets/css/style.css
View File

@@ -3134,3 +3134,39 @@ textarea.form-input {
background: var(--bg-hover, #e9ecef);
border-color: var(--text-muted, #888);
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--text-primary);
border: 2px solid var(--bg-card);
box-shadow: 0 1px 4px rgba(0,0,0,0.4);
cursor: pointer;
transition: transform 0.1s;
}
input[type="range"]::-webkit-slider-thumb:hover {
transform: scale(1.15);
}
input[type="range"]::-moz-range-thumb {
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--text-primary);
border: 2px solid var(--bg-card);
box-shadow: 0 1px 4px rgba(0,0,0,0.4);
cursor: pointer;
}
input[type="range"]:focus {
outline: none;
}
input[type="range"]::-moz-range-track {
height: 6px;
border-radius: 3px;
}

30
views/servers/show.php
View File

@@ -322,33 +322,35 @@ $canManage = $server_role === 'owner' || $server_role === 'manager';
]; ?>
<?php foreach ($resources as $key => $res): ?>
<div style="background:var(--card-bg);border:1px solid var(--border);border-radius:10px;padding:16px 20px;margin-bottom:12px">
<div style="display:flex;align-items:center;gap:10px;margin-bottom:14px">
<div style="display:flex;align-items:center;gap:10px;margin-bottom:16px">
<i class="<?= $res['icon'] ?>" style="color:<?= $res['color'] ?>;font-size:1.2em;width:20px;text-align:center"></i>
<strong style="font-size:1em"><?= $res['label'] ?></strong>
</div>
<div style="display:flex;gap:16px;align-items:center">
<div style="display:flex;gap:24px;align-items:flex-start">
<div style="flex:1">
<label style="display:flex;align-items:center;gap:6px;font-size:0.82em;color:var(--warning);margin-bottom:4px;font-weight:600">
<label style="display:flex;align-items:center;gap:6px;font-size:0.82em;color:var(--warning);margin-bottom:6px;font-weight:600">
<i class="fas fa-exclamation-triangle" style="font-size:0.85em"></i> Warning
</label>
<div style="position:relative">
<input type="number" name="<?= $key ?>_warning"
<div style="display:flex;align-items:center;gap:10px">
<input type="range" name="<?= $key ?>_warning"
value="<?= htmlspecialchars((string)($server["threshold_{$key}_warning"] ?? 80)) ?>"
min="0" max="100" step="0.01"
style="width:100%;padding:8px 12px 8px 32px;border:1px solid var(--border);border-radius:6px;background:var(--bg-dark);color:var(--text);font-size:0.95em;box-sizing:border-box">
<span style="position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--text-muted);font-size:0.85em">%</span>
min="0" max="100" step="0.5"
oninput="document.getElementById('<?= $key ?>_warn_val').textContent = this.value + '%'"
style="flex:1;height:6px;-webkit-appearance:none;appearance:none;border-radius:3px;background:linear-gradient(to right, var(--success), var(--warning) 50%, var(--danger) 80%);outline:none;cursor:pointer">
<span id="<?= $key ?>_warn_val" style="min-width:52px;font-size:0.95em;font-weight:700;color:var(--warning);text-align:right"><?= htmlspecialchars((string)($server["threshold_{$key}_warning"] ?? 80)) ?>%</span>
</div>
</div>
<div style="flex:1">
<label style="display:flex;align-items:center;gap:6px;font-size:0.82em;color:var(--danger);margin-bottom:4px;font-weight:600">
<label style="display:flex;align-items:center;gap:6px;font-size:0.82em;color:var(--danger);margin-bottom:6px;font-weight:600">
<i class="fas fa-bolt" style="font-size:0.85em"></i> Critical
</label>
<div style="position:relative">
<input type="number" name="<?= $key ?>_critical"
<div style="display:flex;align-items:center;gap:10px">
<input type="range" name="<?= $key ?>_critical"
value="<?= htmlspecialchars((string)($server["threshold_{$key}_critical"] ?? 95)) ?>"
min="0" max="100" step="0.01"
style="width:100%;padding:8px 12px 8px 32px;border:1px solid var(--border);border-radius:6px;background:var(--bg-dark);color:var(--text);font-size:0.95em;box-sizing:border-box">
<span style="position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--text-muted);font-size:0.85em">%</span>
min="0" max="100" step="0.5"
oninput="document.getElementById('<?= $key ?>_crit_val').textContent = this.value + '%'"
style="flex:1;height:6px;-webkit-appearance:none;appearance:none;border-radius:3px;background:linear-gradient(to right, var(--success), var(--warning) 50%, var(--danger) 80%);outline:none;cursor:pointer">
<span id="<?= $key ?>_crit_val" style="min-width:52px;font-size:0.95em;font-weight:700;color:var(--danger);text-align:right"><?= htmlspecialchars((string)($server["threshold_{$key}_critical"] ?? 95)) ?>%</span>
</div>
</div>
</div>