Adopt shared WebUI layout primitives

This commit is contained in:
2026-08-18 10:42:51 +02:00
parent 23f5091a2b
commit 86878ef7a7
4 changed files with 9 additions and 15 deletions
@@ -1,6 +1,6 @@
import { Scale } from "lucide-react"; import { Scale } from "lucide-react";
import { useEffect, useMemo, useRef, useState } from "react"; import { useEffect, useMemo, useRef, useState } from "react";
import { import { FormGrid,
Button, Button,
ConfirmDialog, ConfirmDialog,
Dialog, Dialog,
@@ -125,7 +125,7 @@ export default function CaseDecisionDialog({
<p className="case-decision-explanation"> <p className="case-decision-explanation">
The server verifies your current acting assignment, the effective Mandate, the exact Case revision, evidence, and legal basis before recording the outcome. The server verifies your current acting assignment, the effective Mandate, the exact Case revision, evidence, and legal basis before recording the outcome.
</p> </p>
<div className="case-decision-grid"> <FormGrid columns={2} gap="small" collapseAt="workspace" className="case-decision-grid">
<FormField label="Decision type" documentation={CASES_FIELDS_DOCUMENTATION}> <FormField label="Decision type" documentation={CASES_FIELDS_DOCUMENTATION}>
<input <input
value={decisionType} value={decisionType}
@@ -142,7 +142,7 @@ export default function CaseDecisionDialog({
onChange={(event) => setEffectiveAt(event.target.value)} onChange={(event) => setEffectiveAt(event.target.value)}
/> />
</FormField> </FormField>
</div> </FormGrid>
<FormField label="Operative result" documentation={CASES_FIELDS_DOCUMENTATION}> <FormField label="Operative result" documentation={CASES_FIELDS_DOCUMENTATION}>
<textarea <textarea
rows={4} rows={4}
+3 -3
View File
@@ -1,7 +1,7 @@
import { Archive, ArrowLeft, Save, Scale, Share2 } from "lucide-react"; import { Archive, ArrowLeft, Save, Scale, Share2 } from "lucide-react";
import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { useParams } from "react-router"; import { useParams } from "react-router";
import { import { ActionToolbar,
ActionBlockerHint, ActionBlockerHint,
Button, Button,
DocumentationHelpLink, DocumentationHelpLink,
@@ -181,7 +181,7 @@ export default function CaseDetailPage({ settings, auth }: PlatformRouteContext)
return ( return (
<main className="cases-page"> <main className="cases-page">
<div className="case-detail-shell"> <div className="case-detail-shell">
<div className="case-detail-toolbar"> <ActionToolbar className="case-detail-toolbar">
<button type="button" className="btn btn-ghost" onClick={() => navigate("/cases")}> <button type="button" className="btn btn-ghost" onClick={() => navigate("/cases")}>
<ArrowLeft size={16} aria-hidden="true" /> <ArrowLeft size={16} aria-hidden="true" />
Cases Cases
@@ -215,7 +215,7 @@ export default function CaseDetailPage({ settings, auth }: PlatformRouteContext)
</div> </div>
) : null} ) : null}
<DocumentationHelpLink reference={CASES_DOCUMENTATION} /> <DocumentationHelpLink reference={CASES_DOCUMENTATION} />
</div> </ActionToolbar>
<PageScrollViewport className="case-detail-viewport"> <PageScrollViewport className="case-detail-viewport">
{error && {error &&
<DismissibleAlert tone="danger" resetKey={error}> <DismissibleAlert tone="danger" resetKey={error}>
+3 -3
View File
@@ -1,6 +1,6 @@
import { Search } from "lucide-react"; import { Search } from "lucide-react";
import { useEffect, useMemo, useState, type FormEvent } from "react"; import { useEffect, useMemo, useState, type FormEvent } from "react";
import { import { ActionToolbar,
Button, Button,
DocumentationHelpLink, DocumentationHelpLink,
DismissibleAlert, DismissibleAlert,
@@ -74,7 +74,7 @@ export default function CasesPage({ settings }: PlatformRouteContext) {
return ( return (
<main className="cases-page"> <main className="cases-page">
<div className="cases-shell"> <div className="cases-shell">
<div className="cases-toolbar"> <ActionToolbar className="cases-toolbar">
<form className="cases-search" onSubmit={submit}> <form className="cases-search" onSubmit={submit}>
<Search size={17} aria-hidden="true" /> <Search size={17} aria-hidden="true" />
<input <input
@@ -102,7 +102,7 @@ export default function CasesPage({ settings }: PlatformRouteContext) {
</label> </label>
<span className="cases-count">{i18nMessage("i18n:govoplan-cases.case_count", { value0: total })}</span> <span className="cases-count">{i18nMessage("i18n:govoplan-cases.case_count", { value0: total })}</span>
<DocumentationHelpLink reference={CASES_DOCUMENTATION} /> <DocumentationHelpLink reference={CASES_DOCUMENTATION} />
</div> </ActionToolbar>
<PageScrollViewport className="cases-list-viewport"> <PageScrollViewport className="cases-list-viewport">
{error && {error &&
<DismissibleAlert tone="error" onDismiss={() => setError("")}> <DismissibleAlert tone="error" onDismiss={() => setError("")}>
-6
View File
@@ -288,9 +288,7 @@
} }
.case-decision-grid { .case-decision-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(210px, 0.7fr); grid-template-columns: minmax(0, 1fr) minmax(210px, 0.7fr);
gap: 12px;
} }
.case-decision-content textarea { .case-decision-content textarea {
@@ -433,10 +431,6 @@
flex-wrap: wrap; flex-wrap: wrap;
} }
.case-decision-grid {
grid-template-columns: 1fr;
}
.case-share-add-row .icon-button { .case-share-add-row .icon-button {
justify-self: end; justify-self: end;
} }