Adjust calendar display to position quick create button next to advertisements

Refactor CalendarGrid component to conditionally render and position the quick create button alongside advertisements within the calendar view, improving UI layout based on user feedback.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: fba33a9c-2c78-4001-992e-48eb46f716ef
Replit-Commit-Checkpoint-Type: full_checkpoint
This commit is contained in:
michaelschal committed 2025-09-04 14:03:51 +00:00
1 parent cac82ad602
commit abb720d797
2 files changed
+8 -6

No files matched your search

-1
View File
@@ -37,4 +37,3 @@ args = "npm run dev"
waitForPort = 5000 waitForPort = 5000
[agent] [agent]
integrations = ["javascript_database==1.0.0", "javascript_object_storage==1.0.0", "javascript_log_in_with_replit==1.0.0"]
+8 -5
View File
@@ -536,9 +536,12 @@ export default function CalendarGrid({
</div> </div>
</div> </div>
{/* Publicities et Quick Create Button ensemble */}
{isCurrentMonth && (
<div className="absolute top-2 right-2 flex flex-col items-end gap-1">
{/* Publicities avec design épuré */} {/* Publicities avec design épuré */}
{dayPublicities.length > 0 && ( {dayPublicities.length > 0 && (
<div className="absolute top-2 right-2 flex flex-col items-end gap-1"> <>
{dayPublicities.slice(0, 2).map((pub, idx) => ( {dayPublicities.slice(0, 2).map((pub, idx) => (
<div <div
key={`${pub.id}-${idx}`} key={`${pub.id}-${idx}`}
@@ -553,12 +556,11 @@ export default function CalendarGrid({
+{dayPublicities.length - 2} +{dayPublicities.length - 2}
</div> </div>
)} )}
</div> </>
)} )}
{/* Quick Create Button épuré */} {/* Quick Create Button à côté des publicités */}
{isCurrentMonth && ( <div className="opacity-0 group-hover:opacity-100 transition-all duration-200">
<div className={`absolute ${dayPublicities.length === 0 ? 'top-2 right-2' : 'bottom-2 right-2'} opacity-0 group-hover:opacity-100 transition-all duration-200`}>
<Button <Button
size="sm" size="sm"
className="w-6 h-6 bg-orange-300 text-orange-800 p-0 hover:bg-orange-400 shadow-md transform hover:scale-110 transition-all duration-150 border border-orange-500" className="w-6 h-6 bg-orange-300 text-orange-800 p-0 hover:bg-orange-400 shadow-md transform hover:scale-110 transition-all duration-150 border border-orange-500"
@@ -570,6 +572,7 @@ export default function CalendarGrid({
<Plus className="w-3 h-3" /> <Plus className="w-3 h-3" />
</Button> </Button>
</div> </div>
</div>
)} )}
</div> </div>
); );