Add mobile responsive overrides for common industry Joomla extensions (K2, AcyMailing, HikaShop, Kunena)
Co-authored-by: jmiller-moko <230051081+jmiller-moko@users.noreply.github.com>
This commit is contained in:
copilot-swe-agent[bot]
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
257
src/templates/html/INDUSTRY_MODULES_README.md
Normal file
257
src/templates/html/INDUSTRY_MODULES_README.md
Normal file
@@ -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 <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
|
||||
82
src/templates/html/mod_acymailing/default.php
Normal file
82
src/templates/html/mod_acymailing/default.php
Normal file
@@ -0,0 +1,82 @@
|
||||
<?php
|
||||
/**
|
||||
* @package AcyMailing
|
||||
* @subpackage mod_acymailing
|
||||
*
|
||||
* @copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
|
||||
* @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;
|
||||
?>
|
||||
|
||||
<div class="<?php echo $wrapperClass; ?>">
|
||||
<?php if (!empty($formDisplay)) : ?>
|
||||
<div class="mod-acymailing__form-container">
|
||||
<?php if ($params->get('intro_text')) : ?>
|
||||
<div class="mod-acymailing__intro">
|
||||
<?php echo $params->get('intro_text'); ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php echo $formDisplay; ?>
|
||||
|
||||
<?php if ($params->get('outro_text')) : ?>
|
||||
<div class="mod-acymailing__outro">
|
||||
<?php echo $params->get('outro_text'); ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php else : ?>
|
||||
<div class="mod-acymailing__empty">
|
||||
<p><?php echo Text::_('MOD_ACYMAILING_NO_FORM'); ?></p>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* Override AcyMailing inline styles for mobile responsiveness */
|
||||
.mod-acymailing-responsive .acymailing_module input[type="email"],
|
||||
.mod-acymailing-responsive .acymailing_module input[type="text"] {
|
||||
min-height: 44px !important;
|
||||
font-size: 1rem !important;
|
||||
padding: 0.5rem 0.75rem !important;
|
||||
border-radius: var(--border-radius, 0.375rem) !important;
|
||||
border: 1px solid var(--input-border-color, #dee2e6) !important;
|
||||
width: 100% !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
.mod-acymailing-responsive .acymailing_module button[type="submit"],
|
||||
.mod-acymailing-responsive .acymailing_module input[type="submit"] {
|
||||
min-height: 44px !important;
|
||||
padding: 0.625rem 1rem !important;
|
||||
font-size: 1rem !important;
|
||||
border-radius: var(--border-radius, 0.375rem) !important;
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.mod-acymailing-responsive .acymailing_module input[type="email"],
|
||||
.mod-acymailing-responsive .acymailing_module input[type="text"] {
|
||||
font-size: 16px !important;
|
||||
min-height: 48px !important;
|
||||
padding: 0.75rem 1rem !important;
|
||||
}
|
||||
|
||||
.mod-acymailing-responsive .acymailing_module button[type="submit"],
|
||||
.mod-acymailing-responsive .acymailing_module input[type="submit"] {
|
||||
min-height: 48px !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
1
src/templates/html/mod_acymailing/index.html
Normal file
1
src/templates/html/mod_acymailing/index.html
Normal file
@@ -0,0 +1 @@
|
||||
<!DOCTYPE html><html><head><title></title></head><body></body></html>
|
||||
110
src/templates/html/mod_hikashop_cart/default.php
Normal file
110
src/templates/html/mod_hikashop_cart/default.php
Normal file
@@ -0,0 +1,110 @@
|
||||
<?php
|
||||
/**
|
||||
* @package HikaShop
|
||||
* @subpackage mod_hikashop_cart
|
||||
*
|
||||
* @copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
|
||||
* @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;
|
||||
?>
|
||||
|
||||
<div class="<?php echo $wrapperClass; ?>" id="hikashop_cart_module<?php echo $params->get('id'); ?>">
|
||||
<?php if (!empty($cart->products)) : ?>
|
||||
<div class="mod-hikashop-cart__header">
|
||||
<span class="mod-hikashop-cart__icon" aria-hidden="true">
|
||||
<span class="icon-basket"></span>
|
||||
</span>
|
||||
<div class="mod-hikashop-cart__summary">
|
||||
<div class="mod-hikashop-cart__count">
|
||||
<?php echo count($cart->products); ?>
|
||||
<?php echo count($cart->products) == 1 ? Text::_('ITEM') : Text::_('ITEMS'); ?>
|
||||
</div>
|
||||
<?php if (!empty($cart->total)) : ?>
|
||||
<div class="mod-hikashop-cart__total">
|
||||
<?php echo $cart->total->price_value_with_tax_formated; ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php if ($params->get('show_products', 1)) : ?>
|
||||
<div class="mod-hikashop-cart__products">
|
||||
<?php foreach ($cart->products as $product) : ?>
|
||||
<div class="mod-hikashop-cart__product">
|
||||
<?php if (!empty($product->images[0]) && $params->get('show_image', 1)) : ?>
|
||||
<div class="mod-hikashop-cart__product-image">
|
||||
<img src="<?php echo $product->images[0]->file_path; ?>"
|
||||
alt="<?php echo htmlspecialchars($product->product_name, ENT_COMPAT, 'UTF-8'); ?>" />
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<div class="mod-hikashop-cart__product-details">
|
||||
<div class="mod-hikashop-cart__product-name">
|
||||
<?php echo htmlspecialchars($product->product_name, ENT_COMPAT, 'UTF-8'); ?>
|
||||
</div>
|
||||
|
||||
<div class="mod-hikashop-cart__product-quantity">
|
||||
<?php echo Text::_('QUANTITY'); ?>:
|
||||
<span class="mod-hikashop-cart__quantity-value"><?php echo $product->cart_product_quantity; ?></span>
|
||||
</div>
|
||||
|
||||
<?php if (!empty($product->prices[0])) : ?>
|
||||
<div class="mod-hikashop-cart__product-price">
|
||||
<?php echo $product->prices[0]->price_value_with_tax_formated; ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<?php if ($params->get('show_delete', 1)) : ?>
|
||||
<div class="mod-hikashop-cart__product-remove">
|
||||
<a href="#"
|
||||
class="mod-hikashop-cart__remove-btn hikashop_cart_product_delete"
|
||||
data-product-id="<?php echo $product->product_id; ?>"
|
||||
title="<?php echo Text::_('HIKA_DELETE'); ?>"
|
||||
aria-label="<?php echo Text::_('HIKA_DELETE') . ' ' . htmlspecialchars($product->product_name, ENT_COMPAT, 'UTF-8'); ?>">
|
||||
<span class="icon-remove" aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<div class="mod-hikashop-cart__actions">
|
||||
<?php if ($params->get('show_cart_button', 1)) : ?>
|
||||
<a href="<?php echo hikashop_completeLink('cart'); ?>"
|
||||
class="mod-hikashop-cart__btn mod-hikashop-cart__btn--view btn btn-secondary">
|
||||
<?php echo Text::_('HIKASHOP_CART_VIEW'); ?>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($params->get('show_checkout_button', 1)) : ?>
|
||||
<a href="<?php echo hikashop_completeLink('checkout'); ?>"
|
||||
class="mod-hikashop-cart__btn mod-hikashop-cart__btn--checkout btn btn-primary">
|
||||
<?php echo Text::_('HIKASHOP_CHECKOUT'); ?>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php else : ?>
|
||||
<div class="mod-hikashop-cart__empty">
|
||||
<span class="mod-hikashop-cart__empty-icon" aria-hidden="true">
|
||||
<span class="icon-basket"></span>
|
||||
</span>
|
||||
<p class="mod-hikashop-cart__empty-text">
|
||||
<?php echo Text::_('HIKASHOP_CART_EMPTY'); ?>
|
||||
</p>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
1
src/templates/html/mod_hikashop_cart/index.html
Normal file
1
src/templates/html/mod_hikashop_cart/index.html
Normal file
@@ -0,0 +1 @@
|
||||
<!DOCTYPE html><html><head><title></title></head><body></body></html>
|
||||
112
src/templates/html/mod_k2_content/default.php
Normal file
112
src/templates/html/mod_k2_content/default.php
Normal file
@@ -0,0 +1,112 @@
|
||||
<?php
|
||||
/**
|
||||
* @package K2
|
||||
* @subpackage mod_k2_content
|
||||
*
|
||||
* @copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
|
||||
* @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;
|
||||
?>
|
||||
|
||||
<div class="<?php echo $wrapperClass; ?>">
|
||||
<?php if (count($items)) : ?>
|
||||
<ul class="mod-k2-content__list">
|
||||
<?php foreach ($items as $key => $item) : ?>
|
||||
<li class="mod-k2-content__item">
|
||||
<?php if ($params->get('itemImage') && !empty($item->imageXSmall)) : ?>
|
||||
<div class="mod-k2-content__image">
|
||||
<a href="<?php echo $item->link; ?>" title="<?php echo htmlspecialchars($item->title, ENT_COMPAT, 'UTF-8'); ?>">
|
||||
<img src="<?php echo $item->imageXSmall; ?>" alt="<?php echo htmlspecialchars($item->title, ENT_COMPAT, 'UTF-8'); ?>" />
|
||||
</a>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<div class="mod-k2-content__content">
|
||||
<?php if ($params->get('itemTitle')) : ?>
|
||||
<h<?php echo $params->get('item_heading', 4); ?> class="mod-k2-content__title">
|
||||
<a href="<?php echo $item->link; ?>">
|
||||
<?php echo htmlspecialchars($item->title, ENT_COMPAT, 'UTF-8'); ?>
|
||||
</a>
|
||||
</h<?php echo $params->get('item_heading', 4); ?>>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($params->get('itemAuthor') || $params->get('itemDateCreated') || $params->get('itemCategory') || $params->get('itemHits')) : ?>
|
||||
<div class="mod-k2-content__meta">
|
||||
<?php if ($params->get('itemAuthor')) : ?>
|
||||
<span class="mod-k2-content__author">
|
||||
<span class="icon-user" aria-hidden="true"></span>
|
||||
<?php echo $item->author; ?>
|
||||
</span>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($params->get('itemDateCreated')) : ?>
|
||||
<span class="mod-k2-content__date">
|
||||
<span class="icon-calendar" aria-hidden="true"></span>
|
||||
<time datetime="<?php echo HTMLHelper::_('date', $item->created, 'c'); ?>">
|
||||
<?php echo HTMLHelper::_('date', $item->created, Text::_('DATE_FORMAT_LC3')); ?>
|
||||
</time>
|
||||
</span>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($params->get('itemCategory')) : ?>
|
||||
<span class="mod-k2-content__category">
|
||||
<span class="icon-folder" aria-hidden="true"></span>
|
||||
<a href="<?php echo $item->categoryLink; ?>">
|
||||
<?php echo $item->categoryname; ?>
|
||||
</a>
|
||||
</span>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($params->get('itemHits')) : ?>
|
||||
<span class="mod-k2-content__hits">
|
||||
<span class="icon-eye" aria-hidden="true"></span>
|
||||
<?php echo $item->hits; ?> <?php echo Text::_('MOD_K2_CONTENT_HITS'); ?>
|
||||
</span>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($params->get('itemIntroText') && !empty($item->introtext)) : ?>
|
||||
<div class="mod-k2-content__intro">
|
||||
<?php echo $item->introtext; ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($params->get('itemReadMore')) : ?>
|
||||
<div class="mod-k2-content__readmore">
|
||||
<a href="<?php echo $item->link; ?>" class="mod-k2-content__readmore-link btn btn-secondary">
|
||||
<?php echo Text::_('MOD_K2_CONTENT_READ_MORE'); ?>
|
||||
<span class="icon-chevron-right" aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</li>
|
||||
<?php endforeach; ?>
|
||||
</ul>
|
||||
|
||||
<?php if ($params->get('itemCustomLink')) : ?>
|
||||
<div class="mod-k2-content__custom-link">
|
||||
<a href="<?php echo $params->get('itemCustomLinkURL'); ?>" class="btn btn-primary">
|
||||
<?php echo $params->get('itemCustomLinkTitle'); ?>
|
||||
</a>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<?php else : ?>
|
||||
<div class="mod-k2-content__empty">
|
||||
<p><?php echo Text::_('MOD_K2_CONTENT_NO_ITEMS'); ?></p>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
1
src/templates/html/mod_k2_content/index.html
Normal file
1
src/templates/html/mod_k2_content/index.html
Normal file
@@ -0,0 +1 @@
|
||||
<!DOCTYPE html><html><head><title></title></head><body></body></html>
|
||||
110
src/templates/html/mod_kunenalatest/default.php
Normal file
110
src/templates/html/mod_kunenalatest/default.php
Normal file
@@ -0,0 +1,110 @@
|
||||
<?php
|
||||
/**
|
||||
* @package Kunena
|
||||
* @subpackage mod_kunenalatest
|
||||
*
|
||||
* @copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
|
||||
* @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;
|
||||
?>
|
||||
|
||||
<div class="<?php echo $wrapperClass; ?>">
|
||||
<?php if (!empty($posts)) : ?>
|
||||
<ul class="mod-kunena-latest__list">
|
||||
<?php foreach ($posts as $post) : ?>
|
||||
<li class="mod-kunena-latest__item">
|
||||
<?php if ($params->get('sh_userpic', 1) && !empty($post->getAuthor()->getAvatarImage())) : ?>
|
||||
<div class="mod-kunena-latest__avatar">
|
||||
<?php echo $post->getAuthor()->getAvatarImage('', 40, 40); ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<div class="mod-kunena-latest__content">
|
||||
<?php if ($params->get('sh_topic', 1)) : ?>
|
||||
<h<?php echo $params->get('header_level', 4); ?> class="mod-kunena-latest__title">
|
||||
<a href="<?php echo $post->getUrl(); ?>">
|
||||
<?php echo htmlspecialchars($post->subject, ENT_COMPAT, 'UTF-8'); ?>
|
||||
</a>
|
||||
</h<?php echo $params->get('header_level', 4); ?>>
|
||||
<?php endif; ?>
|
||||
|
||||
<div class="mod-kunena-latest__meta">
|
||||
<?php if ($params->get('sh_username', 1)) : ?>
|
||||
<span class="mod-kunena-latest__author">
|
||||
<span class="icon-user" aria-hidden="true"></span>
|
||||
<a href="<?php echo $post->getAuthor()->getLink(); ?>">
|
||||
<?php echo $post->getAuthor()->getName(); ?>
|
||||
</a>
|
||||
</span>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($params->get('sh_time', 1)) : ?>
|
||||
<span class="mod-kunena-latest__date">
|
||||
<span class="icon-clock" aria-hidden="true"></span>
|
||||
<time datetime="<?php echo HTMLHelper::_('date', $post->time, 'c'); ?>">
|
||||
<?php echo $post->getTime(); ?>
|
||||
</time>
|
||||
</span>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($params->get('sh_category', 1)) : ?>
|
||||
<span class="mod-kunena-latest__category">
|
||||
<span class="icon-folder" aria-hidden="true"></span>
|
||||
<a href="<?php echo $post->getCategory()->getUrl(); ?>">
|
||||
<?php echo $post->getCategory()->name; ?>
|
||||
</a>
|
||||
</span>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($params->get('sh_hits', 0)) : ?>
|
||||
<span class="mod-kunena-latest__hits">
|
||||
<span class="icon-eye" aria-hidden="true"></span>
|
||||
<?php echo $post->getTopic()->hits; ?>
|
||||
</span>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($params->get('sh_replies', 0)) : ?>
|
||||
<span class="mod-kunena-latest__replies">
|
||||
<span class="icon-comments" aria-hidden="true"></span>
|
||||
<?php echo $post->getTopic()->getReplies(); ?>
|
||||
</span>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<?php if ($params->get('sh_text', 0) && !empty($post->message)) : ?>
|
||||
<div class="mod-kunena-latest__excerpt">
|
||||
<?php echo KunenaHtmlParser::parseBBCode($post->message, $params->get('txt_len', 50)); ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</li>
|
||||
<?php endforeach; ?>
|
||||
</ul>
|
||||
|
||||
<?php if ($params->get('more_link', 1)) : ?>
|
||||
<div class="mod-kunena-latest__more">
|
||||
<a href="<?php echo KunenaRoute::_('index.php?option=com_kunena'); ?>"
|
||||
class="mod-kunena-latest__more-link btn btn-secondary">
|
||||
<?php echo Text::_('MOD_KUNENALATEST_MORE'); ?>
|
||||
<span class="icon-chevron-right" aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<?php else : ?>
|
||||
<div class="mod-kunena-latest__empty">
|
||||
<p><?php echo Text::_('MOD_KUNENALATEST_NO_POSTS'); ?></p>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
1
src/templates/html/mod_kunenalatest/index.html
Normal file
1
src/templates/html/mod_kunenalatest/index.html
Normal file
@@ -0,0 +1 @@
|
||||
<!DOCTYPE html><html><head><title></title></head><body></body></html>
|
||||
Reference in New Issue
Block a user