Add mobile-responsive overrides for 20 modules and 7 component views #81
@@ -19945,3 +19945,481 @@ nav[data-toggle=toc] .nav-link.active+ul{
|
|||||||
align-items: flex-start;
|
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
This module includes inline
<style>tags with CSS using!importantdeclarations extensively. According to the PR description and established patterns, CSS should be in template.css sections with BEM naming. While this may be justified to override AcyMailing's own inline styles (as the comment suggests), it:Consider either: