complete story 9.9 with qa test
This commit is contained in:
Naser Mansour
@@ -434,3 +434,271 @@ button.btn-danger:disabled {
|
||||
direction: ltr;
|
||||
unicode-bidi: isolate;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Responsive Design System (Story 9.9)
|
||||
Breakpoints per PRD Section 7.4:
|
||||
- Mobile: < 576px (single column, stacked layouts)
|
||||
- Tablet: 576px - 991px (two columns where appropriate)
|
||||
- Desktop: 992px - 1199px (full layouts with sidebars)
|
||||
- Large Desktop: >= 1200px (max-width container: 1200px)
|
||||
========================================================================== */
|
||||
|
||||
/* Prevent horizontal page scroll at any viewport */
|
||||
html, body {
|
||||
@apply overflow-x-hidden;
|
||||
}
|
||||
|
||||
/* Ensure images/media don't overflow */
|
||||
img, video, iframe {
|
||||
@apply max-w-full h-auto;
|
||||
}
|
||||
|
||||
/* Touch-friendly targets - minimum 44px for interactive elements */
|
||||
.touch-target {
|
||||
@apply min-h-[44px] min-w-[44px];
|
||||
}
|
||||
|
||||
/* Dashboard grid - responsive column layout */
|
||||
.dashboard-grid {
|
||||
@apply grid gap-4;
|
||||
@apply grid-cols-1; /* Mobile: single column */
|
||||
@apply sm:grid-cols-2; /* Tablet: 2 columns */
|
||||
@apply lg:grid-cols-3; /* Desktop: 3 columns */
|
||||
@apply xl:grid-cols-4; /* Large: 4 columns */
|
||||
}
|
||||
|
||||
/* Stats grid - responsive layout for stat cards */
|
||||
.stats-grid {
|
||||
@apply grid gap-4;
|
||||
@apply grid-cols-1; /* Mobile: single column */
|
||||
@apply sm:grid-cols-2; /* Tablet: 2 columns */
|
||||
@apply lg:grid-cols-4; /* Desktop: 4 columns */
|
||||
}
|
||||
|
||||
/* Widget grid - responsive layout for dashboard widgets */
|
||||
.widget-grid {
|
||||
@apply grid gap-6;
|
||||
@apply grid-cols-1; /* Mobile: single column */
|
||||
@apply lg:grid-cols-3; /* Desktop: 3 columns */
|
||||
}
|
||||
|
||||
/* Responsive table wrapper - horizontal scroll for tables on mobile */
|
||||
.table-responsive {
|
||||
@apply overflow-x-auto -mx-4 px-4;
|
||||
@apply sm:mx-0 sm:px-0; /* Remove negative margin on larger screens */
|
||||
}
|
||||
|
||||
/* Table wrapper with shadow indicator for scrollable content */
|
||||
.table-scroll-wrapper {
|
||||
@apply relative overflow-x-auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
/* Form layout - responsive form field arrangement */
|
||||
.form-row {
|
||||
@apply flex flex-col gap-4;
|
||||
@apply sm:flex-row sm:items-end;
|
||||
}
|
||||
|
||||
/* Form actions - responsive button placement */
|
||||
.form-actions {
|
||||
@apply flex flex-col gap-3;
|
||||
@apply sm:flex-row sm:justify-end;
|
||||
}
|
||||
|
||||
/* Mobile-first button - full width on mobile, auto on larger screens */
|
||||
.btn-responsive {
|
||||
@apply w-full sm:w-auto;
|
||||
}
|
||||
|
||||
/* Card full-width on mobile */
|
||||
.card-responsive {
|
||||
@apply w-full;
|
||||
}
|
||||
|
||||
/* Collapsible content - for accordion sections on mobile */
|
||||
.collapsible-content {
|
||||
@apply transition-all duration-200 ease-in-out overflow-hidden;
|
||||
}
|
||||
|
||||
/* Modal responsive - full screen on mobile, centered on desktop */
|
||||
.modal-responsive {
|
||||
@apply fixed inset-0 sm:inset-auto sm:relative;
|
||||
@apply w-full sm:max-w-lg sm:mx-auto;
|
||||
@apply h-full sm:h-auto sm:max-h-[90vh];
|
||||
@apply rounded-none sm:rounded-lg;
|
||||
}
|
||||
|
||||
/* Charts container - responsive height */
|
||||
.chart-container {
|
||||
@apply h-64 sm:h-72 lg:h-80;
|
||||
@apply w-full;
|
||||
}
|
||||
|
||||
/* Header actions - stack on mobile, inline on larger screens */
|
||||
.header-actions {
|
||||
@apply flex flex-col gap-3 w-full;
|
||||
@apply sm:flex-row sm:w-auto sm:items-center;
|
||||
}
|
||||
|
||||
/* Page header - responsive layout */
|
||||
.page-header {
|
||||
@apply flex flex-col gap-4;
|
||||
@apply sm:flex-row sm:items-center sm:justify-between;
|
||||
}
|
||||
|
||||
/* Filter bar - responsive layout */
|
||||
.filter-bar {
|
||||
@apply flex flex-col gap-4;
|
||||
@apply sm:flex-row sm:items-end sm:flex-wrap;
|
||||
}
|
||||
|
||||
/* Content section - responsive padding */
|
||||
.section-responsive {
|
||||
@apply px-4 py-6;
|
||||
@apply sm:px-6 sm:py-8;
|
||||
@apply lg:px-8;
|
||||
}
|
||||
|
||||
/* RTL-aware responsive sidebar */
|
||||
@media (max-width: 991px) {
|
||||
.sidebar-responsive {
|
||||
@apply fixed inset-y-0 start-0 w-64;
|
||||
@apply transform -translate-x-full transition-transform duration-200;
|
||||
@apply z-40;
|
||||
}
|
||||
.sidebar-responsive.open {
|
||||
@apply translate-x-0;
|
||||
}
|
||||
/* RTL: sidebar comes from right */
|
||||
[dir="rtl"] .sidebar-responsive {
|
||||
@apply end-0 start-auto translate-x-full;
|
||||
}
|
||||
[dir="rtl"] .sidebar-responsive.open {
|
||||
@apply translate-x-0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Sidebar overlay for mobile */
|
||||
.sidebar-overlay {
|
||||
@apply fixed inset-0 bg-black/50 z-30;
|
||||
@apply transition-opacity duration-200;
|
||||
}
|
||||
|
||||
/* Calendar responsive - smaller cells on mobile */
|
||||
.calendar-grid {
|
||||
@apply grid grid-cols-7 gap-1;
|
||||
}
|
||||
|
||||
.calendar-cell {
|
||||
@apply h-10 sm:h-12;
|
||||
@apply text-sm sm:text-base;
|
||||
}
|
||||
|
||||
/* Time slot grid - responsive columns */
|
||||
.time-slots-grid {
|
||||
@apply grid gap-2;
|
||||
@apply grid-cols-2 sm:grid-cols-3 md:grid-cols-4;
|
||||
}
|
||||
|
||||
/* Time slot button - touch-friendly */
|
||||
.time-slot-btn {
|
||||
@apply p-3 min-h-[44px];
|
||||
@apply text-sm sm:text-base;
|
||||
}
|
||||
|
||||
/* Post/blog grid - responsive layout */
|
||||
.posts-grid {
|
||||
@apply grid gap-6;
|
||||
@apply grid-cols-1;
|
||||
@apply sm:grid-cols-2;
|
||||
@apply lg:grid-cols-3;
|
||||
}
|
||||
|
||||
/* Timeline/case view - responsive layout */
|
||||
.timeline-container {
|
||||
@apply relative;
|
||||
}
|
||||
|
||||
.timeline-line {
|
||||
@apply absolute top-0 bottom-0 w-0.5 bg-zinc-200 dark:bg-zinc-700;
|
||||
@apply start-4 sm:start-6;
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
@apply relative ps-10 sm:ps-14;
|
||||
@apply pb-6;
|
||||
}
|
||||
|
||||
.timeline-dot {
|
||||
@apply absolute start-2 sm:start-4;
|
||||
@apply w-4 h-4 sm:w-5 sm:h-5;
|
||||
@apply rounded-full bg-gold;
|
||||
@apply transform -translate-x-1/2;
|
||||
}
|
||||
|
||||
/* Empty state - responsive sizing */
|
||||
.empty-state {
|
||||
@apply py-8 sm:py-12;
|
||||
@apply text-center;
|
||||
}
|
||||
|
||||
.empty-state-icon {
|
||||
@apply w-12 h-12 sm:w-16 sm:h-16;
|
||||
@apply mx-auto mb-4;
|
||||
}
|
||||
|
||||
/* Pagination responsive */
|
||||
.pagination-responsive {
|
||||
@apply flex flex-wrap justify-center gap-1;
|
||||
@apply sm:gap-2;
|
||||
}
|
||||
|
||||
/* Hide on mobile / show on desktop utilities */
|
||||
.hide-mobile {
|
||||
@apply hidden sm:block;
|
||||
}
|
||||
|
||||
.show-mobile {
|
||||
@apply block sm:hidden;
|
||||
}
|
||||
|
||||
/* Stack on mobile, inline on desktop */
|
||||
.stack-mobile {
|
||||
@apply flex flex-col;
|
||||
@apply sm:flex-row sm:items-center;
|
||||
}
|
||||
|
||||
/* Gap utilities for responsive spacing */
|
||||
.gap-responsive {
|
||||
@apply gap-3 sm:gap-4 lg:gap-6;
|
||||
}
|
||||
|
||||
/* Text size responsive */
|
||||
.text-responsive-sm {
|
||||
@apply text-xs sm:text-sm;
|
||||
}
|
||||
|
||||
.text-responsive-base {
|
||||
@apply text-sm sm:text-base;
|
||||
}
|
||||
|
||||
.text-responsive-lg {
|
||||
@apply text-base sm:text-lg lg:text-xl;
|
||||
}
|
||||
|
||||
.text-responsive-xl {
|
||||
@apply text-lg sm:text-xl lg:text-2xl;
|
||||
}
|
||||
|
||||
/* Heading responsive sizes */
|
||||
.heading-responsive-page {
|
||||
@apply text-xl sm:text-2xl lg:text-3xl;
|
||||
@apply font-bold;
|
||||
}
|
||||
|
||||
.heading-responsive-section {
|
||||
@apply text-lg sm:text-xl;
|
||||
@apply font-semibold;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user