admin/felhom-controller
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Part A: shared app_list_row partial — ONE row grammar on four surfaces (v0.126.0)

Browse Source 
- templates/app_row.html: app_list_row/app_list_row_end (layout_start/_end idiom) — icon+name
  (+optional secondary) left, caller action block right; compact 44px row; logoURL→PNG→
  optional FallbackIcon→hidden onerror chain
- applied: Távoli mentés toggle list, Visszaállítás restore-to-verify + .fab lists, dashboard
  Telepített alkalmazások (state edge + data-href preserved); Alkalmazások collapsed headers
  ALIGNED (icon+name left, status dot moved right before chevron; expander untouched)
- funcmap: dict + appHref; OffboxAppRow/AppBackupRow gain Slug
- style.css: .app-row family; stack-card/stack-info/stack-logo/stack-name/stack-desc/
  stack-actions rules retired (dashboard rows now shared); .app-backup-row-header matched
  to the shared row height
- scripts/app_row_dedup_gate.py: row markup single-sourced (red-proven: pasted old
  storage-path-item block → exit 1); render tests per surface (app_row_test.go)
- NO behavior change: toggle/download/expander actions byte-identical
This commit is contained in:
authentik Default Admin
2026-07-13 11:26:48 +02:00
parent 7b3e7f2e71
commit 3eacb6c326
11 changed files with 380 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files
controller/internal/web/templates/style.css
+74 -38
View File
@@ -287,47 +287,89 @@ h3 {
.meter.crit .meter-flag { color: var(--crit); background: var(--crit-dim); }
.meter-flag .ico { width: 13px; height: 13px; }
/* Stack list (dashboard) — one panel, hairline-separated rows, 2px state edge. */
.stack-list {
background: var(--bg-1);
/* ─── Shared app-list row (v0.126.0) ──────────────────────────────────
THE canonical list grammar (app_row.html partial): icon + name left, caller action
block right. Compact single-row height unless a secondary line is present — matches
the Alkalmazások backup-status collapsed-header density. */
.app-row-list {
display: flex;
flex-direction: column;
gap: .5rem;
}
.app-row {
position: relative;
display: flex;
align-items: center;
gap: .75rem;
padding: .5rem 1rem;
min-height: 44px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: var(--radius);
}
.stack-card {
position: relative;
padding: .85rem 1.25rem;
border-top: 1px solid var(--line-soft);
.app-row-icon {
width: 24px;
height: 24px;
border-radius: var(--radius);
object-fit: contain;
background: var(--bg-2);
flex-shrink: 0;
}
.app-row-text {
display: flex;
flex-direction: column;
gap: .1rem;
min-width: 0;
flex: 1;
}
.app-row-name {
font-weight: 500;
font-size: .9rem;
}
.app-row-secondary {
font-size: .8rem;
color: var(--text-2);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.app-row-actions {
display: flex;
justify-content: space-between;
align-items: center;
transition: background 0.15s ease;
justify-content: flex-end;
gap: .5rem;
flex-shrink: 0;
flex-wrap: wrap;
}
.stack-card:first-child { border-top: none; }
.stack-card:hover {
background: rgba(0,131,216,.04);
}
.stack-card::before {
/* 2px state edge (dashboard rows carry stack-state-<color> as RowClass). */
.app-row::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 2px;
background: transparent;
}
.stack-card.stack-state-run::before,
.stack-card.stack-state-progress::before { background: var(--blue); }
.stack-card.stack-state-warn::before { background: var(--warn); }
.stack-info {
display: flex;
align-items: center;
gap: .75rem;
}
.stack-logo {
width: 32px;
height: 32px;
.app-row.stack-state-run::before,
.app-row.stack-state-progress::before { background: var(--blue); }
.app-row.stack-state-warn::before { background: var(--warn); }
/* Stack list (dashboard) — one panel, hairline-separated shared rows. */
.stack-list {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: var(--radius);
object-fit: contain;
background: var(--bg-2);
padding: 4px;
}
.stack-list .app-row {
background: transparent;
border: none;
border-top: 1px solid var(--line-soft);
border-radius: 0;
padding: .6rem 1.25rem;
transition: background 0.15s ease;
}
.stack-list .app-row:first-child { border-top: none; }
.stack-list .app-row:hover {
background: rgba(0,131,216,.04);
}
.stack-logo-lg {
width: 48px;
@@ -337,13 +379,6 @@ h3 {
background: var(--bg-2);
padding: 6px;
}
.stack-name { font-size: 1rem; font-weight: 500; }
.stack-desc { display: block; font-size: .8rem; color: var(--text-2); }
.stack-actions {
display: flex;
align-items: center;
gap: .5rem;
}
.stack-state-label {
font-size: .8rem;
color: var(--text-2);
@@ -2392,8 +2427,8 @@ a.stat-card:hover {
.nav-links a.active { border-left: none; border-bottom: 2px solid var(--blue); }
.content { margin-left: 0; padding: 1rem; }
body { flex-direction: column; }
.stack-card { flex-direction: column; align-items: flex-start; gap: .75rem; }
.stack-actions { width: 100%; justify-content: flex-end; }
.app-row { flex-wrap: wrap; }
.app-row-actions { width: 100%; justify-content: flex-end; }
.stack-grid { grid-template-columns: 1fr; }
.stats-grid { grid-template-columns: repeat(3, 1fr); }
.deploy-info { flex-direction: column; }
@@ -2694,7 +2729,8 @@ a.stat-card:hover {
display: flex;
align-items: center;
gap: .75rem;
padding: .65rem 1rem;
padding: .5rem 1rem;
min-height: 44px; /* same compact height as the shared .app-row */
cursor: pointer;
user-select: none;
}