refactor: improve admin panel styling with new CSS helpers and page layout patterns
- Add .admin-card, .admin-filter-bar, .admin-stat-row, .admin-stat-chip, .admin-section-title, .admin-info-grid, .admin-empty CSS helpers - Improve admin table styling (uppercase headers, better spacing, border-separate) - Add dark mode support for admin tables and cards - Update housekeeping and settings pages to use new layout components - Clean up inline styles in housekeeping and settings pages
This commit is contained in:
remco committed
1 parent
1ea953fd65
commit
b621ec79a3
3 files changed
+162
-82
No files matched your search
@@ -44,83 +44,76 @@ export default async function AdminHousekeeping({
|
||||
|
||||
return (
|
||||
<main>
|
||||
<h1>Housekeeping Permissions</h1>
|
||||
<p className="muted" style={{ marginTop: "-0.4rem" }}>
|
||||
Minimum rank required to access each housekeeping permission key. Saving an
|
||||
existing key overwrites its min rank and description.
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
|
||||
<StatusCard label="Permissions" value={permissions.length} icon="🔑" />
|
||||
<StatusCard label="Highest min rank" value={maxRank} icon="⬆️" />
|
||||
<StatusCard label="Total min rank" value={totalMin} icon="∑" />
|
||||
</div>
|
||||
|
||||
<div className="card mt-6" style={{ marginBottom: "1rem" }}>
|
||||
<div style={{ display: "flex", gap: "0.5rem", alignItems: "center", flexWrap: "wrap" }}>
|
||||
<form style={{ display: "flex", gap: "0.5rem", flex: 1 }}>
|
||||
<input
|
||||
name="q"
|
||||
defaultValue={q}
|
||||
placeholder="Search permission key..."
|
||||
style={{ flex: 1, minWidth: 220 }}
|
||||
/>
|
||||
<button type="submit" className="btn btn-primary">Search</button>
|
||||
</form>
|
||||
<div style={{ display: "flex", gap: "0.5rem" }}>
|
||||
<Link href="/admin/housekeeping?mode=manage" className="btn btn-outline">
|
||||
Manage
|
||||
</Link>
|
||||
<Link href="/admin/housekeeping?mode=import&form=selected_ids" className="btn btn-outline">
|
||||
Import selection
|
||||
</Link>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--color-primary)]/20 to-[var(--color-primary)]/5 grid place-items-center">
|
||||
<span className="text-lg">🔑</span>
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">Housekeeping Permissions</h1>
|
||||
<p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">
|
||||
Minimum rank required to access each housekeeping permission key.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="admin-stat-row">
|
||||
<span className="admin-stat-chip">{permissions.length} permissions</span>
|
||||
<span className="admin-stat-chip">Highest min rank: {maxRank}</span>
|
||||
<span className="admin-stat-chip">Total min rank: {totalMin}</span>
|
||||
</div>
|
||||
|
||||
<div className="admin-filter-bar">
|
||||
<form className="flex gap-2 flex-1">
|
||||
<input name="q" defaultValue={q} placeholder="Search permission key..." className="flex-1 min-w-[200px]" />
|
||||
<button type="submit" className="btn btn-primary">Search</button>
|
||||
</form>
|
||||
<Link href="/admin/housekeeping?mode=manage" className="btn btn-outline">Manage</Link>
|
||||
<Link href="/admin/housekeeping?mode=import&form=selected_ids" className="btn btn-outline">Import selection</Link>
|
||||
</div>
|
||||
|
||||
{mode === "manage" ? (
|
||||
<section className="mt-6">
|
||||
<h2>Add / overwrite permission</h2>
|
||||
<form action={upsertPermission} className="card">
|
||||
<div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap" }}>
|
||||
<input name="permission" placeholder="permission key" required style={{ minWidth: 200 }} />
|
||||
<input name="minRank" type="number" min={0} placeholder="Min rank" required style={{ width: 110 }} />
|
||||
<input name="description" placeholder="description" style={{ flex: 1, minWidth: 160 }} />
|
||||
<section>
|
||||
<h2 className="admin-section-title">Add / overwrite permission</h2>
|
||||
<form action={upsertPermission} className="admin-card">
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
<input name="permission" placeholder="permission key" required className="min-w-[200px]" />
|
||||
<input name="minRank" type="number" min={0} placeholder="Min rank" required className="w-[110px]" />
|
||||
<input name="description" placeholder="description" className="flex-1 min-w-[160px]" />
|
||||
<button type="submit" className="btn btn-primary">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
) : (
|
||||
<section className="mt-6">
|
||||
<h2>Import Permissions</h2>
|
||||
<p className="muted" style={{ marginTop: "-0.4rem" }}>
|
||||
<section>
|
||||
<h2 className="admin-section-title">Import Permissions</h2>
|
||||
<p className="text-xs text-[var(--color-text-muted)] -mt-2 mb-3">
|
||||
Paste comma-separated permission IDs to import them as a selection.
|
||||
</p>
|
||||
<form action={upsertPermission} className="card">
|
||||
<div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap" }}>
|
||||
<input name="q" placeholder="Permission IDs (comma-separated)" required style={{ flex: 1, minWidth: 200 }} />
|
||||
<form action={upsertPermission} className="admin-card">
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
<input name="q" placeholder="Permission IDs (comma-separated)" required className="flex-1 min-w-[200px]" />
|
||||
<button type="submit" className="btn btn-primary">Import</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
)}
|
||||
|
||||
<section className="mt-6">
|
||||
<h2>
|
||||
<section>
|
||||
<h2 className="admin-section-title">
|
||||
Permissions <span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-[var(--color-primary)]/18 text-[var(--color-text)]">{filtered.length}</span>
|
||||
</h2>
|
||||
{filtered.length === 0 ? (
|
||||
<p className="muted">No housekeeping permissions match this search.</p>
|
||||
<div className="admin-empty">No housekeeping permissions match this search.</div>
|
||||
) : (
|
||||
<div className="card" style={{ padding: 0, overflowX: "auto" }}>
|
||||
<div className="overflow-x-auto">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style={{ width: "40px" }}>#</th>
|
||||
<th className="w-[40px]">#</th>
|
||||
<th>Permission</th>
|
||||
<th>Description</th>
|
||||
<th style={{ width: 200 }}>Min rank</th>
|
||||
<th style={{ width: 80 }} />
|
||||
<th className="w-[200px]">Min rank</th>
|
||||
<th className="w-[80px]" />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
@@ -16,36 +16,41 @@ export default async function AdminSettings() {
|
||||
|
||||
return (
|
||||
<main>
|
||||
<h1>CMS Settings</h1>
|
||||
<p className="muted" style={{ marginTop: "-0.4rem" }}>
|
||||
Key/value config read at runtime via <code>siteSettings.get()</code>. Saving busts the cache.
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
|
||||
<StatusCard label="Settings" value={settings.length} icon="🗄️" />
|
||||
<StatusCard label="With comment" value={documented} icon="📝" />
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--color-primary)]/20 to-[var(--color-primary)]/5 grid place-items-center">
|
||||
<span className="text-lg">⚙️</span>
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">CMS Settings</h1>
|
||||
<p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">
|
||||
Key/value config read at runtime via <code>siteSettings.get()</code>. Saving busts the cache.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section className="mt-6">
|
||||
<h2>Add / overwrite</h2>
|
||||
<form action={createSetting} className="card">
|
||||
<div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap" }}>
|
||||
<div className="admin-stat-row">
|
||||
<span className="admin-stat-chip">{settings.length} settings</span>
|
||||
<span className="admin-stat-chip">{documented} with comment</span>
|
||||
</div>
|
||||
|
||||
<section>
|
||||
<h2 className="admin-section-title">Add / overwrite</h2>
|
||||
<form action={createSetting} className="admin-card">
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
<input name="key" placeholder="key" required />
|
||||
<input name="value" placeholder="value" style={{ flex: 1, minWidth: 160 }} />
|
||||
<input name="value" placeholder="value" className="flex-1 min-w-[160px]" />
|
||||
<input name="comment" placeholder="comment" />
|
||||
<button type="submit" className="btn btn-primary">
|
||||
Save
|
||||
</button>
|
||||
<button type="submit" className="btn btn-primary">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section className="mt-6">
|
||||
<h2>
|
||||
<section>
|
||||
<h2 className="admin-section-title">
|
||||
Settings <span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-[var(--color-primary)]/18 text-[var(--color-text)]">{settings.length}</span>
|
||||
</h2>
|
||||
{settings.length === 0 ? (
|
||||
<p className="muted">No settings yet.</p>
|
||||
<div className="admin-empty">No settings yet.</div>
|
||||
) : (
|
||||
<div className="grid">
|
||||
{settings.map((s) => (
|
||||
|
||||
Reference in new issue
Block a user