Adopt shared WebUI layout primitives

This commit is contained in:
2026-08-18 10:42:55 +02:00
parent 5608022b3f
commit e3c0db76c9
3 changed files with 6 additions and 13 deletions
@@ -1,6 +1,6 @@
import { Plus, Trash2 } from "lucide-react"; import { Plus, Trash2 } from "lucide-react";
import { useEffect, useMemo, useState } from "react"; import { useEffect, useMemo, useState } from "react";
import { import { FormGrid,
Button, Button,
Dialog, Dialog,
DocumentationHelpLink, DocumentationHelpLink,
@@ -128,7 +128,7 @@ export default function VotingBallotDialog({
<div className="voting-ballot-editor"> <div className="voting-ballot-editor">
<div className="voting-editor-help"><DocumentationHelpLink reference={VOTING_FIELD_DOCUMENTATION} /></div> <div className="voting-editor-help"><DocumentationHelpLink reference={VOTING_FIELD_DOCUMENTATION} /></div>
{error && <DismissibleAlert tone="danger" resetKey={error}>{error}</DismissibleAlert>} {error && <DismissibleAlert tone="danger" resetKey={error}>{error}</DismissibleAlert>}
<div className="voting-editor-grid"> <FormGrid columns={2} gap="compact" collapseAt="workspace">
<FormField label="Title"><input value={draft.title} disabled={busy} onChange={(event) => setDraft({ ...draft, title: event.target.value })} /></FormField> <FormField label="Title"><input value={draft.title} disabled={busy} onChange={(event) => setDraft({ ...draft, title: event.target.value })} /></FormField>
<FormField label="Method"> <FormField label="Method">
<select value={draft.method} disabled={busy} onChange={(event) => setDraft({ ...draft, method: event.target.value as VotingBallotDraft["method"] })}> <select value={draft.method} disabled={busy} onChange={(event) => setDraft({ ...draft, method: event.target.value as VotingBallotDraft["method"] })}>
@@ -175,7 +175,7 @@ export default function VotingBallotDialog({
/> />
</FormField> </FormField>
</>} </>}
</div> </FormGrid>
<EditorHeading title="Options" onAdd={() => setDraft({ ...draft, options: [...draft.options, { key: `option-${draft.options.length + 1}`, label: "", description: "" }] })} disabled={busy} /> <EditorHeading title="Options" onAdd={() => setDraft({ ...draft, options: [...draft.options, { key: `option-${draft.options.length + 1}`, label: "", description: "" }] })} disabled={busy} />
<div className="voting-editor-list"> <div className="voting-editor-list">
+3 -3
View File
@@ -1,6 +1,6 @@
import { CheckCircle2, Pencil, Plus, RefreshCw, ShieldCheck, XCircle } from "lucide-react"; import { CheckCircle2, Pencil, Plus, RefreshCw, ShieldCheck, XCircle } from "lucide-react";
import { useCallback, useEffect, useMemo, useState } from "react"; import { useCallback, useEffect, useMemo, useState } from "react";
import { import { ActionToolbar,
ActionBlockerHint, ActionBlockerHint,
Button, Button,
ConfirmDialog, ConfirmDialog,
@@ -146,11 +146,11 @@ export default function VotingPage({ settings, auth }: PlatformRouteContext) {
<main className="voting-page"> <main className="voting-page">
<div className="voting-shell"> <div className="voting-shell">
<aside className="voting-catalogue"> <aside className="voting-catalogue">
<div className="voting-toolbar"> <ActionToolbar className="voting-toolbar">
<IconButton label="Refresh ballots" icon={<RefreshCw size={16} />} disabled={loading || busy} disabledReason={loading ? VOTING_I18N.loading : busy ? VOTING_I18N.busy : undefined} onClick={() => void loadList()} /> <IconButton label="Refresh ballots" icon={<RefreshCw size={16} />} disabled={loading || busy} disabledReason={loading ? VOTING_I18N.loading : busy ? VOTING_I18N.busy : undefined} onClick={() => void loadList()} />
<Button variant="primary" disabled={!canManage} disabledReason={!canManage ? VOTING_I18N.manageReason : undefined} onClick={() => setEditing("new")}><Plus size={16} aria-hidden="true" />New ballot</Button> <Button variant="primary" disabled={!canManage} disabledReason={!canManage ? VOTING_I18N.manageReason : undefined} onClick={() => setEditing("new")}><Plus size={16} aria-hidden="true" />New ballot</Button>
<DocumentationHelpLink reference={VOTING_DOCUMENTATION} /> <DocumentationHelpLink reference={VOTING_DOCUMENTATION} />
</div> </ActionToolbar>
<PageScrollViewport className="voting-list-viewport"> <PageScrollViewport className="voting-list-viewport">
{loading && <LoadingIndicator label="Loading ballots" />} {loading && <LoadingIndicator label="Loading ballots" />}
{!loading && items.length === 0 && <div className="voting-empty">No ballots.</div>} {!loading && items.length === 0 && <div className="voting-empty">No ballots.</div>}
-7
View File
@@ -223,12 +223,6 @@
justify-content: flex-end; justify-content: flex-end;
} }
.voting-editor-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.voting-editor-wide { .voting-editor-wide {
grid-column: 1 / -1; grid-column: 1 / -1;
} }
@@ -274,7 +268,6 @@
} }
.voting-metrics, .voting-metrics,
.voting-editor-grid,
.voting-option-row, .voting-option-row,
.voting-elector-row { .voting-elector-row {
grid-template-columns: 1fr; grid-template-columns: 1fr;