Skip to content

A few UI/UX tweaks to the coaching session page #27

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Aug 22, 2024
Merged

A few UI/UX tweaks to the coaching session page #27

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ca0f5b4
Fix the overarching goal div alignment to always line up with the coa…
jhodapp Aug 17, 2024
70c3c13
Make sure the coaching session title div stays aligned with coaching …
jhodapp Aug 21, 2024
545195b
Remove the CodeViewer and PresetShare components from the coaching se…
jhodapp Aug 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
150 changes: 70 additions & 80 deletions src/app/coaching-sessions/[id]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,104 +129,99 @@ export default function CoachingSessionsPage() {
return (
<>
<div className="hidden h-full flex-col md:flex">
<div className="container flex flex-col items-start justify-between space-y-2 py-4 sm:flex-row sm:items-center sm:space-y-0 md:h-16">
<div className="flex flex-col items-start justify-between space-y-2 py-4 px-4 sm:flex-row sm:items-center sm:space-y-0 md:h-16">
<h4 className="w-16 md:w-32 lg:w-48 font-semibold">Session Title</h4>
<div className="ml-auto flex w-full space-x-2 sm:justify-end">
<PresetSelector current={current} future={future} past={past} />
<div className="hidden space-x-2 md:flex">
<CodeViewer />
<PresetShare />
</div>
<PresetActions />
</div>
</div>
</div>

<Separator />

<div className="flex flex-col pt-4 px-6">
<Collapsible
open={isOpen}
onOpenChange={setIsOpen}
className="w-full space-y-2"
>
<div className="flex items-center justify-between space-x-4 px-4">
<Button
variant="outline"
className={cn(
"relative h-8 w-full justify-start rounded-[0.5rem] bg-muted text-sm font-semibold text-muted-foreground shadow-inner"
)}
onClick={() => setIsOpen(!isOpen)}
>
<span className="hidden md:inline-flex md:inline-flex">
Overarching goal: to achieve...
</span>
<span className="inline-flex md:hidden">Goal...</span>
<div className="ml-auto flex w-full space-x-2 justify-end">
<div className="flex items-center space-x-2">
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
{/* FIXME: causes a React hydration error to put a checkbox here, not sure why */}
{/* <Checkbox id="oa_achieved" /> */}
</TooltipTrigger>
<TooltipContent>
<p className="font-normal">Achieved?</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
<span>
{!isOpen && <ChevronDown className="h-4 w-4" />}
{isOpen && <ChevronUp className="h-4 w-4" />}
<div className="grid grid-flow-row auto-rows-min gap-4">
<div className="row-span-1 pt-4">
<Collapsible
open={isOpen}
onOpenChange={setIsOpen}
className="w-full space-y-2"
>
<div className="flex items-center justify-between space-x-4 px-4">
<Button
variant="outline"
className={cn(
"relative h-8 w-full justify-start rounded-[0.5rem] bg-muted text-sm font-semibold text-muted-foreground shadow-inner"
)}
onClick={() => setIsOpen(!isOpen)}
>
<span className="hidden md:inline-flex md:inline-flex">
Overarching goal: to achieve...
</span>
</div>
</Button>
{/* <CollapsibleTrigger asChild>
<Button variant="ghost" size="sm" className="w-9 p-0">
<ChevronsUpDown className="h-4 w-4" />
<span className="sr-only">Toggle</span>
<span className="inline-flex md:hidden">Goal...</span>
<div className="ml-auto flex w-full space-x-2 justify-end">
<div className="flex items-center space-x-2">
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
{/* FIXME: causes a React hydration error to put a checkbox here, not sure why */}
{/* <Checkbox id="oa_achieved" /> */}
</TooltipTrigger>
<TooltipContent>
<p className="font-normal">Achieved?</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
<span>
{!isOpen && <ChevronDown className="h-4 w-4" />}
{isOpen && <ChevronUp className="h-4 w-4" />}
</span>
</div>
</Button>
</CollapsibleTrigger> */}
</div>
<CollapsibleContent className="px-4">
<div className="flex-col space-y-4 sm:flex">
<Tabs defaultValue="agreements" className="flex-1">
<TabsList className="grid w-full grid-cols-3">
<TabsTrigger value="agreements">Agreements</TabsTrigger>
<TabsTrigger value="actions">Actions</TabsTrigger>
<TabsTrigger value="program">Program</TabsTrigger>
</TabsList>
<TabsContent value="agreements">
<div className="bg-gray-500 text-white p-4">Agreements</div>
</TabsContent>
<TabsContent value="actions">
<div className="bg-red-500 text-white p-4">Actions</div>
</TabsContent>
<TabsContent value="program">
<div className="bg-blue-500 text-white p-4">Program</div>
</TabsContent>
</Tabs>
{/* <CollapsibleTrigger asChild>
<Button variant="ghost" size="sm" className="w-9 p-0">
<ChevronsUpDown className="h-4 w-4" />
<span className="sr-only">Toggle</span>
</Button>
</CollapsibleTrigger> */}
</div>
</CollapsibleContent>
</Collapsible>
</div>
<CollapsibleContent className="px-4">
<div className="flex-col space-y-4 sm:flex">
<Tabs defaultValue="agreements" className="flex-1">
<TabsList className="grid w-full grid-cols-3">
<TabsTrigger value="agreements">Agreements</TabsTrigger>
<TabsTrigger value="actions">Actions</TabsTrigger>
<TabsTrigger value="program">Program</TabsTrigger>
</TabsList>
<TabsContent value="agreements">
<div className="bg-gray-500 text-white p-4">Agreements</div>
</TabsContent>
<TabsContent value="actions">
<div className="bg-red-500 text-white p-4">Actions</div>
</TabsContent>
<TabsContent value="program">
<div className="bg-blue-500 text-white p-4">Program</div>
</TabsContent>
</Tabs>
</div>
</CollapsibleContent>
</Collapsible>
</div>

<div className="flex flex-col">
<div className="container h-full py-6">
<div className="row-span-1 h-full py-6 px-4">
<div className="grid h-full items-stretch gap-6 md:grid-cols-[1fr_200px]">
<div className="flex-col space-y-4 sm:flex md:order-1">
<Tabs defaultValue="notes" className="flex-1">
<TabsList className="grid flex w-96 grid-cols-4 justify-start">
<TabsList className="grid flex w-128 grid-cols-2 justify-start">
<TabsTrigger value="notes">Notes</TabsTrigger>
<TabsTrigger value="program">Program</TabsTrigger>
<TabsTrigger value="console">Console</TabsTrigger>
<TabsTrigger value="coachs_notes">
{/* <TabsTrigger value="coachs_notes">
<div className="flex gap-2 items-start">
<LockClosedIcon className="mt-1" />
Coach&#39;s Notes
</div>
</TabsTrigger>
</TabsTrigger> */}
</TabsList>
<TabsContent value="notes">
<div className="flex h-full flex-col space-y-4">
Expand All @@ -240,11 +235,6 @@ export default function CoachingSessionsPage() {
</p>
</div>
</TabsContent>
<TabsContent value="program">
<div className="p-4 min-h-[400px] md:min-h-[630px] lg:min-h-[630px] bg-red-500 text-white">
Program
</div>
</TabsContent>
<TabsContent value="console">
<div className="p-4 min-h-[400px] md:min-h-[630px] lg:min-h-[630px] bg-blue-500 text-white">
Console
Expand Down
Loading