Adopt shared WebUI layout primitives
This commit is contained in:
@@ -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}
|
||||||
|
|||||||
@@ -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}>
|
||||||
|
|||||||
@@ -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("")}>
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user