Scarriffle/certain
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Kategorien-Seite als durchgehende Liste statt abgesetzter Gruppen-Karten

Browse Source 
Gruppen erscheinen nur noch als dezente Zwischenüberschrift; die Kategorien
laufen als schlichte Zeilen mit dünnem Trenner durch (eine Karte).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Guido
2026-08-19 21:40:32 +02:00
co-authored by Claude Opus 4.8
parent 37f64999cd
commit a3ab03aeec
2 changed files with 48 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/finance.css
+22 -17
View File
@@ -149,32 +149,37 @@
font-size: 0.8rem; font-size: 0.8rem;
} }
/* Kategorie-Gruppe (Verwaltung). */ /* Kategorien-Verwaltung: durchgehende Liste in EINER Karte, die Gruppen nur als
.cat-group + .cat-group { dezente Zwischenüberschrift dazwischen (keine abgesetzten Gruppen-Karten). */
margin-top: var(--sp-4); .cat-section + .cat-section {
margin-top: var(--sp-5);
} }
.cat-group-head { .cat-section-head {
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--sp-3); gap: var(--sp-2);
margin-bottom: var(--sp-2); padding-bottom: var(--sp-2);
margin-bottom: 2px;
border-bottom: 2px solid var(--border-strong);
} }
.cat-group-head h2 { .cat-section-name {
margin: 0; flex: 1;
} min-width: 0;
.cat-list { font-size: 1.05rem;
display: flex; font-weight: 650;
flex-direction: column;
gap: 6px;
} }
.cat-row { .cat-row {
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--sp-3); gap: var(--sp-3);
padding: var(--sp-2) var(--sp-3); padding: 9px 4px;
border: 1px solid var(--border); border-bottom: 1px solid var(--border);
border-radius: var(--radius-sm); }
background: var(--surface); .cat-section .cat-row:last-child {
border-bottom: none;
}
.cat-row:hover {
background: var(--surface-2);
} }
.cat-row .grow { .cat-row .grow {
flex: 1; flex: 1;
web/src/pages/Categories.jsx
+11 -8
View File
@@ -209,11 +209,12 @@ export default function Categories() {
</button> </button>
</div> </div>
<div className="card">
{groups.map((g) => ( {groups.map((g) => (
<div className="card cat-group" key={g.id}> <div className="cat-section" key={g.id}>
<div className="cat-group-head"> <div className="cat-section-head">
<IconChip name={g.icon} color={g.color} /> <IconChip name={g.icon} color={g.color} size={24} />
<h2 className="grow">{g.name}</h2> <span className="cat-section-name">{g.name}</span>
<span className={`badge ${g.kind === "income" ? "ok" : ""}`}> <span className={`badge ${g.kind === "income" ? "ok" : ""}`}>
{g.kind === "income" ? t("categories.income") : t("categories.expense")} {g.kind === "income" ? t("categories.income") : t("categories.expense")}
</span> </span>
@@ -227,10 +228,9 @@ export default function Categories() {
<Icon name="trash" size={15} /> <Icon name="trash" size={15} />
</button> </button>
</div> </div>
<div className="cat-list">
{g.categories.map((c) => ( {g.categories.map((c) => (
<div className="cat-row" key={c.id}> <div className="cat-row" key={c.id}>
<IconChip name={c.icon} color={c.color} size={28} /> <IconChip name={c.icon} color={c.color} size={26} />
<span className="grow">{c.name}</span> <span className="grow">{c.name}</span>
<button className="btn sm ghost" title={t("categories.keywordsBtn")} onClick={() => setKeywordCat(c)}> <button className="btn sm ghost" title={t("categories.keywordsBtn")} onClick={() => setKeywordCat(c)}>
<Icon name="tags" size={14} /> <Icon name="tags" size={14} />
@@ -243,10 +243,13 @@ export default function Categories() {
</button> </button>
</div> </div>
))} ))}
{g.categories.length === 0 && <div className="muted small">{t("categories.emptyGroup")}</div>} {g.categories.length === 0 && (
</div> <div className="muted small" style={{ padding: "var(--sp-2) 4px" }}>{t("categories.emptyGroup")}</div>
)}
</div> </div>
))} ))}
{groups.length === 0 && <div className="empty-state">{t("categories.emptyGroup")}</div>}
</div>
{modal && ( {modal && (
<Modal <Modal