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>
- Added @Html.AntiForgeryToken() to Products delete form
- Added @Html.AntiForgeryToken() to Categories delete form
- Added @Html.AntiForgeryToken() to Users delete form
- Added @Html.AntiForgeryToken() to ShippingRates delete form
- Added @Html.AntiForgeryToken() to Product Variations delete form
This fixes the 400 Bad Request errors when trying to delete items
Features Added:
- Standard e-commerce properties (Price, Weight, shipping fields)
- Order management with Create/Edit views and shipping information
- ShippingRates system for weight-based shipping calculations
- Comprehensive test coverage with JWT authentication tests
- Sample data seeder with 5 orders demonstrating full workflow
- Photo upload functionality for products
- Multi-cryptocurrency payment support (BTC, XMR, USDT, etc.)
Database Changes:
- Added ShippingRates table
- Added shipping fields to Orders (Name, Address, City, PostCode, Country)
- Renamed properties to standard names (BasePrice to Price, ProductWeight to Weight)
- Added UpdatedAt timestamps to models
UI Improvements:
- Added Create/Edit views for Orders
- Added ShippingRates management UI
- Updated navigation menu with Shipping option
- Enhanced Order Details view with shipping information
Sample Data:
- 3 Categories (Electronics, Clothing, Books)
- 5 Products with various prices
- 5 Shipping rates (Royal Mail options)
- 5 Orders in different statuses (Pending to Delivered)
- 3 Crypto payments demonstrating payment flow
Security:
- All API endpoints secured with JWT authentication
- No public endpoints - client apps must authenticate
- Privacy-focused design with minimal data collection
Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>
