ob/sprint
1
0
Fork 0
mirror of https://github.com/hex248/sprint.git synced 2026-02-08 18:33:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

utilised resizable panel group for IssuesTable + IssueDetailPane

Browse Source
This commit is contained in:
Oliver Bryan
2025-12-28 01:37:44 +00:00
parent aa2f8fff63
commit 82f39d3c4f
1 changed files with 31 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
packages/frontend/src/Index.tsx
View File

@@ -15,6 +15,7 @@ import {
} from "@/components/ui/dropdown-menu"; } from "@/components/ui/dropdown-menu";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { getAuthHeaders } from "@/lib/utils"; import { getAuthHeaders } from "@/lib/utils";
import { ResizablePanel, ResizablePanelGroup, ResizableSeparator } from "./components/ui/resizable";
function Index() { function Index() {
const serverURL = import.meta.env.VITE_SERVER_URL?.trim() || "http://localhost:3000"; const serverURL = import.meta.env.VITE_SERVER_URL?.trim() || "http://localhost:3000";
@@ -211,7 +212,8 @@ function Index() {
{/* main body */} {/* main body */}
<div className="w-full h-full flex items-start justify-between pt-1 gap-1"> <div className="w-full h-full flex items-start justify-between pt-1 gap-1">
{selectedProject && issues.length > 0 && ( {selectedProject && issues.length > 0 && (
<> <ResizablePanelGroup>
<ResizablePanel id={"left"} minSize={400}>
{/* issues list (table) */} {/* issues list (table) */}
<IssuesTable <IssuesTable
project={selectedProject} project={selectedProject}
@@ -220,18 +222,30 @@ function Index() {
issueSelectAction={setSelectedIssue} issueSelectAction={setSelectedIssue}
className="border w-full flex-shrink" className="border w-full flex-shrink"
/> />
</ResizablePanel>
{/* issue detail pane */} {/* issue detail pane */}
{selectedIssue && ( {selectedIssue && (
<div className="border w-2xl"> <>
<ResizableSeparator />
<ResizablePanel
id={"right"}
defaultSize={"30%"}
minSize={360}
maxSize={"60%"}
>
<div className="border">
<IssueDetailPane <IssueDetailPane
project={selectedProject} project={selectedProject}
issueData={selectedIssue} issueData={selectedIssue}
close={() => setSelectedIssue(null)} close={() => setSelectedIssue(null)}
/> />
</div> </div>
)} </ResizablePanel>
</> </>
)} )}
</ResizablePanelGroup>
)}
</div> </div>
{/* <LogOutButton /> */} {/* <LogOutButton /> */}