Remove all markdown documentation files from html folder - docs belong in docs/ only
Co-authored-by: jmiller-moko <230051081+jmiller-moko@users.noreply.github.com>
This commit is contained in:
copilot-swe-agent[bot]
17
CHANGELOG.md
17
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
|
||||
|
||||
@@ -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 <hello@mokoconsulting.tech>
|
||||
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
|
||||
@@ -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 <hello@mokoconsulting.tech>
|
||||
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
|
||||
@@ -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 <hello@mokoconsulting.tech>
|
||||
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
|
||||
@@ -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 <hello@mokoconsulting.tech>
|
||||
Licensed under GNU General Public License version 2 or later
|
||||
@@ -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 <hello@mokoconsulting.tech>
|
||||
Licensed under GNU General Public License version 2 or later
|
||||
@@ -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
|
||||
@@ -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
|
||||
@@ -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
|
||||
@@ -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
|
||||
Reference in New Issue
Block a user