mirror of
https://github.com/R0m1k3/LogiFlow.git
synced 2026-10-15 11:19:43 +02:00
Adapt layout and sidebar for responsive mobile experience
Introduce a `useResponsive` hook, implement mobile-first sidebar behavior with a toggleable menu, and adjust layout for various screen sizes, along with minor type and deposit value handling in `CustomerOrderForm`. Replit-Commit-Author: Agent Replit-Commit-Session-Id: cc8ba926-557c-4bf1-a2ea-ceabbcf38824 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/1957c339-2757-4d1f-8e92-e9f71a1ce58e/cc8ba926-557c-4bf1-a2ea-ceabbcf38824/f2TM8xQ
This commit is contained in:
1 parent
479577c4ff
commit
f1d6f27e3d
5 files changed
+241
-73
No files matched your search
@@ -125,6 +125,44 @@
|
||||
.hover\:bg-accent:hover {
|
||||
background-color: var(--accent);
|
||||
}
|
||||
|
||||
/* Responsive utilities */
|
||||
.container-responsive {
|
||||
@apply w-full mx-auto px-4 sm:px-6 lg:px-8;
|
||||
max-width: 1400px;
|
||||
}
|
||||
|
||||
.grid-responsive {
|
||||
@apply grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4;
|
||||
}
|
||||
|
||||
.card-responsive {
|
||||
@apply bg-card border border-border rounded-lg shadow-sm hover:shadow-md transition-shadow p-4 sm:p-6;
|
||||
}
|
||||
|
||||
.text-responsive-sm {
|
||||
@apply text-sm sm:text-base;
|
||||
}
|
||||
|
||||
.text-responsive-lg {
|
||||
@apply text-lg sm:text-xl lg:text-2xl;
|
||||
}
|
||||
|
||||
.sidebar-width {
|
||||
@apply w-16 lg:w-64;
|
||||
}
|
||||
|
||||
.sidebar-collapsed {
|
||||
@apply w-16;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
@apply flex-1 flex flex-col overflow-hidden ml-16 lg:ml-64;
|
||||
}
|
||||
|
||||
.main-content-expanded {
|
||||
@apply ml-16;
|
||||
}
|
||||
}
|
||||
|
||||
/* Supprimer le contour orange de la date du jour dans le calendrier */
|
||||
|
||||
Reference in new issue
Block a user