Michael/Socialflow
1
0 Fork 0
mirror of https://github.com/R0m1k3/Socialflow.git synced 2026-10-16 19:59:42 +02:00
Code Issues Packages Projects Releases Wiki Activity

Improve date and time selection interface for better user experience

Browse Source 
Adjusted DateTimePicker component by reducing scroll area height, button size, and padding for a more compact and touch-friendly interface, optimizing space usage.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/aGnsIb5
This commit is contained in:
michaelschal committed 2025-10-28 13:18:59 +00:00
1 parent fc9d0e594a
commit 9e58d3be47
2 files changed
+13 -16
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

client/src/components/datetime-picker.tsx
+12 -15
View File
@@ -137,15 +137,15 @@ export function DateTimePicker({ value, onChange, occupiedDates = [], placeholde
</PopoverTrigger>
<PopoverContent className="w-auto p-0" align="start">
<div className="flex">
<ScrollArea className="h-60">
<div className="p-2">
<div className="text-xs font-semibold mb-2 px-2 text-muted-foreground">Heures</div>
<ScrollArea className="h-48">
<div className="p-1.5">
<div className="text-[10px] font-semibold mb-1.5 px-1.5 text-muted-foreground">Heures</div>
{hours.map((hour) => (
<Button
key={hour}
variant="ghost"
className={cn(
"w-full justify-center mb-1",
"w-full justify-center mb-0.5 h-9 text-xs",
selectedHour === hour && "bg-primary text-primary-foreground",
isOptimalHour(hour) && selectedHour !== hour && "bg-green-500/20 text-green-700 dark:text-green-300 font-semibold hover:bg-green-500/30"
)}
@@ -160,15 +160,15 @@ export function DateTimePicker({ value, onChange, occupiedDates = [], placeholde
))}
</div>
</ScrollArea>
<ScrollArea className="h-60 border-l">
<div className="p-2">
<div className="text-xs font-semibold mb-2 px-2 text-muted-foreground">Minutes</div>
<ScrollArea className="h-48 border-l">
<div className="p-1.5">
<div className="text-[10px] font-semibold mb-1.5 px-1.5 text-muted-foreground">Minutes</div>
{minutes.map((minute) => (
<Button
key={minute}
variant="ghost"
className={cn(
"w-full justify-center mb-1",
"w-full justify-center mb-0.5 h-9 text-xs",
selectedMinute === minute && "bg-primary text-primary-foreground"
)}
onClick={() => handleTimeChange(selectedHour, minute)}
@@ -180,16 +180,13 @@ export function DateTimePicker({ value, onChange, occupiedDates = [], placeholde
</div>
</ScrollArea>
</div>
<div className="p-3 border-t bg-muted/50">
<div className="flex items-center gap-2 mb-1">
<div className="w-2 h-2 rounded-full bg-green-500"></div>
<span className="text-[10px] font-semibold text-green-600 dark:text-green-400">
<div className="p-2 border-t bg-muted/50">
<div className="flex items-center gap-1.5">
<div className="w-1.5 h-1.5 rounded-full bg-green-500"></div>
<span className="text-[9px] font-semibold text-green-600 dark:text-green-400">
Heures optimales (8h, 12h-13h, 18h-20h)
</span>
</div>
<p className="text-[9px] text-muted-foreground">
Ces créneaux maximisent l'engagement
</p>
</div>
</PopoverContent>
</Popover>