Skip to content

Commit 3f9c6f6

Browse files
jhodappjhodapp
authored
Merge pull request #27 from Jim-Hodapp-Coaching/new_coaching_page_ui_tweaks
A few UI/UX tweaks to the coaching session page
2 parents 41f5f01 + 545195b commit 3f9c6f6

File tree

1 file changed

+70
-80
lines changed

1 file changed

+70
-80
lines changed

‎src/app/coaching-sessions/[id]/page.tsx

+70-80
Original file line numberDiff line numberDiff line change
@@ -129,104 +129,99 @@ export default function CoachingSessionsPage() {
129129
return (
130130
<>
131131
<div className="hidden h-full flex-col md:flex">
132-
<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">
132+
<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">
133133
<h4 className="w-16 md:w-32 lg:w-48 font-semibold">Session Title</h4>
134134
<div className="ml-auto flex w-full space-x-2 sm:justify-end">
135135
<PresetSelector current={current} future={future} past={past} />
136-
<div className="hidden space-x-2 md:flex">
137-
<CodeViewer />
138-
<PresetShare />
139-
</div>
140136
<PresetActions />
141137
</div>
142138
</div>
143139
</div>
144140

145141
<Separator />
146142

147-
<div className="flex flex-col pt-4 px-6">
148-
<Collapsible
149-
open={isOpen}
150-
onOpenChange={setIsOpen}
151-
className="w-full space-y-2"
152-
>
153-
<div className="flex items-center justify-between space-x-4 px-4">
154-
<Button
155-
variant="outline"
156-
className={cn(
157-
"relative h-8 w-full justify-start rounded-[0.5rem] bg-muted text-sm font-semibold text-muted-foreground shadow-inner"
158-
)}
159-
onClick={() => setIsOpen(!isOpen)}
160-
>
161-
<span className="hidden md:inline-flex md:inline-flex">
162-
Overarching goal: to achieve...
163-
</span>
164-
<span className="inline-flex md:hidden">Goal...</span>
165-
<div className="ml-auto flex w-full space-x-2 justify-end">
166-
<div className="flex items-center space-x-2">
167-
<TooltipProvider>
168-
<Tooltip>
169-
<TooltipTrigger asChild>
170-
{/* FIXME: causes a React hydration error to put a checkbox here, not sure why */}
171-
{/* <Checkbox id="oa_achieved" /> */}
172-
</TooltipTrigger>
173-
<TooltipContent>
174-
<p className="font-normal">Achieved?</p>
175-
</TooltipContent>
176-
</Tooltip>
177-
</TooltipProvider>
178-
</div>
179-
<span>
180-
{!isOpen && <ChevronDown className="h-4 w-4" />}
181-
{isOpen && <ChevronUp className="h-4 w-4" />}
143+
<div className="grid grid-flow-row auto-rows-min gap-4">
144+
<div className="row-span-1 pt-4">
145+
<Collapsible
146+
open={isOpen}
147+
onOpenChange={setIsOpen}
148+
className="w-full space-y-2"
149+
>
150+
<div className="flex items-center justify-between space-x-4 px-4">
151+
<Button
152+
variant="outline"
153+
className={cn(
154+
"relative h-8 w-full justify-start rounded-[0.5rem] bg-muted text-sm font-semibold text-muted-foreground shadow-inner"
155+
)}
156+
onClick={() => setIsOpen(!isOpen)}
157+
>
158+
<span className="hidden md:inline-flex md:inline-flex">
159+
Overarching goal: to achieve...
182160
</span>
183-
</div>
184-
</Button>
185-
{/* <CollapsibleTrigger asChild>
186-
<Button variant="ghost" size="sm" className="w-9 p-0">
187-
<ChevronsUpDown className="h-4 w-4" />
188-
<span className="sr-only">Toggle</span>
161+
<span className="inline-flex md:hidden">Goal...</span>
162+
<div className="ml-auto flex w-full space-x-2 justify-end">
163+
<div className="flex items-center space-x-2">
164+
<TooltipProvider>
165+
<Tooltip>
166+
<TooltipTrigger asChild>
167+
{/* FIXME: causes a React hydration error to put a checkbox here, not sure why */}
168+
{/* <Checkbox id="oa_achieved" /> */}
169+
</TooltipTrigger>
170+
<TooltipContent>
171+
<p className="font-normal">Achieved?</p>
172+
</TooltipContent>
173+
</Tooltip>
174+
</TooltipProvider>
175+
</div>
176+
<span>
177+
{!isOpen && <ChevronDown className="h-4 w-4" />}
178+
{isOpen && <ChevronUp className="h-4 w-4" />}
179+
</span>
180+
</div>
189181
</Button>
190-
</CollapsibleTrigger> */}
191-
</div>
192-
<CollapsibleContent className="px-4">
193-
<div className="flex-col space-y-4 sm:flex">
194-
<Tabs defaultValue="agreements" className="flex-1">
195-
<TabsList className="grid w-full grid-cols-3">
196-
<TabsTrigger value="agreements">Agreements</TabsTrigger>
197-
<TabsTrigger value="actions">Actions</TabsTrigger>
198-
<TabsTrigger value="program">Program</TabsTrigger>
199-
</TabsList>
200-
<TabsContent value="agreements">
201-
<div className="bg-gray-500 text-white p-4">Agreements</div>
202-
</TabsContent>
203-
<TabsContent value="actions">
204-
<div className="bg-red-500 text-white p-4">Actions</div>
205-
</TabsContent>
206-
<TabsContent value="program">
207-
<div className="bg-blue-500 text-white p-4">Program</div>
208-
</TabsContent>
209-
</Tabs>
182+
{/* <CollapsibleTrigger asChild>
183+
<Button variant="ghost" size="sm" className="w-9 p-0">
184+
<ChevronsUpDown className="h-4 w-4" />
185+
<span className="sr-only">Toggle</span>
186+
</Button>
187+
</CollapsibleTrigger> */}
210188
</div>
211-
</CollapsibleContent>
212-
</Collapsible>
213-
</div>
189+
<CollapsibleContent className="px-4">
190+
<div className="flex-col space-y-4 sm:flex">
191+
<Tabs defaultValue="agreements" className="flex-1">
192+
<TabsList className="grid w-full grid-cols-3">
193+
<TabsTrigger value="agreements">Agreements</TabsTrigger>
194+
<TabsTrigger value="actions">Actions</TabsTrigger>
195+
<TabsTrigger value="program">Program</TabsTrigger>
196+
</TabsList>
197+
<TabsContent value="agreements">
198+
<div className="bg-gray-500 text-white p-4">Agreements</div>
199+
</TabsContent>
200+
<TabsContent value="actions">
201+
<div className="bg-red-500 text-white p-4">Actions</div>
202+
</TabsContent>
203+
<TabsContent value="program">
204+
<div className="bg-blue-500 text-white p-4">Program</div>
205+
</TabsContent>
206+
</Tabs>
207+
</div>
208+
</CollapsibleContent>
209+
</Collapsible>
210+
</div>
214211

215-
<div className="flex flex-col">
216-
<div className="container h-full py-6">
212+
<div className="row-span-1 h-full py-6 px-4">
217213
<div className="grid h-full items-stretch gap-6 md:grid-cols-[1fr_200px]">
218214
<div className="flex-col space-y-4 sm:flex md:order-1">
219215
<Tabs defaultValue="notes" className="flex-1">
220-
<TabsList className="grid flex w-96 grid-cols-4 justify-start">
216+
<TabsList className="grid flex w-128 grid-cols-2 justify-start">
221217
<TabsTrigger value="notes">Notes</TabsTrigger>
222-
<TabsTrigger value="program">Program</TabsTrigger>
223218
<TabsTrigger value="console">Console</TabsTrigger>
224-
<TabsTrigger value="coachs_notes">
219+
{/* <TabsTrigger value="coachs_notes">
225220
<div className="flex gap-2 items-start">
226221
<LockClosedIcon className="mt-1" />
227222
Coach&#39;s Notes
228223
</div>
229-
</TabsTrigger>
224+
</TabsTrigger> */}
230225
</TabsList>
231226
<TabsContent value="notes">
232227
<div className="flex h-full flex-col space-y-4">
@@ -240,11 +235,6 @@ export default function CoachingSessionsPage() {
240235
</p>
241236
</div>
242237
</TabsContent>
243-
<TabsContent value="program">
244-
<div className="p-4 min-h-[400px] md:min-h-[630px] lg:min-h-[630px] bg-red-500 text-white">
245-
Program
246-
</div>
247-
</TabsContent>
248238
<TabsContent value="console">
249239
<div className="p-4 min-h-[400px] md:min-h-[630px] lg:min-h-[630px] bg-blue-500 text-white">
250240
Console

0 commit comments

Comments
 (0)