diff --git a/src/media/css/template.css b/src/media/css/template.css index d469074..96e6a8f 100644 --- a/src/media/css/template.css +++ b/src/media/css/template.css @@ -19945,3 +19945,481 @@ nav[data-toggle=toc] .nav-link.active+ul{ align-items: flex-start; } } + +/* ===== INDUSTRY EXTENSION MODULE STYLES ===== */ + +/* === mod_k2_content (K2) === */ +.mod-k2-content-responsive { + width: 100%; +} + +.mod-k2-content__list { + list-style: none; + padding: 0; + margin: 0; + display: flex; + flex-direction: column; + gap: 1.5rem; +} + +.mod-k2-content__item { + display: flex; + gap: 1rem; + padding-bottom: 1.5rem; + border-bottom: 1px solid var(--border-color); +} + +.mod-k2-content__item:last-child { + border-bottom: none; + padding-bottom: 0; +} + +.mod-k2-content__image { + flex-shrink: 0; + width: 120px; + overflow: hidden; + border-radius: var(--border-radius); +} + +.mod-k2-content__image img { + width: 100%; + height: auto; + display: block; + transition: transform 0.3s; +} + +.mod-k2-content__image:hover img { + transform: scale(1.05); +} + +.mod-k2-content__content { + flex: 1; + min-width: 0; +} + +.mod-k2-content__title { + margin: 0 0 0.75rem 0; + font-weight: 600; + line-height: 1.4; +} + +.mod-k2-content__title a { + color: var(--body-color); + text-decoration: none; + transition: color 0.2s; +} + +.mod-k2-content__title a:hover { + color: var(--color-primary); + text-decoration: underline; +} + +.mod-k2-content__meta { + display: flex; + flex-wrap: wrap; + gap: 1rem; + font-size: 0.875rem; + color: var(--gray-600); + margin-bottom: 0.75rem; +} + +.mod-k2-content__meta > span { + display: flex; + align-items: center; + gap: 0.25rem; +} + +.mod-k2-content__intro { + color: var(--body-color); + line-height: 1.6; + margin-bottom: 1rem; +} + +.mod-k2-content__readmore { + margin-top: 1rem; +} + +.mod-k2-content__readmore-link { + display: inline-flex; + align-items: center; + gap: 0.5rem; + min-height: 44px; +} + +.mod-k2-content__custom-link { + margin-top: 1.5rem; + text-align: center; +} + +.mod-k2-content__empty { + text-align: center; + padding: 2rem 1rem; + background: var(--secondary-bg); + border-radius: var(--border-radius); + color: var(--gray-600); +} + +/* === mod_acymailing (AcyMailing) === */ +.mod-acymailing-responsive { + width: 100%; +} + +.mod-acymailing__form-container { + background: var(--body-bg); + padding: 1.5rem; + border-radius: var(--border-radius); + border: 1px solid var(--border-color); +} + +.mod-acymailing__intro { + margin-bottom: 1.5rem; + line-height: 1.6; + color: var(--body-color); +} + +.mod-acymailing__outro { + margin-top: 1.5rem; + font-size: 0.875rem; + color: var(--gray-600); + line-height: 1.6; +} + +.mod-acymailing__empty { + text-align: center; + padding: 2rem 1rem; + background: var(--secondary-bg); + border-radius: var(--border-radius); + color: var(--gray-600); +} + +/* === mod_hikashop_cart (HikaShop) === */ +.mod-hikashop-cart-responsive { + width: 100%; +} + +.mod-hikashop-cart__header { + display: flex; + align-items: center; + gap: 0.75rem; + padding: 1rem; + background: var(--secondary-bg); + border: 1px solid var(--border-color); + border-radius: var(--border-radius); + margin-bottom: 1rem; +} + +.mod-hikashop-cart__icon { + font-size: 1.5rem; + color: var(--color-primary); + flex-shrink: 0; +} + +.mod-hikashop-cart__summary { + flex: 1; + min-width: 0; +} + +.mod-hikashop-cart__count { + font-weight: 600; + color: var(--body-color); + font-size: 1rem; +} + +.mod-hikashop-cart__total { + color: var(--success); + font-weight: 700; + font-size: 1.25rem; + margin-top: 0.25rem; +} + +.mod-hikashop-cart__products { + display: flex; + flex-direction: column; + gap: 1rem; + margin-bottom: 1rem; +} + +.mod-hikashop-cart__product { + display: flex; + gap: 0.75rem; + padding: 0.75rem; + background: var(--body-bg); + border: 1px solid var(--border-color); + border-radius: var(--border-radius); + align-items: flex-start; +} + +.mod-hikashop-cart__product-image { + flex-shrink: 0; + width: 80px; +} + +.mod-hikashop-cart__product-image img { + width: 100%; + height: auto; + border-radius: var(--border-radius); +} + +.mod-hikashop-cart__product-details { + flex: 1; + min-width: 0; +} + +.mod-hikashop-cart__product-name { + font-weight: 600; + margin-bottom: 0.25rem; + line-height: 1.4; + color: var(--body-color); +} + +.mod-hikashop-cart__product-quantity { + font-size: 0.875rem; + color: var(--gray-600); + margin-bottom: 0.25rem; +} + +.mod-hikashop-cart__quantity-value { + font-weight: 600; + color: var(--body-color); +} + +.mod-hikashop-cart__product-price { + font-weight: 700; + color: var(--success); + margin-top: 0.25rem; +} + +.mod-hikashop-cart__product-remove { + flex-shrink: 0; +} + +.mod-hikashop-cart__remove-btn { + display: inline-flex; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + border-radius: 50%; + background: var(--body-bg); + border: 1px solid var(--border-color); + color: var(--danger); + text-decoration: none; + transition: all 0.2s; +} + +.mod-hikashop-cart__remove-btn:hover { + background: var(--danger); + color: white; + border-color: var(--danger); +} + +.mod-hikashop-cart__actions { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.mod-hikashop-cart__btn { + padding: 0.625rem 1rem; + border-radius: var(--border-radius); + text-align: center; + text-decoration: none; + font-weight: 600; + min-height: 44px; + display: inline-flex; + align-items: center; + justify-content: center; + transition: all 0.2s; +} + +.mod-hikashop-cart__empty { + text-align: center; + padding: 2rem 1rem; + background: var(--secondary-bg); + border: 1px solid var(--border-color); + border-radius: var(--border-radius); +} + +.mod-hikashop-cart__empty-icon { + font-size: 3rem; + color: var(--gray-600); + display: block; + margin-bottom: 1rem; +} + +.mod-hikashop-cart__empty-text { + color: var(--gray-600); + margin: 0; +} + +/* === mod_kunenalatest (Kunena Forum) === */ +.mod-kunena-latest-responsive { + width: 100%; +} + +.mod-kunena-latest__list { + list-style: none; + padding: 0; + margin: 0; + display: flex; + flex-direction: column; + gap: 1rem; +} + +.mod-kunena-latest__item { + display: flex; + gap: 0.75rem; + padding: 1rem; + background: var(--body-bg); + border: 1px solid var(--border-color); + border-radius: var(--border-radius); + transition: all 0.2s; +} + +.mod-kunena-latest__item:hover { + background: var(--secondary-bg); + border-color: var(--color-primary); +} + +.mod-kunena-latest__avatar { + flex-shrink: 0; + width: 40px; + height: 40px; + border-radius: 50%; + overflow: hidden; +} + +.mod-kunena-latest__avatar img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.mod-kunena-latest__content { + flex: 1; + min-width: 0; +} + +.mod-kunena-latest__title { + margin: 0 0 0.5rem 0; + font-weight: 600; + font-size: 1rem; + line-height: 1.4; +} + +.mod-kunena-latest__title a { + color: var(--body-color); + text-decoration: none; + transition: color 0.2s; +} + +.mod-kunena-latest__title a:hover { + color: var(--color-primary); + text-decoration: underline; +} + +.mod-kunena-latest__meta { + display: flex; + flex-wrap: wrap; + gap: 0.75rem; + font-size: 0.875rem; + color: var(--gray-600); + margin-bottom: 0.5rem; +} + +.mod-kunena-latest__meta > span { + display: flex; + align-items: center; + gap: 0.25rem; +} + +.mod-kunena-latest__meta a { + color: var(--gray-600); + text-decoration: none; + transition: color 0.2s; +} + +.mod-kunena-latest__meta a:hover { + color: var(--color-primary); +} + +.mod-kunena-latest__excerpt { + font-size: 0.875rem; + color: var(--body-color); + line-height: 1.6; + margin-top: 0.5rem; +} + +.mod-kunena-latest__more { + margin-top: 1.5rem; + text-align: center; +} + +.mod-kunena-latest__more-link { + display: inline-flex; + align-items: center; + gap: 0.5rem; + min-height: 44px; +} + +.mod-kunena-latest__empty { + text-align: center; + padding: 2rem 1rem; + background: var(--secondary-bg); + border-radius: var(--border-radius); + color: var(--gray-600); +} + +/* === Mobile Responsive Adjustments === */ +@media (max-width: 575.98px) { + .mod-k2-content__item { + flex-direction: column; + } + + .mod-k2-content__image { + width: 100%; + max-width: 300px; + margin: 0 auto; + } + + .mod-k2-content__meta { + flex-direction: column; + gap: 0.5rem; + } + + .mod-hikashop-cart__product { + flex-direction: column; + } + + .mod-hikashop-cart__product-image { + width: 100%; + max-width: 200px; + margin: 0 auto; + } + + .mod-hikashop-cart__actions { + gap: 0.75rem; + } + + .mod-hikashop-cart__btn { + min-height: 48px; + padding: 0.75rem 1rem; + font-size: 1rem; + } + + .mod-kunena-latest__meta { + flex-direction: column; + gap: 0.5rem; + } +} + +/* Tablet and desktop enhancements */ +@media (min-width: 768px) { + .mod-hikashop-cart__actions { + flex-direction: row; + } + + .mod-k2-content__custom-link { + text-align: left; + } +} diff --git a/src/templates/html/INDUSTRY_MODULES_README.md b/src/templates/html/INDUSTRY_MODULES_README.md new file mode 100644 index 0000000..2fe09f1 --- /dev/null +++ b/src/templates/html/INDUSTRY_MODULES_README.md @@ -0,0 +1,257 @@ +# 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 + +## 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/mod_acymailing/default.php b/src/templates/html/mod_acymailing/default.php new file mode 100644 index 0000000..7ed3264 --- /dev/null +++ b/src/templates/html/mod_acymailing/default.php @@ -0,0 +1,82 @@ + + * @license GNU General Public License version 2 or later; see LICENSE.txt + * + * Mobile responsive override for mod_acymailing module + */ + +defined('_JEXEC') or die; + +use Joomla\CMS\Language\Text; + +$moduleclass_sfx = htmlspecialchars($params->get('moduleclass_sfx', ''), ENT_COMPAT, 'UTF-8'); + +// Add responsive wrapper class +$wrapperClass = 'mod-acymailing mod-acymailing-responsive ' . $moduleclass_sfx; +?> + +
+ +
+ get('intro_text')) : ?> +
+ get('intro_text'); ?> +
+ + + + + get('outro_text')) : ?> +
+ get('outro_text'); ?> +
+ +
+ +
+

+
+ +
+ + diff --git a/src/templates/html/mod_acymailing/index.html b/src/templates/html/mod_acymailing/index.html new file mode 100644 index 0000000..09b7ab1 --- /dev/null +++ b/src/templates/html/mod_acymailing/index.html @@ -0,0 +1 @@ + diff --git a/src/templates/html/mod_hikashop_cart/default.php b/src/templates/html/mod_hikashop_cart/default.php new file mode 100644 index 0000000..cf0625b --- /dev/null +++ b/src/templates/html/mod_hikashop_cart/default.php @@ -0,0 +1,110 @@ + + * @license GNU General Public License version 2 or later; see LICENSE.txt + * + * Mobile responsive override for mod_hikashop_cart module + */ + +defined('_JEXEC') or die; + +use Joomla\CMS\Language\Text; + +$moduleclass_sfx = htmlspecialchars($params->get('moduleclass_sfx', ''), ENT_COMPAT, 'UTF-8'); + +// Add responsive wrapper class +$wrapperClass = 'mod-hikashop-cart mod-hikashop-cart-responsive ' . $moduleclass_sfx; +?> + +
+ products)) : ?> +
+ +
+
+ products); ?> + products) == 1 ? Text::_('ITEM') : Text::_('ITEMS'); ?> +
+ total)) : ?> +
+ total->price_value_with_tax_formated; ?> +
+ +
+
+ + get('show_products', 1)) : ?> +
+ products as $product) : ?> +
+ images[0]) && $params->get('show_image', 1)) : ?> +
+ <?php echo htmlspecialchars($product->product_name, ENT_COMPAT, 'UTF-8'); ?> +
+ + +
+
+ product_name, ENT_COMPAT, 'UTF-8'); ?> +
+ +
+ : + cart_product_quantity; ?> +
+ + prices[0])) : ?> +
+ prices[0]->price_value_with_tax_formated; ?> +
+ +
+ + get('show_delete', 1)) : ?> +
+ + + +
+ +
+ +
+ + +
+ get('show_cart_button', 1)) : ?> + + + + + + get('show_checkout_button', 1)) : ?> + + + + +
+ +
+ +

+ +

+
+ +
diff --git a/src/templates/html/mod_hikashop_cart/index.html b/src/templates/html/mod_hikashop_cart/index.html new file mode 100644 index 0000000..09b7ab1 --- /dev/null +++ b/src/templates/html/mod_hikashop_cart/index.html @@ -0,0 +1 @@ + diff --git a/src/templates/html/mod_k2_content/default.php b/src/templates/html/mod_k2_content/default.php new file mode 100644 index 0000000..1186f66 --- /dev/null +++ b/src/templates/html/mod_k2_content/default.php @@ -0,0 +1,112 @@ + + * @license GNU General Public License version 2 or later; see LICENSE.txt + * + * Mobile responsive override for mod_k2_content module + */ + +defined('_JEXEC') or die; + +use Joomla\CMS\HTML\HTMLHelper; +use Joomla\CMS\Language\Text; + +$moduleclass_sfx = htmlspecialchars($params->get('moduleclass_sfx', ''), ENT_COMPAT, 'UTF-8'); + +// Add responsive wrapper class +$wrapperClass = 'mod-k2-content mod-k2-content-responsive ' . $moduleclass_sfx; +?> + +
+ + + + get('itemCustomLink')) : ?> +
+ + get('itemCustomLinkTitle'); ?> + +
+ + +
+

+
+ +
diff --git a/src/templates/html/mod_k2_content/index.html b/src/templates/html/mod_k2_content/index.html new file mode 100644 index 0000000..09b7ab1 --- /dev/null +++ b/src/templates/html/mod_k2_content/index.html @@ -0,0 +1 @@ + diff --git a/src/templates/html/mod_kunenalatest/default.php b/src/templates/html/mod_kunenalatest/default.php new file mode 100644 index 0000000..00d7b8d --- /dev/null +++ b/src/templates/html/mod_kunenalatest/default.php @@ -0,0 +1,110 @@ + + * @license GNU General Public License version 2 or later; see LICENSE.txt + * + * Mobile responsive override for mod_kunenalatest module + */ + +defined('_JEXEC') or die; + +use Joomla\CMS\HTML\HTMLHelper; +use Joomla\CMS\Language\Text; + +$moduleclass_sfx = htmlspecialchars($params->get('moduleclass_sfx', ''), ENT_COMPAT, 'UTF-8'); + +// Add responsive wrapper class +$wrapperClass = 'mod-kunena-latest mod-kunena-latest-responsive ' . $moduleclass_sfx; +?> + +
+ + + + get('more_link', 1)) : ?> +
+ + + + +
+ + +
+

+
+ +
diff --git a/src/templates/html/mod_kunenalatest/index.html b/src/templates/html/mod_kunenalatest/index.html new file mode 100644 index 0000000..09b7ab1 --- /dev/null +++ b/src/templates/html/mod_kunenalatest/index.html @@ -0,0 +1 @@ +