diff --git a/CHANGELOG.md b/CHANGELOG.md index 2e71b07..ce775d2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -61,6 +61,23 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - **After**: 17 module overrides (added mod_menu "Main Menu") - **Component overrides**: Still 7 (unchanged) +### Removed - Documentation Cleanup + +**Documentation policy**: Removed all markdown files from `src/templates/html/` directory. All documentation belongs in `docs/` folder only. + +#### Files Removed (9 markdown files) +- `src/templates/html/STANDARD_MODULES_README.md` +- `src/templates/html/INDUSTRY_MODULES_README.md` +- `src/templates/html/VIRTUEMART_MODULES_README.md` +- `src/templates/html/mod_virtuemart_cart/README.md` +- `src/templates/html/mod_virtuemart_category/README.md` +- `src/templates/html/mod_virtuemart_currencies/README.md` +- `src/templates/html/mod_virtuemart_manufacturer/README.md` +- `src/templates/html/mod_virtuemart_product/README.md` +- `src/templates/html/mod_search/README.md` + +**Note**: All module override documentation is consolidated in `docs/MODULE_OVERRIDES.md`. The `src/templates/html/` directory now contains only PHP override files and `index.html` security files. + **Note**: Unlike the previously removed mod_menu override (v03.08.01), this new "Main Menu" override is properly structured based on Joomla core layouts and Bootstrap 5, ensuring language strings load correctly and menu functionality works as expected. ## [03.08.02] - 2026-02-27 diff --git a/src/templates/html/INDUSTRY_MODULES_README.md b/src/templates/html/INDUSTRY_MODULES_README.md deleted file mode 100644 index fcb8452..0000000 --- a/src/templates/html/INDUSTRY_MODULES_README.md +++ /dev/null @@ -1,306 +0,0 @@ -# Industry Extension Module Mobile Responsive Overrides - -## Overview -This directory contains mobile-responsive overrides for popular industry Joomla extensions, designed specifically for the MokoCassiopeia template. - -## Industry Extension Modules - -### 1. mod_k2_content (K2) -K2 content display module featuring: -- Responsive article/content cards -- Optional images with hover effects -- Metadata display (author, date, category, hits) -- Introtext support -- Read more links -- Custom link support -- Touch-friendly interactions - -### 2. mod_acymailing (AcyMailing) -AcyMailing newsletter subscription module with: -- Mobile-responsive form inputs -- Touch-friendly form controls (48px on mobile) -- 16px input font (prevents iOS zoom) -- Intro and outro text support -- Custom form styling that overrides inline styles -- Accessible form structure - -### 3. mod_hikashop_cart (HikaShop) -HikaShop shopping cart module offering: -- Product list with images -- Cart summary with item count and total -- Touch-friendly remove buttons -- Mobile-optimized cart display -- Flexible action buttons layout -- Empty cart state - -### 4. mod_kunenalatest (Kunena Forum) -Kunena latest posts module with: -- User avatars -- Post metadata (author, date, category, hits, replies) -- Post excerpts -- Forum navigation links -- Responsive card layouts -- Touch-friendly post links - -### 5. mod_kunenalogin (Kunena Forum) -Kunena login module featuring: -- Login and logout states -- User profile with avatar -- Post count and karma display -- Profile and private messages links -- Touch-friendly form controls -- Password recovery links - -### 6. mod_kunenasearch (Kunena Forum) -Kunena forum search module with: -- Configurable button positions (top/right/bottom/left) -- Touch-friendly search input (48px on mobile) -- 16px input font (prevents iOS zoom) -- Icon-only or text button options -- Accessible search form - -### 7. mod_kunenastats (Kunena Forum) -Kunena statistics module offering: -- Member count with icon -- Latest member display -- Message and topic counts -- Today/yesterday topic counts -- Responsive grid layout (1-3 columns) -- Visual stat cards with icons - -### 8. mod_osmembership (OS Membership Pro) -Membership Pro plans module with: -- Responsive pricing cards -- Plan images and descriptions -- Feature lists with checkmarks -- Pricing display with periods -- Free plan highlighting -- Touch-friendly subscribe buttons -- Grid layout (1-3 columns) - -## Component Overrides - -### com_kunena (Kunena Forum) -- Category list view with responsive cards -- Mobile-optimized forum navigation -- Touch-friendly category links - -### com_osmembership (OS Membership Pro) -- Plans list with pricing table layout -- Featured plan highlighting -- Responsive grid (1-4 columns) -- Touch-friendly subscription buttons - -## Mobile Responsive Features - -### Touch Target Sizes (WCAG 2.1 Compliant) -- **Mobile (< 576px):** 48px minimum height -- **Desktop (≥ 768px):** 44px minimum height - -### Font Sizes (iOS Zoom Prevention) -- **Mobile:** 16px base font for inputs (prevents auto-zoom) -- **Desktop:** 1rem (16px typically) - -### Responsive Breakpoints -Using Bootstrap-aligned breakpoints: -- `< 576px` - Mobile (xs) -- `576px - 767px` - Tablet (sm-md) -- `768px+` - Desktop (md+) - -### Layout Adaptations - -#### Mobile (< 576px) -- Stacked content layouts -- Full-width images -- Vertical metadata lists -- Larger touch targets (48px) -- Stacked action buttons - -#### Desktop (≥ 768px) -- Horizontal layouts where appropriate -- Side-by-side image and content -- Inline metadata -- Enhanced hover effects -- Horizontal button groups - -## CSS Architecture - -### BEM Naming Convention -All modules use Block-Element-Modifier naming: - -```css -.mod-k2-content /* Block */ -.mod-k2-content__title /* Element */ -.mod-k2-content__item--featured /* Modifier */ -``` - -### CSS Variables Integration -Styles integrate with template's color system: - -```css ---body-color ---link-color ---color-primary ---secondary-bg ---border-color ---border-radius ---gray-600 ---success ---danger -``` - -## Accessibility Features - -All modules include: -- ✅ Semantic HTML5 elements -- ✅ ARIA labels and landmarks -- ✅ Proper heading hierarchy -- ✅ Keyboard navigation support -- ✅ Screen reader friendly -- ✅ Focus indicators -- ✅ Touch-optimized controls -- ✅ Alternative text for images - -## Browser Compatibility - -- ✅ Modern browsers (Chrome, Firefox, Safari, Edge) -- ✅ iOS Safari (no zoom on input focus) -- ✅ Android browsers -- ✅ Touch and mouse input -- ✅ All screen sizes (320px+) -- ✅ Portrait and landscape orientations - -## File Structure - -``` -src/templates/html/ -├── mod_k2_content/ -│ ├── default.php -│ └── index.html -├── mod_acymailing/ -│ ├── default.php -│ └── index.html -├── mod_hikashop_cart/ -│ ├── default.php -│ └── index.html -└── mod_kunenalatest/ - ├── default.php - └── index.html -``` - -## Usage - -These overrides are automatically used when: -1. The MokoCassiopeia template is active -2. The respective extensions are installed -3. The modules are published - -No additional configuration required beyond standard module settings. - -## Extension Parameters - -All standard extension module parameters are fully supported. Each override respects the module's configuration options. - -## Customization - -### Override CSS Variables -```css -:root { - --border-radius: 0.5rem; - --color-primary: #your-color; -} -``` - -### Add Custom Styles -```css -.mod-k2-content-responsive { - max-width: 800px; - margin: 0 auto; -} -``` - -### Modify Templates -Each PHP file can be modified to adjust HTML structure while maintaining mobile responsiveness. - -## Security - -- ✅ index.html security files in all directories -- ✅ Proper input escaping with `htmlspecialchars()` -- ✅ XSS prevention -- ✅ Joomla security best practices (`_JEXEC` check) -- ✅ No SQL injection vectors - -## Extension Compatibility - -### K2 -- Compatible with K2 2.x and 3.x -- Supports all K2 module parameters -- Image handling for various sizes -- BBCode/HTML content support - -### AcyMailing -- Compatible with AcyMailing 6.x+ -- Form styling overrides inline styles -- Supports custom form layouts -- Newsletter list integration - -### HikaShop -- Compatible with HikaShop 4.x and 5.x -- Product image display -- Price formatting support -- Tax calculations -- Cart operations via AJAX - -### Kunena -- Compatible with Kunena 5.x and 6.x -- Avatar integration -- BBCode parsing -- Forum routing support -- User profile links - -## Testing Checklist - -### General Testing -- [ ] Test on mobile device (< 576px) -- [ ] Test on tablet (576px - 767px) -- [ ] Test on desktop (≥ 768px) -- [ ] Verify touch targets are adequate -- [ ] Test with screen reader -- [ ] Check keyboard navigation -- [ ] Verify ARIA labels - -### Extension-Specific Testing -- [ ] K2: Test with/without images, various metadata options -- [ ] AcyMailing: Test form submission, validation -- [ ] HikaShop: Test add/remove items, cart update -- [ ] Kunena: Test avatar display, post links, forum navigation - -## Documentation - -Each module follows the same pattern established by: -- mod_search override -- VirtueMart module overrides -- Standard Joomla module overrides -- Mobile-first responsive design -- BEM naming convention - -## Related Documentation - -- `STANDARD_MODULES_README.md` - Standard Joomla module overrides -- `VIRTUEMART_MODULES_README.md` - VirtueMart module overrides -- `docs/CSS_VARIABLES.md` - Complete CSS variables reference -- `docs/ROADMAP.md` - Template development roadmap - -## License - -Copyright (C) 2025 Moko Consulting -Licensed under GNU General Public License version 2 or later - -## Support - -For issues or questions: -- Review extension-specific documentation -- Check CSS variables documentation -- Consult extension and Joomla documentation -- Verify module configuration in Joomla admin -- Check extension compatibility versions diff --git a/src/templates/html/STANDARD_MODULES_README.md b/src/templates/html/STANDARD_MODULES_README.md deleted file mode 100644 index 72be44b..0000000 --- a/src/templates/html/STANDARD_MODULES_README.md +++ /dev/null @@ -1,213 +0,0 @@ -# Standard Joomla & Community Builder Module Mobile Responsive Overrides - -## Overview -This directory contains mobile-responsive overrides for Community Builder modules, designed specifically for the MokoCassiopeia template. - -**Important**: Following Cassiopeia template best practices, standard Joomla core modules (mod_breadcrumbs, mod_login, mod_articles_latest, mod_menu) are NOT overridden. These use Joomla's default layouts to ensure proper language loading and compatibility. Apply custom styling via CSS. - -## Community Builder Modules - -### 1. mod_cblogin -Community Builder login module with: -- Avatar display in logged-in state -- Profile link button -- Touch-friendly form controls -- Remember me checkbox -- Password/username recovery links -- Registration link -- Pre/post text support - -### 2. mod_comprofilerOnline -Community Builder online users module featuring: -- Online user count display -- Members vs. guests breakdown -- User list with avatars -- Profile links -- Online status indicators -- Responsive card layouts - -## Mobile Responsive Features - -### Touch Target Sizes (WCAG 2.1 Compliant) -- **Mobile (< 576px):** 48px minimum height -- **Desktop (≥ 768px):** 44px minimum height - -### Font Sizes (iOS Zoom Prevention) -- **Mobile:** 16px base font for inputs (prevents auto-zoom) -- **Desktop:** 1rem (16px typically) - -### Responsive Breakpoints -Using Bootstrap-aligned breakpoints: -- `< 576px` - Mobile (xs) -- `576px - 767px` - Tablet (sm-md) -- `768px+` - Desktop (md+) - -### Layout Adaptations - -#### Mobile (< 576px) -- Stacked form layouts -- Full-width buttons -- Larger touch targets (48px) -- 16px input font size -- Vertical link lists - -#### Tablet & Desktop (≥ 768px) -- Inline button layouts where appropriate -- Horizontal action groups -- Enhanced hover effects -- Optimized spacing - -## CSS Architecture - -### BEM Naming Convention -All modules use Block-Element-Modifier naming: - -```css -.mod-login /* Block */ -.mod-login__input /* Element */ -.mod-login__btn--submit /* Modifier */ -``` - -### CSS Variables Integration -Styles integrate with template's color system: - -```css ---body-color ---link-color ---link-hover-color ---color-primary ---secondary-bg ---border-color ---border-radius ---gray-600 ---success -``` - -## Accessibility Features - -All modules include: -- ✅ Semantic HTML5 elements -- ✅ ARIA labels and landmarks -- ✅ Proper form labeling -- ✅ Keyboard navigation support -- ✅ Screen reader friendly -- ✅ Focus indicators -- ✅ Touch-optimized controls -- ✅ Schema.org structured data (where applicable) - -## Browser Compatibility - -- ✅ Modern browsers (Chrome, Firefox, Safari, Edge) -- ✅ iOS Safari (no zoom on input focus) -- ✅ Android browsers -- ✅ Touch and mouse input -- ✅ All screen sizes (320px+) -- ✅ Portrait and landscape orientations - -## File Structure - -``` -src/templates/html/ -├── mod_breadcrumbs/ -│ ├── default.php -│ └── index.html -├── mod_login/ -│ ├── default.php -│ └── index.html -├── mod_articles_latest/ -│ ├── default.php -│ └── index.html -├── mod_cblogin/ -│ ├── default.php -│ └── index.html -└── mod_comprofilerOnline/ - ├── default.php - └── index.html -``` - -## Usage - -These overrides are automatically used when: -1. The MokoCassiopeia template is active -2. The respective modules are published -3. No additional configuration required beyond standard module settings - -## Module Parameters - -All standard Joomla and Community Builder module parameters are fully supported. Each override respects the module's configuration options. - -## Customization - -### Override CSS Variables -```css -:root { - --border-radius: 0.5rem; - --color-primary: #your-color; -} -``` - -### Add Custom Styles -```css -.mod-login-responsive { - max-width: 400px; - margin: 0 auto; -} -``` - -### Modify Templates -Each PHP file can be modified to adjust HTML structure while maintaining mobile responsiveness. - -## Security - -- ✅ index.html security files in all directories -- ✅ Proper input escaping with `htmlspecialchars()` -- ✅ XSS prevention -- ✅ Joomla security best practices (`_JEXEC` check) -- ✅ Form token validation - -## Testing Checklist - -### General Testing -- [ ] Test on mobile device (< 576px) -- [ ] Test on tablet (576px - 767px) -- [ ] Test on desktop (≥ 768px) -- [ ] Verify touch targets are adequate -- [ ] Test with screen reader -- [ ] Check keyboard navigation -- [ ] Verify ARIA labels - -### Module-Specific Testing -- [ ] mod_breadcrumbs: Test breadcrumb trail on nested pages -- [ ] mod_breadcrumbs: Verify breadcrumb trail accuracy -- [ ] mod_login: Test login/logout flows, 2FA -- [ ] mod_articles_latest: Check various parameter combinations -- [ ] mod_cblogin: Test CB login/logout with avatar -- [ ] mod_comprofilerOnline: Verify user list display - -## Documentation - -Each module follows the same pattern established by: -- mod_search override -- VirtueMart module overrides -- Comprehensive documentation -- BEM naming convention -- Mobile-first responsive design - -## Related Documentation - -- `VIRTUEMART_MODULES_README.md` - VirtueMart module overrides -- `docs/CSS_VARIABLES.md` - Complete CSS variables reference -- `docs/ROADMAP.md` - Template development roadmap - -## License - -Copyright (C) 2025 Moko Consulting -Licensed under GNU General Public License version 2 or later - -## Support - -For issues or questions: -- Review module-specific parameters -- Check CSS variables documentation -- Consult Joomla and Community Builder documentation -- Verify module configuration in Joomla admin diff --git a/src/templates/html/VIRTUEMART_MODULES_README.md b/src/templates/html/VIRTUEMART_MODULES_README.md deleted file mode 100644 index 5dbf40b..0000000 --- a/src/templates/html/VIRTUEMART_MODULES_README.md +++ /dev/null @@ -1,228 +0,0 @@ -# VirtueMart Module Mobile Responsive Overrides - -## Overview -This directory contains mobile-responsive overrides for VirtueMart e-commerce modules, designed specifically for the MokoCassiopeia template. - -## Modules Included - -### 1. mod_virtuemart_cart -Shopping cart display module with: -- Responsive product list with images -- Touch-friendly remove buttons -- Mobile-optimized cart summary -- Flexible action buttons layout - -### 2. mod_virtuemart_product -Product display module featuring: -- Grid/list layout options -- Responsive product cards -- Mobile-optimized images -- Touch-friendly action buttons - -### 3. mod_virtuemart_currencies -Currency selector module with: -- Custom styled select dropdown -- Mobile-friendly touch targets -- Accessible form controls -- Icon indicators - -### 4. mod_virtuemart_category -Category navigation module offering: -- Hierarchical category display -- Optional product counts -- Image support for categories -- Active state highlighting - -### 5. mod_virtuemart_manufacturer -Manufacturer display module with: -- Grid and list display modes -- Logo/image display -- Responsive card layouts -- Hover effects - -## Mobile Responsive Features - -### Touch Targets -- **Mobile (< 576px):** 48px minimum height -- **Desktop (≥ 768px):** 44px minimum height -- WCAG 2.1 AA compliant - -### Font Sizes -- **Mobile:** 16px base (prevents iOS auto-zoom) -- **Desktop:** 1rem (16px typically) - -### Responsive Breakpoints -Using Bootstrap-aligned breakpoints: -- `< 576px` - Mobile (xs) -- `576px` - Small (sm) -- `768px` - Medium (md) -- `992px` - Large (lg) -- `1200px` - Extra Large (xl) -- `1400px` - Extra Extra Large (xxl) - -### Layout Adaptations - -#### Mobile (< 576px) -- Single column layouts -- Stacked action buttons -- Full-width elements -- Larger touch targets (48px) - -#### Tablet (576px - 767px) -- 2-column grids for products/manufacturers -- Inline action buttons where appropriate -- 44px touch targets - -#### Desktop (≥ 768px) -- 3-4 column grids -- Horizontal button layouts -- Optimized spacing -- Enhanced hover effects - -## CSS Architecture - -### CSS Variables Integration -All styles integrate with template's VirtueMart CSS variables: - -```css -/* Surfaces & Colors */ ---vm-surface ---vm-surface-2 ---vm-text ---vm-text-strong ---vm-text-muted ---vm-border ---vm-price-color - -/* Layout */ ---vm-block-radius ---vm-block-shadow ---vm-section-gap - -/* Buttons */ ---vm-btn-primary-bg ---vm-btn-primary-text ---vm-btn-secondary-bg ---vm-btn-secondary-text -``` - -### BEM Naming Convention -All modules use Block-Element-Modifier naming: - -```css -.mod-vm-cart /* Block */ -.mod-vm-cart__header /* Element */ -.mod-vm-cart__item--active /* Modifier */ -``` - -## Accessibility Features - -All modules include: -- ✅ ARIA labels on interactive elements -- ✅ Semantic HTML5 structure -- ✅ Proper heading hierarchy -- ✅ Keyboard navigation support -- ✅ Screen reader friendly -- ✅ Focus indicators -- ✅ Touch-optimized controls - -## Browser Compatibility - -- ✅ Modern browsers with flexbox/grid support -- ✅ iOS Safari (no auto-zoom issues) -- ✅ Android browsers -- ✅ Chrome, Firefox, Safari, Edge -- ✅ Responsive on all device sizes -- ✅ Touch and mouse input - -## File Structure - -``` -src/templates/html/ -├── mod_virtuemart_cart/ -│ ├── default.php -│ ├── index.html -│ └── README.md -├── mod_virtuemart_product/ -│ ├── default.php -│ ├── index.html -│ └── README.md -├── mod_virtuemart_currencies/ -│ ├── default.php -│ ├── index.html -│ └── README.md -├── mod_virtuemart_category/ -│ ├── default.php -│ ├── index.html -│ └── README.md -└── mod_virtuemart_manufacturer/ - ├── default.php - ├── index.html - └── README.md -``` - -## Usage - -These overrides are automatically used when: -1. The MokoCassiopeia template is active -2. VirtueMart is installed and configured -3. The respective modules are published - -No additional configuration is required beyond standard VirtueMart module settings. - -## Customization - -To customize the appearance, you can: - -1. **Override CSS variables** in `user.css`: -```css -:root { - --vm-btn-primary-bg: #your-color; - --vm-block-radius: 0.5rem; -} -``` - -2. **Add custom styles** targeting module classes: -```css -.mod-vm-cart-responsive { - max-width: 400px; -} -``` - -3. **Modify PHP templates** in the respective module directories - -## Testing - -All overrides have been designed to work across: -- Mobile devices (320px+) -- Tablets (768px+) -- Desktop screens (1200px+) -- Touch and click interactions -- Portrait and landscape orientations - -## Security - -- ✅ index.html security files included -- ✅ Proper input escaping in PHP -- ✅ XSS prevention -- ✅ Follows Joomla security best practices - -## Documentation - -Each module directory contains a detailed README.md with: -- Module-specific features -- Configuration options -- Customization examples -- Usage guidelines - -## License - -Copyright (C) 2025 Moko Consulting -Licensed under GNU General Public License version 2 or later - -## Support - -For issues or questions: -- Check individual module README files -- Review CSS_VARIABLES.md for available CSS variables -- Consult VirtueMart and Joomla documentation diff --git a/src/templates/html/mod_search/README.md b/src/templates/html/mod_search/README.md deleted file mode 100644 index fa44f24..0000000 --- a/src/templates/html/mod_search/README.md +++ /dev/null @@ -1,126 +0,0 @@ -# mod_search Mobile Responsive Override - -## Overview -This directory contains a mobile-responsive override for Joomla's `mod_search` module, designed specifically for the MokoCassiopeia template. - -## Features - -### Mobile Responsiveness -- **Flexible Layout**: Adapts to different screen sizes automatically -- **Touch-Friendly**: Minimum 44px touch targets (48px on mobile) -- **Readable Text**: 16px font size on mobile to prevent auto-zoom on iOS -- **Proper Spacing**: Adequate padding and gaps for easy interaction - -### Responsive Breakpoints -- **Mobile (< 576px)**: Stacked layout, full-width buttons, larger touch targets -- **Tablet (576px - 767px)**: Inline search field and button -- **Desktop (≥ 768px)**: Optimized horizontal layout - -### Button Position Support -The override supports all standard mod_search button positions: -- **Left**: Search button appears to the left of input field -- **Right**: Search button appears to the right of input field (default) -- **Top**: Search button appears above input field -- **Bottom**: Search button appears below input field - -### Icon Button Support -Supports both text and icon-only search buttons: -- Text buttons display customizable button text -- Icon buttons show search icon (icon-search) - -## Files - -### default.php -The main template override file that renders the search module with responsive HTML structure. - -**Key Classes:** -- `.mod-search-responsive`: Main wrapper class -- `.mod-search__form`: Form container with flex layout -- `.mod-search__input-wrapper`: Input field wrapper -- `.mod-search__input`: Search input field -- `.mod-search__button`: Search button -- `.mod-search__button--icon`: Icon-only button variant - -## CSS Styling - -The mobile-responsive styles are defined in `/src/media/css/template.css` under the section: -``` -/* ===== MOD_SEARCH MOBILE RESPONSIVE STYLES ===== */ -``` - -### Key CSS Features: -1. **Flexbox Layout**: Uses modern flexbox for flexible, responsive layouts -2. **CSS Variables**: Integrates with template's color scheme system -3. **Mobile-First**: Base styles target mobile, with progressive enhancement -4. **Accessible**: Proper focus states and ARIA labels -5. **Touch-Optimized**: Appropriate sizing for touch interaction - -## Usage - -This override is automatically used when: -1. The MokoCassiopeia template is active -2. A mod_search module is published on the site - -No additional configuration is required beyond standard mod_search module settings. - -## Module Parameters - -All standard mod_search parameters are supported: -- **Width**: Input field width (in characters) - note: overridden by responsive CSS -- **Button Text**: Custom text for the search button -- **Button Position**: left, right, top, or bottom -- **Image Button**: Use icon instead of text button -- **Max Length**: Maximum search query length -- **Menu Item**: Target search results page - -## Accessibility Features - -- Hidden label for screen readers -- ARIA labels on input and button -- Proper focus indicators -- Semantic HTML structure -- Keyboard navigation support - -## Browser Support - -- Modern browsers with flexbox support -- Responsive on all device sizes -- Works with iOS Safari (no auto-zoom on input focus) -- Compatible with touch and mouse input - -## Customization - -To customize the appearance, you can: -1. Override CSS variables in `user.css` -2. Modify classes in `default.php` -3. Add custom styles targeting `.mod-search-responsive` - -Example custom CSS: -```css -.mod-search-responsive { - max-width: 600px; - margin: 0 auto; -} - -.mod-search__input { - border-radius: 25px; -} - -.mod-search__button { - border-radius: 25px; -} -``` - -## Testing - -The override has been designed to work across: -- Mobile devices (320px+) -- Tablets (768px+) -- Desktop screens (1200px+) -- Touch and click interactions -- Portrait and landscape orientations - -## License - -Copyright (C) 2025 Moko Consulting -Licensed under GNU General Public License version 2 or later diff --git a/src/templates/html/mod_virtuemart_cart/README.md b/src/templates/html/mod_virtuemart_cart/README.md deleted file mode 100644 index 5d49ef2..0000000 --- a/src/templates/html/mod_virtuemart_cart/README.md +++ /dev/null @@ -1,205 +0,0 @@ -# mod_virtuemart_cart Mobile Responsive Override - -## Overview -Mobile-responsive override for VirtueMart's shopping cart module (`mod_virtuemart_cart`), designed for the MokoCassiopeia template. - -## Features - -### Cart Display -- **Cart Summary Header**: Shows item count and total price -- **Product List**: Displays cart items with images, names, quantities, and prices -- **Remove Buttons**: Touch-friendly delete buttons for each item -- **Action Buttons**: View cart and checkout buttons -- **Empty State**: Friendly message when cart is empty - -### Mobile Responsiveness -- **Touch Targets**: 48px on mobile, 44px on desktop (WCAG compliant) -- **Flexible Layout**: Adapts to different screen sizes -- **Stacked Layout**: Products stack vertically on mobile -- **Full-Width Actions**: Buttons expand to full width on small screens - -### Responsive Breakpoints - -#### Mobile (< 576px) -- Vertical product layout -- Full-width product images (max 200px centered) -- Stacked action buttons -- 48px minimum touch targets -- Increased padding for comfortable touch - -#### Tablet (576px - 767px) -- Side-by-side product details -- Inline action buttons begin to appear -- 44px touch targets - -#### Desktop (≥ 768px) -- Horizontal action button layout -- Optimized spacing and alignment -- Enhanced hover effects - -## Module Parameters - -All standard mod_virtuemart_cart parameters are supported: - -- **show_price**: Display product prices (default: Yes) -- **show_product_list**: Display list of products in cart (default: Yes) -- **moduleclass_sfx**: Custom CSS class suffix - -## HTML Structure - -``` -.mod-vm-cart-responsive - ├── .mod-vm-cart__header (if items in cart) - │ ├── .mod-vm-cart__icon - │ └── .mod-vm-cart__summary - │ ├── .mod-vm-cart__count - │ └── .mod-vm-cart__total - ├── .mod-vm-cart__products (if show_product_list) - │ └── .mod-vm-cart__product (foreach product) - │ ├── .mod-vm-cart__product-image - │ ├── .mod-vm-cart__product-details - │ │ ├── .mod-vm-cart__product-name - │ │ ├── .mod-vm-cart__product-quantity - │ │ └── .mod-vm-cart__product-price - │ └── .mod-vm-cart__product-remove - └── .mod-vm-cart__actions - ├── .mod-vm-cart__btn--view - └── .mod-vm-cart__btn--checkout -``` - -## CSS Classes - -### Main Container -- `.mod-vm-cart-responsive` - Main wrapper with responsive styles - -### Header Section -- `.mod-vm-cart__header` - Cart summary container -- `.mod-vm-cart__icon` - Shopping basket icon -- `.mod-vm-cart__summary` - Summary information wrapper -- `.mod-vm-cart__count` - Number of items -- `.mod-vm-cart__total` - Total price display - -### Product List -- `.mod-vm-cart__products` - Products container -- `.mod-vm-cart__product` - Individual product card -- `.mod-vm-cart__product-image` - Product image container -- `.mod-vm-cart__product-details` - Product information -- `.mod-vm-cart__product-name` - Product title -- `.mod-vm-cart__product-quantity` - Quantity display -- `.mod-vm-cart__product-price` - Price display -- `.mod-vm-cart__product-remove` - Remove button container -- `.mod-vm-cart__remove-btn` - Delete button - -### Actions -- `.mod-vm-cart__actions` - Action buttons container -- `.mod-vm-cart__btn` - Base button class -- `.mod-vm-cart__btn--view` - View cart button -- `.mod-vm-cart__btn--checkout` - Checkout button - -### Empty State -- `.mod-vm-cart__empty` - Empty cart container -- `.mod-vm-cart__empty-icon` - Empty state icon -- `.mod-vm-cart__empty-text` - Empty state message - -## CSS Variables Used - -```css ---vm-surface /* Background colors */ ---vm-surface-2 /* Alternative background */ ---vm-text /* Main text color */ ---vm-text-strong /* Strong emphasis text */ ---vm-text-muted /* Muted/secondary text */ ---vm-border /* Border colors */ ---vm-price-color /* Price display color */ ---vm-block-radius /* Border radius */ ---vm-block-shadow /* Box shadow */ ---vm-btn-primary-bg /* Primary button background */ ---vm-btn-primary-text /* Primary button text */ ---vm-btn-padding-y /* Button vertical padding */ ---vm-btn-padding-x /* Button horizontal padding */ ---vm-btn-radius /* Button border radius */ ---danger /* Delete button color */ -``` - -## Accessibility Features - -- ✅ ARIA label on remove buttons with product name -- ✅ Proper semantic HTML structure -- ✅ Icon elements marked with `aria-hidden="true"` -- ✅ Keyboard navigation support -- ✅ Focus indicators on interactive elements -- ✅ Touch-friendly target sizes -- ✅ Color contrast compliance - -## Customization Examples - -### Adjust Cart Width -```css -.mod-vm-cart-responsive { - max-width: 400px; - margin: 0 auto; -} -``` - -### Customize Product Card Spacing -```css -.mod-vm-cart__products { - gap: 1.5rem; -} -``` - -### Change Button Layout -```css -@media (min-width: 768px) { - .mod-vm-cart__actions { - flex-direction: column; - gap: 1rem; - } -} -``` - -### Style Empty State -```css -.mod-vm-cart__empty { - padding: 3rem 1.5rem; - background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); -} -``` - -## Integration with VirtueMart - -This override works seamlessly with: -- VirtueMart 3.x and 4.x -- Standard VirtueMart cart functionality -- AJAX cart updates (if configured) -- Multiple currency support -- Tax calculations - -## Browser Compatibility - -- ✅ Modern browsers (Chrome, Firefox, Safari, Edge) -- ✅ iOS Safari (no zoom on input/button touch) -- ✅ Android Chrome -- ✅ Touch and mouse input -- ✅ All screen sizes from 320px+ - -## Testing Checklist - -- [ ] Add products to cart -- [ ] Verify item count updates -- [ ] Test remove button functionality -- [ ] Check price calculations -- [ ] Verify cart view link works -- [ ] Test checkout button redirect -- [ ] Check empty cart state -- [ ] Test on mobile device (< 576px) -- [ ] Test on tablet (576px - 767px) -- [ ] Test on desktop (≥ 768px) -- [ ] Verify touch targets are adequate -- [ ] Test with screen reader -- [ ] Check keyboard navigation - -## License - -Copyright (C) 2025 Moko Consulting -Licensed under GNU General Public License version 2 or later diff --git a/src/templates/html/mod_virtuemart_category/README.md b/src/templates/html/mod_virtuemart_category/README.md deleted file mode 100644 index 04682eb..0000000 --- a/src/templates/html/mod_virtuemart_category/README.md +++ /dev/null @@ -1,57 +0,0 @@ -# mod_virtuemart_category Mobile Responsive Override - -## Overview -Mobile-responsive category navigation with hierarchical structure, optional images, product counts, and active state highlighting. - -## Key Features -- Hierarchical category/subcategory display -- Optional category images (40x40px) -- Product count badges -- Active page highlighting -- Touch-friendly links (48px mobile, 44px desktop) -- Collapsible subcategory lists - -## Responsive Features -- Full-width category links on mobile -- Indented subcategory lists -- Active state styling -- Hover effects - -## Module Parameters Supported -- `show_images` - Display category images -- `show_description` - Show category descriptions -- `show_product_count` - Display product counts -- `moduleclass_sfx` - Custom CSS suffix - -## CSS Classes -- `.mod-vm-category-responsive` - Main container -- `.mod-vm-category__nav` - Navigation element -- `.mod-vm-category__list` - Main category list -- `.mod-vm-category__item` - Category item -- `.mod-vm-category__link` - Category link -- `.mod-vm-category__link--active` - Active category -- `.mod-vm-category__sublist` - Subcategory list -- `.mod-vm-category__sublink` - Subcategory link - -## Customization Example -```css -.mod-vm-category__link { - border-radius: 10px; - padding: 1rem; -} - -.mod-vm-category__image { - width: 50px; - height: 50px; -} -``` - -## Accessibility -- Semantic navigation element -- `aria-current="page"` on active items -- ARIA labels for navigation -- Keyboard navigation support - -## License -Copyright (C) 2025 Moko Consulting -GNU General Public License version 2 or later diff --git a/src/templates/html/mod_virtuemart_currencies/README.md b/src/templates/html/mod_virtuemart_currencies/README.md deleted file mode 100644 index 00f8ef4..0000000 --- a/src/templates/html/mod_virtuemart_currencies/README.md +++ /dev/null @@ -1,50 +0,0 @@ -# mod_virtuemart_currencies Mobile Responsive Override - -## Overview -Mobile-responsive currency selector with custom-styled dropdown, touch-friendly controls, and automatic form submission on change. - -## Key Features -- Custom styled select dropdown with icon -- 16px font size on mobile (prevents iOS zoom) -- Auto-submit on currency change (JavaScript) -- Fallback submit button for no-JS users -- Full keyboard accessibility - -## Responsive Features - -| Screen Size | Input Height | Font Size | -|------------|--------------|-----------| -| Mobile (< 576px) | 48px | 16px | -| Desktop (≥ 768px) | 44px | 1rem | - -## Module Parameters Supported -- `text_before` - Text displayed before selector -- `text_after` - Text displayed after selector -- `moduleclass_sfx` - Custom CSS suffix - -## CSS Classes -- `.mod-vm-currencies-responsive` - Main container -- `.mod-vm-currencies__form` - Form element -- `.mod-vm-currencies__label` - Label text -- `.mod-vm-currencies__select-wrapper` - Select container -- `.mod-vm-currencies__select` - Dropdown element -- `.mod-vm-currencies__icon` - Chevron icon -- `.mod-vm-currencies__submit` - Submit button (no-JS) - -## Customization Example -```css -.mod-vm-currencies__select { - border-radius: 25px; - padding: 0.75rem 3rem 0.75rem 1.5rem; -} -``` - -## Accessibility -- Proper label association -- ARIA labels for screen readers -- Keyboard navigation support -- Focus indicators - -## License -Copyright (C) 2025 Moko Consulting -GNU General Public License version 2 or later diff --git a/src/templates/html/mod_virtuemart_manufacturer/README.md b/src/templates/html/mod_virtuemart_manufacturer/README.md deleted file mode 100644 index 045860f..0000000 --- a/src/templates/html/mod_virtuemart_manufacturer/README.md +++ /dev/null @@ -1,59 +0,0 @@ -# mod_virtuemart_manufacturer Mobile Responsive Override - -## Overview -Mobile-responsive manufacturer display with grid/list layouts, logo images, and responsive card designs. - -## Key Features -- Grid or list display modes -- Responsive manufacturer cards -- Logo/image display with aspect ratio control -- Manufacturer descriptions -- Hover effects and transitions - -## Responsive Layouts - -| Screen Size | Grid Mode | List Mode | -|------------|-----------|-----------| -| Mobile (< 576px) | 1 column | 1 column | -| Tablet (576px - 767px) | 2 columns | 1 column | -| Desktop (768px - 991px) | 3 columns | 1 column | -| Large Desktop (≥ 992px) | 4 columns | 1 column | - -## Module Parameters Supported -- `show_images` - Display manufacturer logos -- `display_style` - Layout mode (list/grid) -- `moduleclass_sfx` - Custom CSS suffix - -## CSS Classes -- `.mod-vm-manufacturer-responsive` - Main container -- `.mod-vm-manufacturer__container` - Grid/list container -- `.mod-vm-manufacturer__container--list` - List layout -- `.mod-vm-manufacturer__container--grid` - Grid layout -- `.mod-vm-manufacturer__item` - Manufacturer card -- `.mod-vm-manufacturer__link` - Clickable link -- `.mod-vm-manufacturer__image` - Logo container -- `.mod-vm-manufacturer__name` - Manufacturer name -- `.mod-vm-manufacturer__description` - Description text - -## Customization Example -```css -.mod-vm-manufacturer__image { - aspect-ratio: 1/1; - border-radius: 50%; -} - -.mod-vm-manufacturer__container--grid { - gap: 2rem; -} -``` - -## Accessibility -- Proper link structure -- Title attributes on links -- Semantic HTML -- Keyboard navigation -- Focus indicators - -## License -Copyright (C) 2025 Moko Consulting -GNU General Public License version 2 or later diff --git a/src/templates/html/mod_virtuemart_product/README.md b/src/templates/html/mod_virtuemart_product/README.md deleted file mode 100644 index b6ad18e..0000000 --- a/src/templates/html/mod_virtuemart_product/README.md +++ /dev/null @@ -1,50 +0,0 @@ -# mod_virtuemart_product Mobile Responsive Override - -## Overview -Mobile-responsive override for VirtueMart's product display module featuring grid/list layouts, responsive product cards, and touch-friendly controls. - -## Key Features -- Responsive grid layout (1-4 columns based on screen size) -- Product card with image, title, description, price -- Touch-friendly action buttons (48px mobile, 44px desktop) -- Availability badges -- Add to cart functionality - -## Responsive Layouts - -| Screen Size | Grid Columns | -|------------|--------------| -| Mobile (< 576px) | 1 column | -| Tablet (576px - 767px) | 2 columns | -| Desktop (768px - 991px) | 3 columns | -| Large Desktop (≥ 992px) | 4 columns | - -## Module Parameters Supported -- `headerText` - Header text above products -- `display_style` - Layout style (div, list) -- `moduleclass_sfx` - Custom CSS suffix - -## CSS Classes -- `.mod-vm-product-responsive` - Main container -- `.mod-vm-product__list` - Products grid -- `.mod-vm-product__item` - Product card -- `.mod-vm-product__image` - Product image -- `.mod-vm-product__title` - Product name -- `.mod-vm-product__description` - Short description -- `.mod-vm-product__price` - Price display -- `.mod-vm-product__actions` - Action buttons - -## Customization Example -```css -.mod-vm-product__list { - gap: 2rem; -} - -.mod-vm-product__item { - border-radius: 1rem; -} -``` - -## License -Copyright (C) 2025 Moko Consulting -GNU General Public License version 2 or later