v0.13.1: UI polish fixes round 2 (4 fixes)
- Fix 1: deploy-cross-drive card uses correct CSS vars (--bg-secondary, --border-color) - Fix 2: Auto-generated env values — badge inline with label, remove copy buttons, muted readonly inputs - Fix 3: Snapshot table shows 0 instead of n/a; remove unused .col-na CSS - Fix 4: Disk warnings moved inline under storage bars (Inline alert field, GetInlineAlerts, inline-warning CSS) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -356,9 +356,9 @@
|
||||
<tr>
|
||||
<td class="mono">{{shortID .SnapshotID}}</td>
|
||||
<td class="mono">{{fmtTime .Time}}</td>
|
||||
<td class="mono">{{if .HasStats}}+{{.DataAdded}}{{else}}<span class="col-na" title="A restic pillanatképek nem tartalmaznak méretadatot — csak az utolsó mentés adatai állnak rendelkezésre.">n/a</span>{{end}}</td>
|
||||
<td class="mono">{{if .HasStats}}{{.FilesNew}}{{else}}<span class="col-na" title="A restic pillanatképek nem tartalmaznak fájlszámot — csak az utolsó mentés adatai állnak rendelkezésre.">n/a</span>{{end}}</td>
|
||||
<td class="mono">{{if .HasStats}}{{.FilesChanged}}{{else}}<span class="col-na" title="A restic pillanatképek nem tartalmaznak fájlszámot — csak az utolsó mentés adatai állnak rendelkezésre.">n/a</span>{{end}}</td>
|
||||
<td class="mono">{{if .HasStats}}+{{.DataAdded}}{{else}}0{{end}}</td>
|
||||
<td class="mono">{{if .HasStats}}{{.FilesNew}}{{else}}0{{end}}</td>
|
||||
<td class="mono">{{if .HasStats}}{{.FilesChanged}}{{else}}0{{end}}</td>
|
||||
</tr>
|
||||
{{end}}
|
||||
</tbody>
|
||||
|
||||
@@ -77,6 +77,17 @@
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
{{if .DiskWarnings}}
|
||||
<div class="inline-warnings">
|
||||
{{range .DiskWarnings}}
|
||||
<div class="inline-warning inline-warning-{{.Level}}">
|
||||
<span class="inline-warning-dot">●</span>
|
||||
<span class="inline-warning-text">{{.Message}}</span>
|
||||
{{if .Link}}<a href="{{.Link}}" class="inline-warning-link">{{.LinkText}} →</a>{{end}}
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
|
||||
@@ -260,22 +260,17 @@
|
||||
{{range .AutoFields}}
|
||||
{{$val := index $autoValues .EnvVar}}
|
||||
<div class="form-group form-group-auto">
|
||||
<label>{{.Label}}</label>
|
||||
<label>{{.Label}} <span class="auto-generated-badge">✓ Automatikusan generálva</span></label>
|
||||
{{if and $isDeployed $val}}
|
||||
{{if eq .Type "secret"}}
|
||||
<div class="input-with-button">
|
||||
<input type="password" id="auto-field-{{.EnvVar}}" class="form-control" value="{{$val}}" readonly>
|
||||
<button type="button" class="btn btn-sm btn-outline" onclick="toggleAutoField('auto-field-{{.EnvVar}}', this)">Megjelenítés</button>
|
||||
<button type="button" class="btn btn-sm btn-outline" onclick="copyAutoField('auto-field-{{.EnvVar}}', this)">Másolás</button>
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="input-with-button">
|
||||
<input type="text" id="auto-field-{{.EnvVar}}" class="form-control" value="{{$val}}" readonly>
|
||||
<button type="button" class="btn btn-sm btn-outline" onclick="copyAutoField('auto-field-{{.EnvVar}}', this)">Másolás</button>
|
||||
</div>
|
||||
<input type="text" id="auto-field-{{.EnvVar}}" class="form-control" value="{{$val}}" readonly>
|
||||
{{end}}
|
||||
{{end}}
|
||||
<span class="auto-generated-badge">✓ Automatikusan generálva</span>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
@@ -461,16 +456,6 @@ function toggleAutoField(fieldId, btn) {
|
||||
el.type = el.type === 'password' ? 'text' : 'password';
|
||||
btn.textContent = el.type === 'password' ? 'Megjelenítés' : 'Elrejtés';
|
||||
}
|
||||
function copyAutoField(fieldId, btn) {
|
||||
var el = document.getElementById(fieldId);
|
||||
if (!el) return;
|
||||
navigator.clipboard.writeText(el.value).then(function() {
|
||||
var orig = btn.textContent;
|
||||
btn.textContent = 'Másolva!';
|
||||
setTimeout(function() { btn.textContent = orig; }, 2000);
|
||||
});
|
||||
}
|
||||
|
||||
function generatePassword(fieldId) {
|
||||
const chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
|
||||
let pass = '';
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
{{if .Alerts}}
|
||||
<div class="alerts-container">
|
||||
{{range .Alerts}}
|
||||
{{if or (not .PageOnly) (pageMatch .PageOnly $.Page)}}
|
||||
{{if and (not .Inline) (or (not .PageOnly) (pageMatch .PageOnly $.Page))}}
|
||||
<div class="alert-banner alert-banner-{{.Level}}">
|
||||
<span class="alert-icon">{{if eq .Level "error"}}🔴{{else if eq .Level "warning"}}🟡{{else}}ℹ️{{end}}</span>
|
||||
<span class="alert-message">{{.Message}}</span>
|
||||
|
||||
@@ -63,6 +63,17 @@
|
||||
{{end}}
|
||||
{{end}}
|
||||
</div>
|
||||
{{if .DiskWarnings}}
|
||||
<div class="inline-warnings">
|
||||
{{range .DiskWarnings}}
|
||||
<div class="inline-warning inline-warning-{{.Level}}">
|
||||
<span class="inline-warning-dot">●</span>
|
||||
<span class="inline-warning-text">{{.Message}}</span>
|
||||
{{if .Link}}<a href="{{.Link}}" class="inline-warning-link">{{.LinkText}} →</a>{{end}}
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
|
||||
<!-- Section 2: Remote Monitoring Status -->
|
||||
|
||||
@@ -518,16 +518,14 @@ h3 {
|
||||
.form-group { margin-bottom: 1rem; }
|
||||
.form-group label { display: block; font-size: .85rem; font-weight: 500; margin-bottom: .4rem; color: var(--text-primary); }
|
||||
.form-group-auto {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: .5rem .75rem;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
}
|
||||
.form-group-auto label { margin: 0; }
|
||||
.auto-generated-badge { color: var(--green); font-size: .8rem; font-weight: 500; }
|
||||
.form-group-auto label { display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; }
|
||||
.form-group-auto .form-control[readonly] { background: var(--bg-primary); }
|
||||
.auto-generated-badge { color: var(--green); font-size: .75rem; font-weight: normal; }
|
||||
.checkbox-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -695,6 +693,37 @@ select.form-control option { background: var(--bg-secondary); color: var(--text-
|
||||
.alert-message { flex: 1; }
|
||||
.alert-link { margin-left: auto; white-space: nowrap; }
|
||||
|
||||
/* Inline storage warnings (under storage bars on dashboard and monitoring) */
|
||||
.inline-warnings { margin-top: 0.75rem; }
|
||||
.inline-warning {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.4rem 0.75rem;
|
||||
margin-top: 0.25rem;
|
||||
font-size: 0.8rem;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.inline-warning-warning {
|
||||
color: var(--yellow);
|
||||
background: rgba(250, 204, 21, 0.06);
|
||||
border: 1px solid rgba(250, 204, 21, 0.15);
|
||||
}
|
||||
.inline-warning-error {
|
||||
color: var(--red);
|
||||
background: rgba(218, 54, 51, 0.06);
|
||||
border: 1px solid rgba(218, 54, 51, 0.15);
|
||||
}
|
||||
.inline-warning-dot { font-size: 0.6rem; flex-shrink: 0; }
|
||||
.inline-warning-text { flex: 1; }
|
||||
.inline-warning-link {
|
||||
color: inherit;
|
||||
opacity: 0.8;
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
}
|
||||
.inline-warning-link:hover { opacity: 1; text-decoration: underline; }
|
||||
|
||||
/* Memory summary on deploy page */
|
||||
.memory-summary {
|
||||
background: var(--bg-card);
|
||||
@@ -1481,11 +1510,7 @@ a.stat-card:hover {
|
||||
letter-spacing: 0;
|
||||
margin-left: .25rem;
|
||||
}
|
||||
.col-na {
|
||||
color: var(--text-muted);
|
||||
font-style: italic;
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
|
||||
.snapshot-footer {
|
||||
padding: .75rem .75rem 0;
|
||||
@@ -2343,8 +2368,8 @@ a.stat-card:hover {
|
||||
|
||||
/* Cross-drive backup card on deploy page */
|
||||
.deploy-cross-drive {
|
||||
background: var(--card-bg);
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius);
|
||||
padding: 1.5rem;
|
||||
margin-top: 1rem;
|
||||
|
||||
Reference in New Issue
Block a user