Implemented responsive mobile card layouts for all main Index views, providing superior mobile UX while maintaining desktop table views.
**Responsive Design Pattern:**
- Desktop (≥992px): Table layout with all data columns
- Mobile (<992px): Card-based layout optimized for touch interaction
- Breakpoint: Bootstrap's lg breakpoint for optimal viewing experience
**Views Converted:**
1. **Categories/Index.cshtml:**
- Mobile cards with name, description, product count, status
- Full-width action buttons for easy touch interaction
- Clear visual hierarchy with icons and badges
2. **Users/Index.cshtml:**
- Simplified mobile cards showing username, created date, status
- Conditional delete button (protected admin account)
- Clean, minimal design for quick user management
3. **ShippingRates/Index.cshtml:**
- 2x2 grid layout for shipping rate data (country, price, weight, delivery)
- Visual separation with light background boxes
- All critical information displayed in scannable format
4. **VariantCollections/Index.cshtml:**
- Properties JSON displayed in scrollable code block
- Created/Updated dates in compact format
- Clear deactivation action for variant collections
**Mobile UX Enhancements:**
- ✅ 44px minimum touch targets (Bootstrap .btn default)
- ✅ Full-width buttons with .d-grid gap-2 for easy tapping
- ✅ Proper spacing with mb-3 between cards
- ✅ Clear visual hierarchy with card-title and badges
- ✅ Descriptive button text (not just icons) on mobile
- ✅ Responsive icons and status indicators
- ✅ Word-break handling for long JSON strings
**Technical Implementation:**
- Used Bootstrap's d-none d-lg-block for desktop tables
- Used d-lg-none for mobile card views
- No JavaScript required - pure CSS responsive design
- Maintains all functionality from desktop view
- Zero data loss in mobile transformation
**Accessibility Maintained:**
- All ARIA labels preserved from Phase 1
- Semantic HTML structure in both views
- Proper heading hierarchy maintained
- Keyboard navigation fully functional
🚀 Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>
Implemented comprehensive accessibility enhancements to meet WCAG 2.1 AA standards:
**Skip Navigation:**
- Added skip-to-content link for keyboard users
- Link appears on focus and jumps directly to main content area
**Screen Reader Support:**
- Created .sr-only and .sr-only-focusable utility classes
- Added aria-hidden="true" to all decorative icons
- Added descriptive aria-label attributes to all icon-only buttons
**Enhanced Focus Indicators:**
- Implemented 3px visible outlines on all interactive elements
- Added :focus-visible for keyboard-only focus indicators
- Special focus styling for primary actions (orange outline)
- Consistent 2px outline-offset for better visibility
**Table Accessibility:**
- Added scope="col" attributes to all table headers
- Properly grouped button actions with role="group" and aria-label
**Button Improvements:**
- All icon-only buttons now have descriptive ARIA labels
- Added responsive text labels (visible on sm+ screens, hidden on mobile)
- Improved button groups with proper ARIA roles
**Files Modified:**
- _Layout.cshtml: Skip link, accessible menu close button
- Categories/Index.cshtml: ARIA labels, table scopes
- Users/Index.cshtml: ARIA labels, table scopes
- Orders/Index.cshtml: Table scopes
- Products/Index.cshtml: Table scopes
- ShippingRates/Index.cshtml: ARIA labels, table scopes
- VariantCollections/Index.cshtml: ARIA labels, table scopes
- modern-admin.css: Accessibility utilities and enhanced focus styles
**WCAG 2.1 AA Criteria Addressed:**
- 2.4.1 Bypass Blocks (Level A)
- 2.4.7 Focus Visible (Level AA)
- 4.1.2 Name, Role, Value (Level A)
- 1.3.1 Info and Relationships (Level A)
🚀 Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>
This commit introduces a comprehensive variant management system and enhances
the existing ProductVariant model with per-variant weight overrides and stock
tracking, integrated across Admin Panel and TeleBot.
Features Added:
- Variant Collections: Reusable variant templates (e.g., "Standard Sizes")
- Admin UI for managing variant collections (CRUD operations)
- Dynamic variant editor with JavaScript-based UI
- Per-variant weight and weight unit overrides
- Per-variant stock level tracking
- SalesLedger model for financial tracking
ProductVariant Enhancements:
- Added Weight (decimal, nullable) field for variant-specific weights
- Added WeightUnit (enum, nullable) field for variant-specific units
- Maintains backward compatibility with product-level weights
TeleBot Integration:
- Enhanced variant selection UI to display stock levels
- Shows weight information with proper unit conversion (µg, g, oz, lb, ml, L)
- Compact button format: "Medium (15 in stock, 350g)"
- Real-time stock availability display
Database Migrations:
- 20250928014850_AddVariantCollectionsAndSalesLedger
- 20250928155814_AddWeightToProductVariants
Technical Changes:
- Updated Product model to support VariantCollectionId and VariantsJson
- Extended ProductService with variant collection operations
- Enhanced OrderService to handle variant-specific pricing and weights
- Updated LittleShop.Client DTOs to match server models
- Added JavaScript dynamic variant form builder
Files Modified: 15
Files Added: 17
Lines Changed: ~2000
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
