From 7f3c10581b4074cf1bd17f17749617509b26f872 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sun, 22 Feb 2026 05:47:43 +0000 Subject: [PATCH 01/14] Initial plan From 85d890c8dfc98abc8cd61b1344f18b506f1abccb Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sun, 22 Feb 2026 05:50:13 +0000 Subject: [PATCH 02/14] Add mobile responsive mod_search override with comprehensive CSS and documentation Co-authored-by: jmiller-moko <230051081+jmiller-moko@users.noreply.github.com> --- src/media/css/template.css | 128 ++++++++++++++++++++++ src/templates/html/mod_search/README.md | 126 +++++++++++++++++++++ src/templates/html/mod_search/default.php | 94 ++++++++++++++++ src/templates/html/mod_search/index.html | 1 + 4 files changed, 349 insertions(+) create mode 100644 src/templates/html/mod_search/README.md create mode 100644 src/templates/html/mod_search/default.php create mode 100644 src/templates/html/mod_search/index.html diff --git a/src/media/css/template.css b/src/media/css/template.css index e5e8ac8..ce3e817 100644 --- a/src/media/css/template.css +++ b/src/media/css/template.css @@ -18559,3 +18559,131 @@ nav[data-toggle=toc] .nav-link.active+ul{ --alert-color: color-mix(in srgb, var(--warning) 90%, black); --alert-border-color: color-mix(in srgb, var(--warning) 20%, var(--body-bg)); } + +/* ===== MOD_SEARCH MOBILE RESPONSIVE STYLES ===== */ +.mod-search-responsive { + width: 100%; +} + +.mod-search__form { + display: flex; + flex-direction: column; + gap: 0.5rem; + width: 100%; +} + +.mod-search__input-wrapper { + display: flex; + flex-direction: column; + gap: 0.5rem; + width: 100%; +} + +.mod-search__input-wrapper--inline { + flex-direction: row; + align-items: stretch; +} + +.mod-search__input { + flex: 1; + min-width: 0; + padding: 0.5rem 0.75rem; + font-size: 1rem; + line-height: 1.5; + border: 1px solid var(--input-border-color, #dee2e6); + border-radius: 0.375rem; + background-color: var(--input-bg, #fff); + color: var(--input-color, #212529); + -webkit-appearance: none; + appearance: none; +} + +.mod-search__input:focus { + border-color: var(--color-primary, #0d6efd); + outline: 0; + box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); +} + +.mod-search__button-wrapper { + display: flex; +} + +.mod-search__button-wrapper--left, +.mod-search__button-wrapper--right { + flex-shrink: 0; +} + +.mod-search__button { + padding: 0.5rem 1rem; + font-size: 1rem; + line-height: 1.5; + border-radius: 0.375rem; + white-space: nowrap; + min-height: 44px; + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.5rem; +} + +.mod-search__button--icon { + padding: 0.5rem; + width: 44px; + height: 44px; +} + +.mod-search__button--icon .icon-search { + font-size: 1.25rem; +} + +/* Mobile-first responsive adjustments */ +@media (max-width: 575.98px) { + .mod-search__input { + font-size: 16px; + padding: 0.625rem 0.875rem; + } + + .mod-search__button { + padding: 0.625rem 1.25rem; + font-size: 1rem; + min-height: 48px; + } + + .mod-search__button--icon { + width: 48px; + height: 48px; + } + + .mod-search__input-wrapper--inline { + flex-direction: column; + } + + .mod-search__button-wrapper--left .mod-search__button, + .mod-search__button-wrapper--right .mod-search__button { + width: 100%; + } +} + +/* Tablet improvements */ +@media (min-width: 576px) and (max-width: 767.98px) { + .mod-search__input-wrapper--inline { + flex-direction: row; + } +} + +/* Desktop enhancements */ +@media (min-width: 768px) { + .mod-search__form { + flex-direction: row; + align-items: center; + } + + .mod-search__input-wrapper--inline { + flex-direction: row; + } + + .mod-search__button-wrapper--top, + .mod-search__button-wrapper--bottom { + flex: 0 0 auto; + } +} diff --git a/src/templates/html/mod_search/README.md b/src/templates/html/mod_search/README.md new file mode 100644 index 0000000..fa44f24 --- /dev/null +++ b/src/templates/html/mod_search/README.md @@ -0,0 +1,126 @@ +# mod_search Mobile Responsive Override + +## Overview +This directory contains a mobile-responsive override for Joomla's `mod_search` module, designed specifically for the MokoCassiopeia template. + +## Features + +### Mobile Responsiveness +- **Flexible Layout**: Adapts to different screen sizes automatically +- **Touch-Friendly**: Minimum 44px touch targets (48px on mobile) +- **Readable Text**: 16px font size on mobile to prevent auto-zoom on iOS +- **Proper Spacing**: Adequate padding and gaps for easy interaction + +### Responsive Breakpoints +- **Mobile (< 576px)**: Stacked layout, full-width buttons, larger touch targets +- **Tablet (576px - 767px)**: Inline search field and button +- **Desktop (≥ 768px)**: Optimized horizontal layout + +### Button Position Support +The override supports all standard mod_search button positions: +- **Left**: Search button appears to the left of input field +- **Right**: Search button appears to the right of input field (default) +- **Top**: Search button appears above input field +- **Bottom**: Search button appears below input field + +### Icon Button Support +Supports both text and icon-only search buttons: +- Text buttons display customizable button text +- Icon buttons show search icon (icon-search) + +## Files + +### default.php +The main template override file that renders the search module with responsive HTML structure. + +**Key Classes:** +- `.mod-search-responsive`: Main wrapper class +- `.mod-search__form`: Form container with flex layout +- `.mod-search__input-wrapper`: Input field wrapper +- `.mod-search__input`: Search input field +- `.mod-search__button`: Search button +- `.mod-search__button--icon`: Icon-only button variant + +## CSS Styling + +The mobile-responsive styles are defined in `/src/media/css/template.css` under the section: +``` +/* ===== MOD_SEARCH MOBILE RESPONSIVE STYLES ===== */ +``` + +### Key CSS Features: +1. **Flexbox Layout**: Uses modern flexbox for flexible, responsive layouts +2. **CSS Variables**: Integrates with template's color scheme system +3. **Mobile-First**: Base styles target mobile, with progressive enhancement +4. **Accessible**: Proper focus states and ARIA labels +5. **Touch-Optimized**: Appropriate sizing for touch interaction + +## Usage + +This override is automatically used when: +1. The MokoCassiopeia template is active +2. A mod_search module is published on the site + +No additional configuration is required beyond standard mod_search module settings. + +## Module Parameters + +All standard mod_search parameters are supported: +- **Width**: Input field width (in characters) - note: overridden by responsive CSS +- **Button Text**: Custom text for the search button +- **Button Position**: left, right, top, or bottom +- **Image Button**: Use icon instead of text button +- **Max Length**: Maximum search query length +- **Menu Item**: Target search results page + +## Accessibility Features + +- Hidden label for screen readers +- ARIA labels on input and button +- Proper focus indicators +- Semantic HTML structure +- Keyboard navigation support + +## Browser Support + +- Modern browsers with flexbox support +- Responsive on all device sizes +- Works with iOS Safari (no auto-zoom on input focus) +- Compatible with touch and mouse input + +## Customization + +To customize the appearance, you can: +1. Override CSS variables in `user.css` +2. Modify classes in `default.php` +3. Add custom styles targeting `.mod-search-responsive` + +Example custom CSS: +```css +.mod-search-responsive { + max-width: 600px; + margin: 0 auto; +} + +.mod-search__input { + border-radius: 25px; +} + +.mod-search__button { + border-radius: 25px; +} +``` + +## Testing + +The override has been designed to work across: +- Mobile devices (320px+) +- Tablets (768px+) +- Desktop screens (1200px+) +- Touch and click interactions +- Portrait and landscape orientations + +## License + +Copyright (C) 2025 Moko Consulting +Licensed under GNU General Public License version 2 or later diff --git a/src/templates/html/mod_search/default.php b/src/templates/html/mod_search/default.php new file mode 100644 index 0000000..5ad1836 --- /dev/null +++ b/src/templates/html/mod_search/default.php @@ -0,0 +1,94 @@ + + * @license GNU General Public License version 2 or later; see LICENSE.txt + * + * Mobile responsive override for mod_search module + */ + +defined('_JEXEC') or die; + +use Joomla\CMS\Language\Text; + +// Get module parameters +$width = (int) $params->get('width', 20); +$maxlength = (int) $params->get('maxlength', 200); +$button_text = $params->get('button_text', ''); +$button_pos = $params->get('button_pos', 'right'); +$imagebutton = $params->get('imagebutton', 0); +$set_itemid = (int) $params->get('set_itemid', 0); +$moduleclass_sfx = htmlspecialchars($params->get('moduleclass_sfx', ''), ENT_COMPAT, 'UTF-8'); + +// Add responsive wrapper class +$wrapperClass = 'mod-search mod-search-responsive ' . $moduleclass_sfx; +$inputClass = 'mod-search__input form-control'; +$buttonClass = 'mod-search__button btn btn-primary'; + +// Build the search button +if ($imagebutton) { + $buttonHtml = ''; +} else { + $button_text = $button_text ?: Text::_('JSEARCH_FILTER_SUBMIT'); + $buttonHtml = ''; +} + +$output = ''; + +// Menuitem option +$mitemid = $set_itemid > 0 ? $set_itemid : $app->input->getInt('Itemid'); +?> + +
+
+ +
+ +
+ + +
+ +
+ +
+ + + + + + +
+ +
+ +
+ + +
+ +
+ + + + + +
+
diff --git a/src/templates/html/mod_search/index.html b/src/templates/html/mod_search/index.html new file mode 100644 index 0000000..09b7ab1 --- /dev/null +++ b/src/templates/html/mod_search/index.html @@ -0,0 +1 @@ + From 9c95884a7ab58af3befa19c901c813cb26bdc191 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sun, 22 Feb 2026 21:34:38 +0000 Subject: [PATCH 03/14] Add mobile responsive VirtueMart module overrides with comprehensive CSS Co-authored-by: jmiller-moko <230051081+jmiller-moko@users.noreply.github.com> --- src/media/css/template.css | 662 ++++++++++++++++++ .../html/VIRTUEMART_MODULES_README.md | 228 ++++++ .../html/mod_virtuemart_cart/default.php | 122 ++++ .../html/mod_virtuemart_cart/index.html | 1 + .../html/mod_virtuemart_category/default.php | 85 +++ .../html/mod_virtuemart_category/index.html | 1 + .../mod_virtuemart_currencies/default.php | 72 ++ .../html/mod_virtuemart_currencies/index.html | 1 + .../mod_virtuemart_manufacturer/default.php | 59 ++ .../mod_virtuemart_manufacturer/index.html | 1 + .../html/mod_virtuemart_product/default.php | 93 +++ .../html/mod_virtuemart_product/index.html | 1 + 12 files changed, 1326 insertions(+) create mode 100644 src/templates/html/VIRTUEMART_MODULES_README.md create mode 100644 src/templates/html/mod_virtuemart_cart/default.php create mode 100644 src/templates/html/mod_virtuemart_cart/index.html create mode 100644 src/templates/html/mod_virtuemart_category/default.php create mode 100644 src/templates/html/mod_virtuemart_category/index.html create mode 100644 src/templates/html/mod_virtuemart_currencies/default.php create mode 100644 src/templates/html/mod_virtuemart_currencies/index.html create mode 100644 src/templates/html/mod_virtuemart_manufacturer/default.php create mode 100644 src/templates/html/mod_virtuemart_manufacturer/index.html create mode 100644 src/templates/html/mod_virtuemart_product/default.php create mode 100644 src/templates/html/mod_virtuemart_product/index.html diff --git a/src/media/css/template.css b/src/media/css/template.css index ce3e817..fb47055 100644 --- a/src/media/css/template.css +++ b/src/media/css/template.css @@ -18687,3 +18687,665 @@ nav[data-toggle=toc] .nav-link.active+ul{ flex: 0 0 auto; } } + +/* ===== VIRTUEMART MODULE MOBILE RESPONSIVE STYLES ===== */ + +/* === mod_virtuemart_cart === */ +.mod-vm-cart-responsive { + width: 100%; +} + +.mod-vm-cart__header { + display: flex; + align-items: center; + gap: 0.75rem; + padding: 1rem; + background: var(--vm-surface); + border: 1px solid var(--vm-border); + border-radius: var(--vm-block-radius); + margin-bottom: 1rem; +} + +.mod-vm-cart__icon { + font-size: 1.5rem; + color: var(--vm-btn-primary-bg); + flex-shrink: 0; +} + +.mod-vm-cart__summary { + flex: 1; + min-width: 0; +} + +.mod-vm-cart__count { + font-weight: 600; + color: var(--vm-text-strong); + font-size: 1rem; +} + +.mod-vm-cart__total { + color: var(--vm-price-color); + font-weight: 700; + font-size: var(--vm-price-size); + margin-top: 0.25rem; +} + +.mod-vm-cart__products { + display: flex; + flex-direction: column; + gap: 1rem; + margin-bottom: 1rem; +} + +.mod-vm-cart__product { + display: flex; + gap: 0.75rem; + padding: 0.75rem; + background: var(--vm-surface-2); + border: 1px solid var(--vm-border); + border-radius: var(--vm-block-radius); + align-items: flex-start; +} + +.mod-vm-cart__product-image { + flex-shrink: 0; + width: 80px; +} + +.mod-vm-cart__product-image img { + width: 100%; + height: auto; + border-radius: var(--vm-input-radius); +} + +.mod-vm-cart__product-details { + flex: 1; + min-width: 0; +} + +.mod-vm-cart__product-name { + font-weight: 600; + margin-bottom: 0.25rem; + line-height: 1.4; +} + +.mod-vm-cart__product-name a { + color: var(--vm-text-strong); + text-decoration: none; +} + +.mod-vm-cart__product-name a:hover { + color: var(--color-primary); + text-decoration: underline; +} + +.mod-vm-cart__product-quantity { + font-size: 0.875rem; + color: var(--vm-text-muted); + margin-bottom: 0.25rem; +} + +.mod-vm-cart__quantity-value { + font-weight: 600; + color: var(--vm-text); +} + +.mod-vm-cart__product-price { + font-weight: 700; + color: var(--vm-price-color); + margin-top: 0.25rem; +} + +.mod-vm-cart__product-remove { + flex-shrink: 0; +} + +.mod-vm-cart__remove-btn { + display: inline-flex; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + border-radius: 50%; + background: var(--vm-surface); + border: 1px solid var(--vm-border); + color: var(--danger); + text-decoration: none; + transition: all 0.2s; +} + +.mod-vm-cart__remove-btn:hover { + background: var(--danger); + color: white; + border-color: var(--danger); +} + +.mod-vm-cart__actions { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.mod-vm-cart__btn { + padding: var(--vm-btn-padding-y) var(--vm-btn-padding-x); + border-radius: var(--vm-btn-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-vm-cart__empty { + text-align: center; + padding: 2rem 1rem; + background: var(--vm-surface-2); + border: 1px solid var(--vm-border); + border-radius: var(--vm-block-radius); +} + +.mod-vm-cart__empty-icon { + font-size: 3rem; + color: var(--vm-text-muted); + display: block; + margin-bottom: 1rem; +} + +.mod-vm-cart__empty-text { + color: var(--vm-text-muted); + margin: 0; +} + +/* === mod_virtuemart_product === */ +.mod-vm-product-responsive { + width: 100%; +} + +.mod-vm-product__header { + margin-bottom: 1.5rem; +} + +.mod-vm-product__list { + display: grid; + gap: 1.5rem; +} + +.mod-vm-product__list--div { + grid-template-columns: 1fr; +} + +.mod-vm-product__item { + background: var(--vm-surface); + border: 1px solid var(--vm-border); + border-radius: var(--vm-block-radius); + box-shadow: var(--vm-block-shadow); + overflow: hidden; + transition: transform 0.2s, box-shadow 0.2s; +} + +.mod-vm-product__item:hover { + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); +} + +.mod-vm-product__image { + position: relative; + overflow: hidden; +} + +.mod-vm-product__image img { + width: 100%; + height: auto; + display: block; +} + +.mod-vm-product__availability { + position: absolute; + top: 0.5rem; + right: 0.5rem; + padding: 0.25rem 0.75rem; + background: var(--vm-availability-bg); + color: var(--vm-availability-text); + border-radius: var(--vm-alert-radius); + font-size: 0.875rem; + font-weight: 600; +} + +.mod-vm-product__content { + padding: 1rem; +} + +.mod-vm-product__title { + font-size: var(--vm-product-title-size); + font-weight: var(--vm-product-title-weight); + margin: 0 0 0.75rem 0; + line-height: 1.4; +} + +.mod-vm-product__title a { + color: var(--vm-text-strong); + text-decoration: none; +} + +.mod-vm-product__title a:hover { + color: var(--color-primary); + text-decoration: underline; +} + +.mod-vm-product__description { + color: var(--vm-text-muted); + font-size: 0.875rem; + margin-bottom: 1rem; + line-height: 1.6; +} + +.mod-vm-product__price { + font-size: var(--vm-price-detail-size); + font-weight: 700; + color: var(--vm-price-color); + margin-bottom: 1rem; +} + +.mod-vm-product__actions { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.mod-vm-product__btn { + padding: var(--vm-btn-padding-y) var(--vm-btn-padding-x); + border-radius: var(--vm-btn-radius); + text-align: center; + text-decoration: none; + font-weight: 600; + min-height: 44px; + display: inline-flex; + align-items: center; + justify-content: center; +} + +.mod-vm-product__empty { + text-align: center; + padding: 2rem 1rem; + background: var(--vm-surface-2); + border: 1px solid var(--vm-border); + border-radius: var(--vm-block-radius); + color: var(--vm-text-muted); +} + +/* === mod_virtuemart_currencies === */ +.mod-vm-currencies-responsive { + width: 100%; +} + +.mod-vm-currencies__form { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.mod-vm-currencies__label { + font-weight: 600; + color: var(--vm-text-strong); + font-size: 0.875rem; +} + +.mod-vm-currencies__select-wrapper { + position: relative; + display: flex; + align-items: center; +} + +.mod-vm-currencies__select { + flex: 1; + padding: 0.5rem 2.5rem 0.5rem 0.75rem; + font-size: 1rem; + line-height: 1.5; + border: 1px solid var(--vm-border); + border-radius: var(--vm-input-radius); + background: var(--vm-surface); + color: var(--vm-text); + min-height: 44px; + appearance: none; + -webkit-appearance: none; + cursor: pointer; +} + +.mod-vm-currencies__select:focus { + border-color: var(--color-primary); + outline: 0; + box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); +} + +.mod-vm-currencies__icon { + position: absolute; + right: 0.75rem; + pointer-events: none; + color: var(--vm-text-muted); +} + +.mod-vm-currencies__submit { + padding: var(--vm-btn-padding-y) var(--vm-btn-padding-x); + border-radius: var(--vm-btn-radius); + min-height: 44px; +} + +.mod-vm-currencies__text-before, +.mod-vm-currencies__text-after { + font-size: 0.875rem; + color: var(--vm-text-muted); +} + +/* === mod_virtuemart_category === */ +.mod-vm-category-responsive { + width: 100%; +} + +.mod-vm-category__list { + list-style: none; + padding: 0; + margin: 0; +} + +.mod-vm-category__item { + margin-bottom: 0.5rem; +} + +.mod-vm-category__link { + display: flex; + align-items: center; + gap: 0.75rem; + padding: 0.75rem; + background: var(--vm-surface); + border: 1px solid var(--vm-border); + border-radius: var(--vm-input-radius); + color: var(--vm-text); + text-decoration: none; + transition: all 0.2s; + min-height: 44px; +} + +.mod-vm-category__link:hover { + background: var(--vm-surface-2); + border-color: var(--color-primary); + color: var(--color-primary); +} + +.mod-vm-category__link--active { + background: var(--vm-btn-primary-bg); + border-color: var(--vm-btn-primary-bg); + color: var(--vm-btn-primary-text); + font-weight: 600; +} + +.mod-vm-category__image { + flex-shrink: 0; + width: 40px; + height: 40px; + overflow: hidden; + border-radius: var(--vm-input-radius); +} + +.mod-vm-category__image img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.mod-vm-category__name { + flex: 1; + min-width: 0; +} + +.mod-vm-category__count { + color: var(--vm-text-muted); + font-size: 0.875rem; + flex-shrink: 0; +} + +.mod-vm-category__description { + padding: 0.5rem 0.75rem; + font-size: 0.875rem; + color: var(--vm-text-muted); + line-height: 1.6; +} + +.mod-vm-category__sublist { + list-style: none; + padding: 0 0 0 1.5rem; + margin: 0.5rem 0 0 0; +} + +.mod-vm-category__subitem { + margin-bottom: 0.25rem; +} + +.mod-vm-category__sublink { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0.5rem 0.75rem; + background: var(--vm-surface-2); + border: 1px solid var(--vm-border); + border-radius: var(--vm-input-radius); + color: var(--vm-text); + text-decoration: none; + font-size: 0.875rem; + transition: all 0.2s; + min-height: 40px; +} + +.mod-vm-category__sublink:hover { + background: var(--vm-surface); + border-color: var(--color-primary); + color: var(--color-primary); +} + +.mod-vm-category__sublink--active { + background: var(--vm-btn-secondary-bg); + border-color: var(--vm-btn-secondary-bg); + color: var(--vm-btn-secondary-text); + font-weight: 600; +} + +.mod-vm-category__empty { + text-align: center; + padding: 2rem 1rem; + background: var(--vm-surface-2); + border: 1px solid var(--vm-border); + border-radius: var(--vm-block-radius); + color: var(--vm-text-muted); +} + +/* === mod_virtuemart_manufacturer === */ +.mod-vm-manufacturer-responsive { + width: 100%; +} + +.mod-vm-manufacturer__container { + display: grid; + gap: 1rem; +} + +.mod-vm-manufacturer__container--list { + grid-template-columns: 1fr; +} + +.mod-vm-manufacturer__container--grid { + grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); +} + +.mod-vm-manufacturer__item { + background: var(--vm-surface); + border: 1px solid var(--vm-border); + border-radius: var(--vm-block-radius); + overflow: hidden; + transition: transform 0.2s, box-shadow 0.2s; +} + +.mod-vm-manufacturer__item:hover { + transform: translateY(-2px); + box-shadow: var(--vm-block-shadow); +} + +.mod-vm-manufacturer__link { + display: block; + text-decoration: none; + color: var(--vm-text); + min-height: 44px; +} + +.mod-vm-manufacturer__image { + width: 100%; + aspect-ratio: 16/9; + overflow: hidden; + background: var(--vm-surface-2); + display: flex; + align-items: center; + justify-content: center; +} + +.mod-vm-manufacturer__image img { + width: 100%; + height: 100%; + object-fit: contain; + padding: 1rem; +} + +.mod-vm-manufacturer__content { + padding: 1rem; +} + +.mod-vm-manufacturer__name { + font-weight: 600; + color: var(--vm-text-strong); + display: block; + margin-bottom: 0.5rem; +} + +.mod-vm-manufacturer__link:hover .mod-vm-manufacturer__name { + color: var(--color-primary); +} + +.mod-vm-manufacturer__description { + font-size: 0.875rem; + color: var(--vm-text-muted); + line-height: 1.6; +} + +.mod-vm-manufacturer__empty { + text-align: center; + padding: 2rem 1rem; + background: var(--vm-surface-2); + border: 1px solid var(--vm-border); + border-radius: var(--vm-block-radius); + color: var(--vm-text-muted); +} + +/* === Mobile Responsive Adjustments === */ +@media (max-width: 575.98px) { + /* Cart module */ + .mod-vm-cart__header { + padding: 0.75rem; + } + + .mod-vm-cart__product { + flex-direction: column; + } + + .mod-vm-cart__product-image { + width: 100%; + max-width: 200px; + margin: 0 auto; + } + + .mod-vm-cart__actions { + gap: 0.75rem; + } + + .mod-vm-cart__btn { + min-height: 48px; + padding: 0.75rem 1rem; + font-size: 1rem; + } + + /* Product module */ + .mod-vm-product__actions { + gap: 0.75rem; + } + + .mod-vm-product__btn { + min-height: 48px; + padding: 0.75rem 1rem; + } + + /* Currencies module */ + .mod-vm-currencies__select { + font-size: 16px; + min-height: 48px; + padding: 0.75rem 2.5rem 0.75rem 1rem; + } + + .mod-vm-currencies__submit { + min-height: 48px; + padding: 0.75rem 1rem; + } + + /* Category module */ + .mod-vm-category__link { + min-height: 48px; + padding: 0.875rem; + } + + .mod-vm-category__sublink { + min-height: 44px; + } + + /* Manufacturer module */ + .mod-vm-manufacturer__container--grid { + grid-template-columns: 1fr; + } +} + +/* Tablet adjustments */ +@media (min-width: 576px) and (max-width: 767.98px) { + .mod-vm-product__list--div { + grid-template-columns: repeat(2, 1fr); + } + + .mod-vm-manufacturer__container--grid { + grid-template-columns: repeat(2, 1fr); + } +} + +/* Desktop enhancements */ +@media (min-width: 768px) { + .mod-vm-cart__actions { + flex-direction: row; + } + + .mod-vm-product__list--div { + grid-template-columns: repeat(3, 1fr); + } + + .mod-vm-product__actions { + flex-direction: row; + } + + .mod-vm-manufacturer__container--grid { + grid-template-columns: repeat(3, 1fr); + } +} + +@media (min-width: 992px) { + .mod-vm-product__list--div { + grid-template-columns: repeat(4, 1fr); + } + + .mod-vm-manufacturer__container--grid { + grid-template-columns: repeat(4, 1fr); + } +} diff --git a/src/templates/html/VIRTUEMART_MODULES_README.md b/src/templates/html/VIRTUEMART_MODULES_README.md new file mode 100644 index 0000000..5dbf40b --- /dev/null +++ b/src/templates/html/VIRTUEMART_MODULES_README.md @@ -0,0 +1,228 @@ +# VirtueMart Module Mobile Responsive Overrides + +## Overview +This directory contains mobile-responsive overrides for VirtueMart e-commerce modules, designed specifically for the MokoCassiopeia template. + +## Modules Included + +### 1. mod_virtuemart_cart +Shopping cart display module with: +- Responsive product list with images +- Touch-friendly remove buttons +- Mobile-optimized cart summary +- Flexible action buttons layout + +### 2. mod_virtuemart_product +Product display module featuring: +- Grid/list layout options +- Responsive product cards +- Mobile-optimized images +- Touch-friendly action buttons + +### 3. mod_virtuemart_currencies +Currency selector module with: +- Custom styled select dropdown +- Mobile-friendly touch targets +- Accessible form controls +- Icon indicators + +### 4. mod_virtuemart_category +Category navigation module offering: +- Hierarchical category display +- Optional product counts +- Image support for categories +- Active state highlighting + +### 5. mod_virtuemart_manufacturer +Manufacturer display module with: +- Grid and list display modes +- Logo/image display +- Responsive card layouts +- Hover effects + +## Mobile Responsive Features + +### Touch Targets +- **Mobile (< 576px):** 48px minimum height +- **Desktop (≥ 768px):** 44px minimum height +- WCAG 2.1 AA compliant + +### Font Sizes +- **Mobile:** 16px base (prevents iOS auto-zoom) +- **Desktop:** 1rem (16px typically) + +### Responsive Breakpoints +Using Bootstrap-aligned breakpoints: +- `< 576px` - Mobile (xs) +- `576px` - Small (sm) +- `768px` - Medium (md) +- `992px` - Large (lg) +- `1200px` - Extra Large (xl) +- `1400px` - Extra Extra Large (xxl) + +### Layout Adaptations + +#### Mobile (< 576px) +- Single column layouts +- Stacked action buttons +- Full-width elements +- Larger touch targets (48px) + +#### Tablet (576px - 767px) +- 2-column grids for products/manufacturers +- Inline action buttons where appropriate +- 44px touch targets + +#### Desktop (≥ 768px) +- 3-4 column grids +- Horizontal button layouts +- Optimized spacing +- Enhanced hover effects + +## CSS Architecture + +### CSS Variables Integration +All styles integrate with template's VirtueMart CSS variables: + +```css +/* Surfaces & Colors */ +--vm-surface +--vm-surface-2 +--vm-text +--vm-text-strong +--vm-text-muted +--vm-border +--vm-price-color + +/* Layout */ +--vm-block-radius +--vm-block-shadow +--vm-section-gap + +/* Buttons */ +--vm-btn-primary-bg +--vm-btn-primary-text +--vm-btn-secondary-bg +--vm-btn-secondary-text +``` + +### BEM Naming Convention +All modules use Block-Element-Modifier naming: + +```css +.mod-vm-cart /* Block */ +.mod-vm-cart__header /* Element */ +.mod-vm-cart__item--active /* Modifier */ +``` + +## Accessibility Features + +All modules include: +- ✅ ARIA labels on interactive elements +- ✅ Semantic HTML5 structure +- ✅ Proper heading hierarchy +- ✅ Keyboard navigation support +- ✅ Screen reader friendly +- ✅ Focus indicators +- ✅ Touch-optimized controls + +## Browser Compatibility + +- ✅ Modern browsers with flexbox/grid support +- ✅ iOS Safari (no auto-zoom issues) +- ✅ Android browsers +- ✅ Chrome, Firefox, Safari, Edge +- ✅ Responsive on all device sizes +- ✅ Touch and mouse input + +## File Structure + +``` +src/templates/html/ +├── mod_virtuemart_cart/ +│ ├── default.php +│ ├── index.html +│ └── README.md +├── mod_virtuemart_product/ +│ ├── default.php +│ ├── index.html +│ └── README.md +├── mod_virtuemart_currencies/ +│ ├── default.php +│ ├── index.html +│ └── README.md +├── mod_virtuemart_category/ +│ ├── default.php +│ ├── index.html +│ └── README.md +└── mod_virtuemart_manufacturer/ + ├── default.php + ├── index.html + └── README.md +``` + +## Usage + +These overrides are automatically used when: +1. The MokoCassiopeia template is active +2. VirtueMart is installed and configured +3. The respective modules are published + +No additional configuration is required beyond standard VirtueMart module settings. + +## Customization + +To customize the appearance, you can: + +1. **Override CSS variables** in `user.css`: +```css +:root { + --vm-btn-primary-bg: #your-color; + --vm-block-radius: 0.5rem; +} +``` + +2. **Add custom styles** targeting module classes: +```css +.mod-vm-cart-responsive { + max-width: 400px; +} +``` + +3. **Modify PHP templates** in the respective module directories + +## Testing + +All overrides have been designed to work across: +- Mobile devices (320px+) +- Tablets (768px+) +- Desktop screens (1200px+) +- Touch and click interactions +- Portrait and landscape orientations + +## Security + +- ✅ index.html security files included +- ✅ Proper input escaping in PHP +- ✅ XSS prevention +- ✅ Follows Joomla security best practices + +## Documentation + +Each module directory contains a detailed README.md with: +- Module-specific features +- Configuration options +- Customization examples +- Usage guidelines + +## License + +Copyright (C) 2025 Moko Consulting +Licensed under GNU General Public License version 2 or later + +## Support + +For issues or questions: +- Check individual module README files +- Review CSS_VARIABLES.md for available CSS variables +- Consult VirtueMart and Joomla documentation diff --git a/src/templates/html/mod_virtuemart_cart/default.php b/src/templates/html/mod_virtuemart_cart/default.php new file mode 100644 index 0000000..bc52f90 --- /dev/null +++ b/src/templates/html/mod_virtuemart_cart/default.php @@ -0,0 +1,122 @@ + + * @license GNU General Public License version 2 or later; see LICENSE.txt + * + * Mobile responsive override for mod_virtuemart_cart module + */ + +defined('_JEXEC') or die; + +use Joomla\CMS\HTML\HTMLHelper; +use Joomla\CMS\Language\Text; + +// Load VirtueMart assets if not already loaded +vmJsApi::js('fancybox/jquery.fancybox-1.3.4.pack'); +vmJsApi::css('jquery.fancybox-1.3.4'); + +$moduleclass_sfx = htmlspecialchars($params->get('moduleclass_sfx', ''), ENT_COMPAT, 'UTF-8'); +$show_price = $params->get('show_price', 1); +$show_product_list = $params->get('show_product_list', 1); + +// Add responsive wrapper class +$wrapperClass = 'mod-vm-cart mod-vm-cart-responsive ' . $moduleclass_sfx; +?> + +
+ totalProduct) && $data->totalProduct > 0) : ?> +
+ +
+
+ totalProduct; ?> + totalProduct == 1 ? Text::_('MOD_VIRTUEMART_CART_ITEM') : Text::_('MOD_VIRTUEMART_CART_ITEMS'); ?> +
+ billTotal)) : ?> +
+ billTotal; ?> +
+ +
+
+ + products)) : ?> +
+ products as $product) : ?> +
+ image)) : ?> +
+ + image; ?> + +
+ + +
+
+ + product_name, ENT_COMPAT, 'UTF-8'); ?> + +
+ +
+ : + quantity; ?> +
+ + prices)) : ?> +
+ prices; ?> +
+ +
+ + delete_link)) : ?> +
+ + + +
+ +
+ +
+ + +
+ cart_show)) : ?> + + + + + + checkout_link)) : ?> + + + + +
+ +
+ +

+ +

+
+ +
diff --git a/src/templates/html/mod_virtuemart_cart/index.html b/src/templates/html/mod_virtuemart_cart/index.html new file mode 100644 index 0000000..09b7ab1 --- /dev/null +++ b/src/templates/html/mod_virtuemart_cart/index.html @@ -0,0 +1 @@ + diff --git a/src/templates/html/mod_virtuemart_category/default.php b/src/templates/html/mod_virtuemart_category/default.php new file mode 100644 index 0000000..34bcdce --- /dev/null +++ b/src/templates/html/mod_virtuemart_category/default.php @@ -0,0 +1,85 @@ + + * @license GNU General Public License version 2 or later; see LICENSE.txt + * + * Mobile responsive override for mod_virtuemart_category module + */ + +defined('_JEXEC') or die; + +use Joomla\CMS\Language\Text; + +$moduleclass_sfx = htmlspecialchars($params->get('moduleclass_sfx', ''), ENT_COMPAT, 'UTF-8'); +$show_images = $params->get('show_images', 1); +$show_description = $params->get('show_description', 0); +$show_product_count = $params->get('show_product_count', 0); + +// Add responsive wrapper class +$wrapperClass = 'mod-vm-category mod-vm-category-responsive ' . $moduleclass_sfx; +?> + +
+ + + +
+

+
+ +
diff --git a/src/templates/html/mod_virtuemart_category/index.html b/src/templates/html/mod_virtuemart_category/index.html new file mode 100644 index 0000000..09b7ab1 --- /dev/null +++ b/src/templates/html/mod_virtuemart_category/index.html @@ -0,0 +1 @@ + diff --git a/src/templates/html/mod_virtuemart_currencies/default.php b/src/templates/html/mod_virtuemart_currencies/default.php new file mode 100644 index 0000000..014a8b9 --- /dev/null +++ b/src/templates/html/mod_virtuemart_currencies/default.php @@ -0,0 +1,72 @@ + + * @license GNU General Public License version 2 or later; see LICENSE.txt + * + * Mobile responsive override for mod_virtuemart_currencies module + */ + +defined('_JEXEC') or die; + +use Joomla\CMS\Language\Text; + +$moduleclass_sfx = htmlspecialchars($params->get('moduleclass_sfx', ''), ENT_COMPAT, 'UTF-8'); +$text_before = $params->get('text_before', ''); +$text_after = $params->get('text_after', ''); + +// Add responsive wrapper class +$wrapperClass = 'mod-vm-currencies mod-vm-currencies-responsive ' . $moduleclass_sfx; +?> + +
+ +
+ +
+ + +
+ + +
+ + +
+ + + + + + +
+ + +
+ +
+ +
diff --git a/src/templates/html/mod_virtuemart_currencies/index.html b/src/templates/html/mod_virtuemart_currencies/index.html new file mode 100644 index 0000000..09b7ab1 --- /dev/null +++ b/src/templates/html/mod_virtuemart_currencies/index.html @@ -0,0 +1 @@ + diff --git a/src/templates/html/mod_virtuemart_manufacturer/default.php b/src/templates/html/mod_virtuemart_manufacturer/default.php new file mode 100644 index 0000000..41e3a84 --- /dev/null +++ b/src/templates/html/mod_virtuemart_manufacturer/default.php @@ -0,0 +1,59 @@ + + * @license GNU General Public License version 2 or later; see LICENSE.txt + * + * Mobile responsive override for mod_virtuemart_manufacturer module + */ + +defined('_JEXEC') or die; + +use Joomla\CMS\Language\Text; + +$moduleclass_sfx = htmlspecialchars($params->get('moduleclass_sfx', ''), ENT_COMPAT, 'UTF-8'); +$show_images = $params->get('show_images', 1); +$display_style = $params->get('display_style', 'list'); + +// Add responsive wrapper class +$wrapperClass = 'mod-vm-manufacturer mod-vm-manufacturer-responsive ' . $moduleclass_sfx; +?> + +
+ +
+ +
+ + + images[0])) : ?> +
+ images[0]->displayMediaThumb('', false); ?> +
+ + +
+ + mf_name, ENT_COMPAT, 'UTF-8'); ?> + + + mf_desc)) : ?> +
+ mf_desc, 30, '...'); ?> +
+ +
+ +
+ +
+ +
+

+
+ +
diff --git a/src/templates/html/mod_virtuemart_manufacturer/index.html b/src/templates/html/mod_virtuemart_manufacturer/index.html new file mode 100644 index 0000000..09b7ab1 --- /dev/null +++ b/src/templates/html/mod_virtuemart_manufacturer/index.html @@ -0,0 +1 @@ + diff --git a/src/templates/html/mod_virtuemart_product/default.php b/src/templates/html/mod_virtuemart_product/default.php new file mode 100644 index 0000000..4a62585 --- /dev/null +++ b/src/templates/html/mod_virtuemart_product/default.php @@ -0,0 +1,93 @@ + + * @license GNU General Public License version 2 or later; see LICENSE.txt + * + * Mobile responsive override for mod_virtuemart_product 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'); +$headerText = $params->get('headerText', ''); +$headerText = HTMLHelper::_('content.prepare', $headerText); +$display_style = $params->get('display_style', 'div'); + +// Add responsive wrapper class +$wrapperClass = 'mod-vm-product mod-vm-product-responsive ' . $moduleclass_sfx; +?> + +
+ +
+ +
+ + + +
+ +
+ images[0])) : ?> +
+ + images[0]->displayMediaThumb('', false); ?> + + + product_availability)) : ?> + + product_availability; ?> + + +
+ + +
+

+ + product_name, ENT_COMPAT, 'UTF-8'); ?> + +

+ + product_s_desc)) : ?> +
+ product_s_desc, 60, '...'); ?> +
+ + + prices)) : ?> +
+ prices; ?> +
+ + +
+ + + + + form)) : ?> +
+ form; ?> +
+ +
+
+
+ +
+ +
+

+
+ +
diff --git a/src/templates/html/mod_virtuemart_product/index.html b/src/templates/html/mod_virtuemart_product/index.html new file mode 100644 index 0000000..09b7ab1 --- /dev/null +++ b/src/templates/html/mod_virtuemart_product/index.html @@ -0,0 +1 @@ + From c723fba94622cae9008137b839044d6d2fab0446 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sun, 22 Feb 2026 21:35:42 +0000 Subject: [PATCH 04/14] Add comprehensive documentation for all VirtueMart module overrides Co-authored-by: jmiller-moko <230051081+jmiller-moko@users.noreply.github.com> --- .../html/mod_virtuemart_cart/README.md | 205 ++++++++++++++++++ .../html/mod_virtuemart_category/README.md | 57 +++++ .../html/mod_virtuemart_currencies/README.md | 50 +++++ .../mod_virtuemart_manufacturer/README.md | 59 +++++ .../html/mod_virtuemart_product/README.md | 50 +++++ 5 files changed, 421 insertions(+) create mode 100644 src/templates/html/mod_virtuemart_cart/README.md create mode 100644 src/templates/html/mod_virtuemart_category/README.md create mode 100644 src/templates/html/mod_virtuemart_currencies/README.md create mode 100644 src/templates/html/mod_virtuemart_manufacturer/README.md create mode 100644 src/templates/html/mod_virtuemart_product/README.md diff --git a/src/templates/html/mod_virtuemart_cart/README.md b/src/templates/html/mod_virtuemart_cart/README.md new file mode 100644 index 0000000..5d49ef2 --- /dev/null +++ b/src/templates/html/mod_virtuemart_cart/README.md @@ -0,0 +1,205 @@ +# mod_virtuemart_cart Mobile Responsive Override + +## Overview +Mobile-responsive override for VirtueMart's shopping cart module (`mod_virtuemart_cart`), designed for the MokoCassiopeia template. + +## Features + +### Cart Display +- **Cart Summary Header**: Shows item count and total price +- **Product List**: Displays cart items with images, names, quantities, and prices +- **Remove Buttons**: Touch-friendly delete buttons for each item +- **Action Buttons**: View cart and checkout buttons +- **Empty State**: Friendly message when cart is empty + +### Mobile Responsiveness +- **Touch Targets**: 48px on mobile, 44px on desktop (WCAG compliant) +- **Flexible Layout**: Adapts to different screen sizes +- **Stacked Layout**: Products stack vertically on mobile +- **Full-Width Actions**: Buttons expand to full width on small screens + +### Responsive Breakpoints + +#### Mobile (< 576px) +- Vertical product layout +- Full-width product images (max 200px centered) +- Stacked action buttons +- 48px minimum touch targets +- Increased padding for comfortable touch + +#### Tablet (576px - 767px) +- Side-by-side product details +- Inline action buttons begin to appear +- 44px touch targets + +#### Desktop (≥ 768px) +- Horizontal action button layout +- Optimized spacing and alignment +- Enhanced hover effects + +## Module Parameters + +All standard mod_virtuemart_cart parameters are supported: + +- **show_price**: Display product prices (default: Yes) +- **show_product_list**: Display list of products in cart (default: Yes) +- **moduleclass_sfx**: Custom CSS class suffix + +## HTML Structure + +``` +.mod-vm-cart-responsive + ├── .mod-vm-cart__header (if items in cart) + │ ├── .mod-vm-cart__icon + │ └── .mod-vm-cart__summary + │ ├── .mod-vm-cart__count + │ └── .mod-vm-cart__total + ├── .mod-vm-cart__products (if show_product_list) + │ └── .mod-vm-cart__product (foreach product) + │ ├── .mod-vm-cart__product-image + │ ├── .mod-vm-cart__product-details + │ │ ├── .mod-vm-cart__product-name + │ │ ├── .mod-vm-cart__product-quantity + │ │ └── .mod-vm-cart__product-price + │ └── .mod-vm-cart__product-remove + └── .mod-vm-cart__actions + ├── .mod-vm-cart__btn--view + └── .mod-vm-cart__btn--checkout +``` + +## CSS Classes + +### Main Container +- `.mod-vm-cart-responsive` - Main wrapper with responsive styles + +### Header Section +- `.mod-vm-cart__header` - Cart summary container +- `.mod-vm-cart__icon` - Shopping basket icon +- `.mod-vm-cart__summary` - Summary information wrapper +- `.mod-vm-cart__count` - Number of items +- `.mod-vm-cart__total` - Total price display + +### Product List +- `.mod-vm-cart__products` - Products container +- `.mod-vm-cart__product` - Individual product card +- `.mod-vm-cart__product-image` - Product image container +- `.mod-vm-cart__product-details` - Product information +- `.mod-vm-cart__product-name` - Product title +- `.mod-vm-cart__product-quantity` - Quantity display +- `.mod-vm-cart__product-price` - Price display +- `.mod-vm-cart__product-remove` - Remove button container +- `.mod-vm-cart__remove-btn` - Delete button + +### Actions +- `.mod-vm-cart__actions` - Action buttons container +- `.mod-vm-cart__btn` - Base button class +- `.mod-vm-cart__btn--view` - View cart button +- `.mod-vm-cart__btn--checkout` - Checkout button + +### Empty State +- `.mod-vm-cart__empty` - Empty cart container +- `.mod-vm-cart__empty-icon` - Empty state icon +- `.mod-vm-cart__empty-text` - Empty state message + +## CSS Variables Used + +```css +--vm-surface /* Background colors */ +--vm-surface-2 /* Alternative background */ +--vm-text /* Main text color */ +--vm-text-strong /* Strong emphasis text */ +--vm-text-muted /* Muted/secondary text */ +--vm-border /* Border colors */ +--vm-price-color /* Price display color */ +--vm-block-radius /* Border radius */ +--vm-block-shadow /* Box shadow */ +--vm-btn-primary-bg /* Primary button background */ +--vm-btn-primary-text /* Primary button text */ +--vm-btn-padding-y /* Button vertical padding */ +--vm-btn-padding-x /* Button horizontal padding */ +--vm-btn-radius /* Button border radius */ +--danger /* Delete button color */ +``` + +## Accessibility Features + +- ✅ ARIA label on remove buttons with product name +- ✅ Proper semantic HTML structure +- ✅ Icon elements marked with `aria-hidden="true"` +- ✅ Keyboard navigation support +- ✅ Focus indicators on interactive elements +- ✅ Touch-friendly target sizes +- ✅ Color contrast compliance + +## Customization Examples + +### Adjust Cart Width +```css +.mod-vm-cart-responsive { + max-width: 400px; + margin: 0 auto; +} +``` + +### Customize Product Card Spacing +```css +.mod-vm-cart__products { + gap: 1.5rem; +} +``` + +### Change Button Layout +```css +@media (min-width: 768px) { + .mod-vm-cart__actions { + flex-direction: column; + gap: 1rem; + } +} +``` + +### Style Empty State +```css +.mod-vm-cart__empty { + padding: 3rem 1.5rem; + background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); +} +``` + +## Integration with VirtueMart + +This override works seamlessly with: +- VirtueMart 3.x and 4.x +- Standard VirtueMart cart functionality +- AJAX cart updates (if configured) +- Multiple currency support +- Tax calculations + +## Browser Compatibility + +- ✅ Modern browsers (Chrome, Firefox, Safari, Edge) +- ✅ iOS Safari (no zoom on input/button touch) +- ✅ Android Chrome +- ✅ Touch and mouse input +- ✅ All screen sizes from 320px+ + +## Testing Checklist + +- [ ] Add products to cart +- [ ] Verify item count updates +- [ ] Test remove button functionality +- [ ] Check price calculations +- [ ] Verify cart view link works +- [ ] Test checkout button redirect +- [ ] Check empty cart state +- [ ] Test on mobile device (< 576px) +- [ ] Test on tablet (576px - 767px) +- [ ] Test on desktop (≥ 768px) +- [ ] Verify touch targets are adequate +- [ ] Test with screen reader +- [ ] Check keyboard navigation + +## License + +Copyright (C) 2025 Moko Consulting +Licensed under GNU General Public License version 2 or later diff --git a/src/templates/html/mod_virtuemart_category/README.md b/src/templates/html/mod_virtuemart_category/README.md new file mode 100644 index 0000000..04682eb --- /dev/null +++ b/src/templates/html/mod_virtuemart_category/README.md @@ -0,0 +1,57 @@ +# mod_virtuemart_category Mobile Responsive Override + +## Overview +Mobile-responsive category navigation with hierarchical structure, optional images, product counts, and active state highlighting. + +## Key Features +- Hierarchical category/subcategory display +- Optional category images (40x40px) +- Product count badges +- Active page highlighting +- Touch-friendly links (48px mobile, 44px desktop) +- Collapsible subcategory lists + +## Responsive Features +- Full-width category links on mobile +- Indented subcategory lists +- Active state styling +- Hover effects + +## Module Parameters Supported +- `show_images` - Display category images +- `show_description` - Show category descriptions +- `show_product_count` - Display product counts +- `moduleclass_sfx` - Custom CSS suffix + +## CSS Classes +- `.mod-vm-category-responsive` - Main container +- `.mod-vm-category__nav` - Navigation element +- `.mod-vm-category__list` - Main category list +- `.mod-vm-category__item` - Category item +- `.mod-vm-category__link` - Category link +- `.mod-vm-category__link--active` - Active category +- `.mod-vm-category__sublist` - Subcategory list +- `.mod-vm-category__sublink` - Subcategory link + +## Customization Example +```css +.mod-vm-category__link { + border-radius: 10px; + padding: 1rem; +} + +.mod-vm-category__image { + width: 50px; + height: 50px; +} +``` + +## Accessibility +- Semantic navigation element +- `aria-current="page"` on active items +- ARIA labels for navigation +- Keyboard navigation support + +## License +Copyright (C) 2025 Moko Consulting +GNU General Public License version 2 or later diff --git a/src/templates/html/mod_virtuemart_currencies/README.md b/src/templates/html/mod_virtuemart_currencies/README.md new file mode 100644 index 0000000..00f8ef4 --- /dev/null +++ b/src/templates/html/mod_virtuemart_currencies/README.md @@ -0,0 +1,50 @@ +# mod_virtuemart_currencies Mobile Responsive Override + +## Overview +Mobile-responsive currency selector with custom-styled dropdown, touch-friendly controls, and automatic form submission on change. + +## Key Features +- Custom styled select dropdown with icon +- 16px font size on mobile (prevents iOS zoom) +- Auto-submit on currency change (JavaScript) +- Fallback submit button for no-JS users +- Full keyboard accessibility + +## Responsive Features + +| Screen Size | Input Height | Font Size | +|------------|--------------|-----------| +| Mobile (< 576px) | 48px | 16px | +| Desktop (≥ 768px) | 44px | 1rem | + +## Module Parameters Supported +- `text_before` - Text displayed before selector +- `text_after` - Text displayed after selector +- `moduleclass_sfx` - Custom CSS suffix + +## CSS Classes +- `.mod-vm-currencies-responsive` - Main container +- `.mod-vm-currencies__form` - Form element +- `.mod-vm-currencies__label` - Label text +- `.mod-vm-currencies__select-wrapper` - Select container +- `.mod-vm-currencies__select` - Dropdown element +- `.mod-vm-currencies__icon` - Chevron icon +- `.mod-vm-currencies__submit` - Submit button (no-JS) + +## Customization Example +```css +.mod-vm-currencies__select { + border-radius: 25px; + padding: 0.75rem 3rem 0.75rem 1.5rem; +} +``` + +## Accessibility +- Proper label association +- ARIA labels for screen readers +- Keyboard navigation support +- Focus indicators + +## License +Copyright (C) 2025 Moko Consulting +GNU General Public License version 2 or later diff --git a/src/templates/html/mod_virtuemart_manufacturer/README.md b/src/templates/html/mod_virtuemart_manufacturer/README.md new file mode 100644 index 0000000..045860f --- /dev/null +++ b/src/templates/html/mod_virtuemart_manufacturer/README.md @@ -0,0 +1,59 @@ +# mod_virtuemart_manufacturer Mobile Responsive Override + +## Overview +Mobile-responsive manufacturer display with grid/list layouts, logo images, and responsive card designs. + +## Key Features +- Grid or list display modes +- Responsive manufacturer cards +- Logo/image display with aspect ratio control +- Manufacturer descriptions +- Hover effects and transitions + +## Responsive Layouts + +| Screen Size | Grid Mode | List Mode | +|------------|-----------|-----------| +| Mobile (< 576px) | 1 column | 1 column | +| Tablet (576px - 767px) | 2 columns | 1 column | +| Desktop (768px - 991px) | 3 columns | 1 column | +| Large Desktop (≥ 992px) | 4 columns | 1 column | + +## Module Parameters Supported +- `show_images` - Display manufacturer logos +- `display_style` - Layout mode (list/grid) +- `moduleclass_sfx` - Custom CSS suffix + +## CSS Classes +- `.mod-vm-manufacturer-responsive` - Main container +- `.mod-vm-manufacturer__container` - Grid/list container +- `.mod-vm-manufacturer__container--list` - List layout +- `.mod-vm-manufacturer__container--grid` - Grid layout +- `.mod-vm-manufacturer__item` - Manufacturer card +- `.mod-vm-manufacturer__link` - Clickable link +- `.mod-vm-manufacturer__image` - Logo container +- `.mod-vm-manufacturer__name` - Manufacturer name +- `.mod-vm-manufacturer__description` - Description text + +## Customization Example +```css +.mod-vm-manufacturer__image { + aspect-ratio: 1/1; + border-radius: 50%; +} + +.mod-vm-manufacturer__container--grid { + gap: 2rem; +} +``` + +## Accessibility +- Proper link structure +- Title attributes on links +- Semantic HTML +- Keyboard navigation +- Focus indicators + +## License +Copyright (C) 2025 Moko Consulting +GNU General Public License version 2 or later diff --git a/src/templates/html/mod_virtuemart_product/README.md b/src/templates/html/mod_virtuemart_product/README.md new file mode 100644 index 0000000..b6ad18e --- /dev/null +++ b/src/templates/html/mod_virtuemart_product/README.md @@ -0,0 +1,50 @@ +# mod_virtuemart_product Mobile Responsive Override + +## Overview +Mobile-responsive override for VirtueMart's product display module featuring grid/list layouts, responsive product cards, and touch-friendly controls. + +## Key Features +- Responsive grid layout (1-4 columns based on screen size) +- Product card with image, title, description, price +- Touch-friendly action buttons (48px mobile, 44px desktop) +- Availability badges +- Add to cart functionality + +## Responsive Layouts + +| Screen Size | Grid Columns | +|------------|--------------| +| Mobile (< 576px) | 1 column | +| Tablet (576px - 767px) | 2 columns | +| Desktop (768px - 991px) | 3 columns | +| Large Desktop (≥ 992px) | 4 columns | + +## Module Parameters Supported +- `headerText` - Header text above products +- `display_style` - Layout style (div, list) +- `moduleclass_sfx` - Custom CSS suffix + +## CSS Classes +- `.mod-vm-product-responsive` - Main container +- `.mod-vm-product__list` - Products grid +- `.mod-vm-product__item` - Product card +- `.mod-vm-product__image` - Product image +- `.mod-vm-product__title` - Product name +- `.mod-vm-product__description` - Short description +- `.mod-vm-product__price` - Price display +- `.mod-vm-product__actions` - Action buttons + +## Customization Example +```css +.mod-vm-product__list { + gap: 2rem; +} + +.mod-vm-product__item { + border-radius: 1rem; +} +``` + +## License +Copyright (C) 2025 Moko Consulting +GNU General Public License version 2 or later From 0c6a35f9bd9b6abf86f35cd8675e1c0688805450 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sun, 22 Feb 2026 22:27:02 +0000 Subject: [PATCH 05/14] Add mobile responsive overrides for standard Joomla and Community Builder modules Co-authored-by: jmiller-moko <230051081+jmiller-moko@users.noreply.github.com> --- src/media/css/template.css | 596 ++++++++++++++++++ .../html/mod_articles_latest/default.php | 100 +++ .../html/mod_articles_latest/index.html | 1 + .../html/mod_breadcrumbs/default.php | 63 ++ src/templates/html/mod_breadcrumbs/index.html | 1 + src/templates/html/mod_cblogin/default.php | 159 +++++ src/templates/html/mod_cblogin/index.html | 1 + .../html/mod_comprofilerOnline/default.php | 94 +++ .../html/mod_comprofilerOnline/index.html | 1 + src/templates/html/mod_login/default.php | 168 +++++ src/templates/html/mod_login/index.html | 1 + src/templates/html/mod_menu/default.php | 40 ++ .../html/mod_menu/default_component.php | 14 + src/templates/html/mod_menu/default_url.php | 52 ++ src/templates/html/mod_menu/index.html | 1 + 15 files changed, 1292 insertions(+) create mode 100644 src/templates/html/mod_articles_latest/default.php create mode 100644 src/templates/html/mod_articles_latest/index.html create mode 100644 src/templates/html/mod_breadcrumbs/default.php create mode 100644 src/templates/html/mod_breadcrumbs/index.html create mode 100644 src/templates/html/mod_cblogin/default.php create mode 100644 src/templates/html/mod_cblogin/index.html create mode 100644 src/templates/html/mod_comprofilerOnline/default.php create mode 100644 src/templates/html/mod_comprofilerOnline/index.html create mode 100644 src/templates/html/mod_login/default.php create mode 100644 src/templates/html/mod_login/index.html create mode 100644 src/templates/html/mod_menu/default.php create mode 100644 src/templates/html/mod_menu/default_component.php create mode 100644 src/templates/html/mod_menu/default_url.php create mode 100644 src/templates/html/mod_menu/index.html diff --git a/src/media/css/template.css b/src/media/css/template.css index fb47055..d469074 100644 --- a/src/media/css/template.css +++ b/src/media/css/template.css @@ -19349,3 +19349,599 @@ nav[data-toggle=toc] .nav-link.active+ul{ grid-template-columns: repeat(4, 1fr); } } + +/* ===== STANDARD JOOMLA & COMMUNITY BUILDER MODULE STYLES ===== */ + +/* === mod_menu === */ +.mod-menu-responsive { + width: 100%; +} + +.mod-menu__heading { + margin-bottom: 1rem; + font-weight: 600; +} + +/* === mod_breadcrumbs === */ +.mod-breadcrumbs-responsive { + width: 100%; + padding: 0.75rem 0; +} + +.mod-breadcrumbs__prefix { + font-weight: 600; + margin-right: 0.5rem; + color: var(--body-color); +} + +.mod-breadcrumbs__list { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + list-style: none; + padding: 0; + margin: 0; + align-items: center; +} + +.mod-breadcrumbs__item { + display: flex; + align-items: center; +} + +.mod-breadcrumbs__item:not(:last-child)::after { + content: "/"; + margin-left: 0.5rem; + color: var(--gray-500); +} + +.mod-breadcrumbs__link { + color: var(--link-color); + text-decoration: none; + transition: color 0.2s; +} + +.mod-breadcrumbs__link:hover { + color: var(--link-hover-color); + text-decoration: underline; +} + +.mod-breadcrumbs__current { + color: var(--body-color); + font-weight: 600; +} + +.mod-breadcrumbs__item--home .icon-home { + font-size: 1.25rem; +} + +/* === mod_login === */ +.mod-login-responsive { + width: 100%; +} + +.mod-login__form { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.mod-login__greeting { + padding: 1rem; + background: var(--secondary-bg); + border-radius: var(--border-radius); + margin-bottom: 1rem; + font-weight: 600; +} + +.mod-login__pretext, +.mod-login__posttext { + font-size: 0.875rem; + color: var(--gray-600); + line-height: 1.6; +} + +.mod-login__fields { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.mod-login__field { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.mod-login__label { + font-weight: 600; + font-size: 0.875rem; + color: var(--body-color); +} + +.mod-login__input { + padding: 0.5rem 0.75rem; + font-size: 1rem; + line-height: 1.5; + border: 1px solid var(--input-border-color, #dee2e6); + border-radius: var(--border-radius); + background: var(--input-bg, #fff); + color: var(--input-color, #212529); + min-height: 44px; +} + +.mod-login__input:focus { + border-color: var(--color-primary); + outline: 0; + box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); +} + +.mod-login__remember { + display: flex; + align-items: center; + gap: 0.5rem; +} + +.mod-login__checkbox { + width: 20px; + height: 20px; + cursor: pointer; +} + +.mod-login__remember-label { + font-size: 0.875rem; + cursor: pointer; + margin: 0; +} + +.mod-login__actions { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.mod-login__btn { + padding: 0.625rem 1rem; + font-size: 1rem; + font-weight: 600; + border-radius: var(--border-radius); + min-height: 44px; + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + transition: all 0.2s; + border: none; + cursor: pointer; +} + +.mod-login__links { + display: flex; + flex-direction: column; + gap: 0.5rem; + margin-top: 0.5rem; +} + +.mod-login__link { + color: var(--link-color); + text-decoration: none; + font-size: 0.875rem; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0.5rem; + border-radius: var(--border-radius); + transition: background 0.2s; +} + +.mod-login__link:hover { + background: var(--secondary-bg); + color: var(--link-hover-color); +} + +/* === mod_articles_latest === */ +.mod-articles-latest-responsive { + width: 100%; +} + +.mod-articles-latest__list { + list-style: none; + padding: 0; + margin: 0; + display: flex; + flex-direction: column; + gap: 1.5rem; +} + +.mod-articles-latest__item { + padding-bottom: 1.5rem; + border-bottom: 1px solid var(--border-color); +} + +.mod-articles-latest__item:last-child { + border-bottom: none; + padding-bottom: 0; +} + +.mod-articles-latest__title { + margin: 0 0 0.75rem 0; + font-weight: 600; + line-height: 1.4; +} + +.mod-articles-latest__link { + color: var(--body-color); + text-decoration: none; + transition: color 0.2s; +} + +.mod-articles-latest__link:hover { + color: var(--color-primary); + text-decoration: underline; +} + +.mod-articles-latest__meta { + display: flex; + flex-wrap: wrap; + gap: 1rem; + font-size: 0.875rem; + color: var(--gray-600); + margin-bottom: 0.75rem; +} + +.mod-articles-latest__meta > span { + display: flex; + align-items: center; + gap: 0.25rem; +} + +.mod-articles-latest__intro { + color: var(--body-color); + line-height: 1.6; + margin-bottom: 1rem; +} + +.mod-articles-latest__readmore { + margin-top: 1rem; +} + +.mod-articles-latest__readmore-link { + display: inline-flex; + align-items: center; + gap: 0.5rem; + min-height: 44px; +} + +.mod-articles-latest__empty { + text-align: center; + padding: 2rem 1rem; + background: var(--secondary-bg); + border-radius: var(--border-radius); + color: var(--gray-600); +} + +/* === mod_cblogin (Community Builder) === */ +.mod-cblogin-responsive { + width: 100%; +} + +.mod-cblogin__form { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.mod-cblogin__greeting { + display: flex; + align-items: center; + gap: 1rem; + padding: 1rem; + background: var(--secondary-bg); + border-radius: var(--border-radius); + margin-bottom: 1rem; +} + +.mod-cblogin__avatar { + flex-shrink: 0; + width: 60px; + height: 60px; + border-radius: 50%; + overflow: hidden; +} + +.mod-cblogin__avatar img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.mod-cblogin__user-info { + flex: 1; +} + +.mod-cblogin__username { + font-weight: 600; + font-size: 1.125rem; +} + +.mod-cblogin__pretext, +.mod-cblogin__posttext { + font-size: 0.875rem; + color: var(--gray-600); + line-height: 1.6; +} + +.mod-cblogin__fields { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.mod-cblogin__field { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.mod-cblogin__label { + font-weight: 600; + font-size: 0.875rem; + color: var(--body-color); +} + +.mod-cblogin__input { + padding: 0.5rem 0.75rem; + font-size: 1rem; + line-height: 1.5; + border: 1px solid var(--input-border-color, #dee2e6); + border-radius: var(--border-radius); + background: var(--input-bg, #fff); + color: var(--input-color, #212529); + min-height: 44px; +} + +.mod-cblogin__input:focus { + border-color: var(--color-primary); + outline: 0; + box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); +} + +.mod-cblogin__remember { + display: flex; + align-items: center; + gap: 0.5rem; +} + +.mod-cblogin__checkbox { + width: 20px; + height: 20px; + cursor: pointer; +} + +.mod-cblogin__remember-label { + font-size: 0.875rem; + cursor: pointer; + margin: 0; +} + +.mod-cblogin__actions { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.mod-cblogin__btn { + padding: 0.625rem 1rem; + font-size: 1rem; + font-weight: 600; + border-radius: var(--border-radius); + min-height: 44px; + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + transition: all 0.2s; + border: none; + cursor: pointer; + text-decoration: none; +} + +.mod-cblogin__links { + display: flex; + flex-direction: column; + gap: 0.5rem; + margin-top: 0.5rem; +} + +.mod-cblogin__link { + color: var(--link-color); + text-decoration: none; + font-size: 0.875rem; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0.5rem; + border-radius: var(--border-radius); + transition: background 0.2s; +} + +.mod-cblogin__link:hover { + background: var(--secondary-bg); + color: var(--link-hover-color); +} + +/* === mod_comprofilerOnline (Community Builder) === */ +.mod-cb-online-responsive { + width: 100%; +} + +.mod-cb-online__stats { + padding: 1rem; + background: var(--secondary-bg); + border-radius: var(--border-radius); + margin-bottom: 1.5rem; +} + +.mod-cb-online__count { + display: flex; + flex-direction: column; + align-items: center; + margin-bottom: 1rem; +} + +.mod-cb-online__count-number { + font-size: 2.5rem; + font-weight: 700; + color: var(--color-primary); + line-height: 1; +} + +.mod-cb-online__count-label { + font-size: 0.875rem; + color: var(--gray-600); + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.mod-cb-online__breakdown { + display: flex; + justify-content: center; + gap: 1.5rem; + flex-wrap: wrap; +} + +.mod-cb-online__breakdown-item { + display: flex; + align-items: center; + gap: 0.5rem; + font-size: 0.875rem; + color: var(--body-color); +} + +.mod-cb-online__heading { + font-size: 1.125rem; + font-weight: 600; + margin: 0 0 1rem 0; +} + +.mod-cb-online__list { + list-style: none; + padding: 0; + margin: 0; + display: flex; + flex-direction: column; + gap: 0.75rem; +} + +.mod-cb-online__user { + display: flex; + align-items: center; + gap: 0.75rem; + padding: 0.75rem; + background: var(--body-bg); + border: 1px solid var(--border-color); + border-radius: var(--border-radius); + transition: all 0.2s; +} + +.mod-cb-online__user:hover { + background: var(--secondary-bg); + border-color: var(--color-primary); +} + +.mod-cb-online__avatar { + flex-shrink: 0; + width: 40px; + height: 40px; + border-radius: 50%; + overflow: hidden; +} + +.mod-cb-online__avatar img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.mod-cb-online__info { + flex: 1; + min-width: 0; +} + +.mod-cb-online__name { + font-weight: 600; + color: var(--body-color); + text-decoration: none; + display: block; + margin-bottom: 0.25rem; +} + +.mod-cb-online__name:hover { + color: var(--color-primary); +} + +.mod-cb-online__status { + font-size: 0.875rem; + color: var(--gray-600); + display: block; +} + +.mod-cb-online__indicator { + flex-shrink: 0; + color: var(--success); + font-size: 1.25rem; +} + +.mod-cb-online__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) { + /* Login modules */ + .mod-login__input, + .mod-cblogin__input { + font-size: 16px; + min-height: 48px; + padding: 0.75rem 1rem; + } + + .mod-login__btn, + .mod-cblogin__btn { + min-height: 48px; + padding: 0.75rem 1rem; + } + + .mod-articles-latest__meta { + flex-direction: column; + gap: 0.5rem; + } + + .mod-cb-online__breakdown { + flex-direction: column; + gap: 0.75rem; + } +} + +/* Tablet and desktop enhancements */ +@media (min-width: 768px) { + .mod-login__actions, + .mod-cblogin__actions { + flex-direction: row; + } + + .mod-cb-online__stats { + display: flex; + align-items: center; + justify-content: space-between; + } + + .mod-cb-online__count { + margin-bottom: 0; + align-items: flex-start; + } +} diff --git a/src/templates/html/mod_articles_latest/default.php b/src/templates/html/mod_articles_latest/default.php new file mode 100644 index 0000000..a570677 --- /dev/null +++ b/src/templates/html/mod_articles_latest/default.php @@ -0,0 +1,100 @@ + + * @license GNU General Public License version 2 or later; see LICENSE.txt + * + * Mobile responsive override for mod_articles_latest 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-articles-latest mod-articles-latest-responsive ' . $moduleclass_sfx; +?> + +
+ +
    + +
  • + get('show_introtext', 0) && !empty($item->introtext)) : ?> +
    + get('item_heading', 4); ?> class="mod-articles-latest__title" itemprop="headline"> + get('link_titles', 1)) : ?> + + + title, ENT_COMPAT, 'UTF-8'); ?> + + get('item_heading', 4); ?>> + + get('show_author', 0) || $params->get('show_date', 0) || $params->get('show_category', 0) || $params->get('show_hits', 0)) : ?> +
    + get('show_author', 0)) : ?> + + + + get('show_date', 0)) : ?> + + + + + + + get('show_category', 0)) : ?> + + + displayCategoryTitle; ?> + + + + get('show_hits', 0)) : ?> + + + displayHits; ?> + + +
    + + +
    + introtext; ?> +
    + + get('readmore', 0)) : ?> +
    + + + + +
    + +
    + + + +
    • + +
+ +
+

+
+ +
diff --git a/src/templates/html/mod_articles_latest/index.html b/src/templates/html/mod_articles_latest/index.html new file mode 100644 index 0000000..09b7ab1 --- /dev/null +++ b/src/templates/html/mod_articles_latest/index.html @@ -0,0 +1 @@ + diff --git a/src/templates/html/mod_breadcrumbs/default.php b/src/templates/html/mod_breadcrumbs/default.php new file mode 100644 index 0000000..413df37 --- /dev/null +++ b/src/templates/html/mod_breadcrumbs/default.php @@ -0,0 +1,63 @@ + + * @license GNU General Public License version 2 or later; see LICENSE.txt + * + * Mobile responsive override for mod_breadcrumbs 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-breadcrumbs mod-breadcrumbs-responsive ' . $moduleclass_sfx; +?> + + diff --git a/src/templates/html/mod_breadcrumbs/index.html b/src/templates/html/mod_breadcrumbs/index.html new file mode 100644 index 0000000..09b7ab1 --- /dev/null +++ b/src/templates/html/mod_breadcrumbs/index.html @@ -0,0 +1 @@ + diff --git a/src/templates/html/mod_cblogin/default.php b/src/templates/html/mod_cblogin/default.php new file mode 100644 index 0000000..9348fda --- /dev/null +++ b/src/templates/html/mod_cblogin/default.php @@ -0,0 +1,159 @@ + + * @license GNU General Public License version 2 or later; see LICENSE.txt + * + * Mobile responsive override for mod_cblogin 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-cblogin mod-cblogin-responsive ' . $moduleclass_sfx; +?> + +
+ +
+ get('greeting', 1)) : ?> +
+ +
+ getField('avatar', null, 'html', 'none', 'list'); ?> +
+ + +
+ + +
+
+ get('profileLink', 1) && $cbUser) : ?> + + + + + + + +
+ + + + +
+
+ + + +
diff --git a/src/templates/html/mod_cblogin/index.html b/src/templates/html/mod_cblogin/index.html new file mode 100644 index 0000000..09b7ab1 --- /dev/null +++ b/src/templates/html/mod_cblogin/index.html @@ -0,0 +1 @@ + diff --git a/src/templates/html/mod_comprofilerOnline/default.php b/src/templates/html/mod_comprofilerOnline/default.php new file mode 100644 index 0000000..f595861 --- /dev/null +++ b/src/templates/html/mod_comprofilerOnline/default.php @@ -0,0 +1,94 @@ + + * @license GNU General Public License version 2 or later; see LICENSE.txt + * + * Mobile responsive override for mod_comprofilerOnline 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-cb-online mod-cb-online-responsive ' . $moduleclass_sfx; +?> + +
+ +
+
+ + + + +
+ + get('show_guest_count', 1)) : ?> +
+ + + + + + + + +
+ +
+ + get('show_user_list', 1) && !empty($onlineUsers)) : ?> +
+ get('header_level', 3); ?> class="mod-cb-online__heading"> + + get('header_level', 3); ?>> + +
    + +
  • + get('show_avatar', 1) && !empty($user->avatar)) : ?> +
    + avatar; ?> +
    + + +
    + get('link_names', 1) && !empty($user->link)) : ?> + + name, ENT_COMPAT, 'UTF-8'); ?> + + + + name, ENT_COMPAT, 'UTF-8'); ?> + + + + get('show_status', 1) && !empty($user->status)) : ?> + + status, ENT_COMPAT, 'UTF-8'); ?> + + +
    + + get('show_online_icon', 1)) : ?> + + + + +
    • + +
+
+ + +
+

+
+ +
diff --git a/src/templates/html/mod_comprofilerOnline/index.html b/src/templates/html/mod_comprofilerOnline/index.html new file mode 100644 index 0000000..09b7ab1 --- /dev/null +++ b/src/templates/html/mod_comprofilerOnline/index.html @@ -0,0 +1 @@ + diff --git a/src/templates/html/mod_login/default.php b/src/templates/html/mod_login/default.php new file mode 100644 index 0000000..3da001e --- /dev/null +++ b/src/templates/html/mod_login/default.php @@ -0,0 +1,168 @@ + + * @license GNU General Public License version 2 or later; see LICENSE.txt + * + * Mobile responsive override for mod_login module + */ + +defined('_JEXEC') or die; + +use Joomla\CMS\Component\ComponentHelper; +use Joomla\CMS\HTML\HTMLHelper; +use Joomla\CMS\Language\Text; +use Joomla\CMS\Router\Route; + +HTMLHelper::_('behavior.keepalive'); +HTMLHelper::_('bootstrap.tooltip', '.hasTooltip'); + +$usersConfig = ComponentHelper::getParams('com_users'); +$moduleclass_sfx = htmlspecialchars($params->get('moduleclass_sfx', ''), ENT_COMPAT, 'UTF-8'); + +// Add responsive wrapper class +$wrapperClass = 'mod-login mod-login-responsive ' . $moduleclass_sfx; +?> + +
+ + + + + +
diff --git a/src/templates/html/mod_login/index.html b/src/templates/html/mod_login/index.html new file mode 100644 index 0000000..09b7ab1 --- /dev/null +++ b/src/templates/html/mod_login/index.html @@ -0,0 +1 @@ + diff --git a/src/templates/html/mod_menu/default.php b/src/templates/html/mod_menu/default.php new file mode 100644 index 0000000..92e1df9 --- /dev/null +++ b/src/templates/html/mod_menu/default.php @@ -0,0 +1,40 @@ + + * @license GNU General Public License version 2 or later; see LICENSE.txt + * + * Mobile responsive override for mod_menu module + */ + +defined('_JEXEC') or die; + +use Joomla\CMS\Helper\ModuleHelper; + +$id = ''; + +if ($tagId = $params->get('tag_id', '')) { + $id = ' id="' . $tagId . '"'; +} + +// The menu class is deprecated. Use mod-menu instead +$moduleclass_sfx = htmlspecialchars($params->get('moduleclass_sfx', ''), ENT_COMPAT, 'UTF-8'); + +// Add responsive wrapper class +$wrapperClass = 'mod-menu mod-menu-responsive ' . $moduleclass_sfx; + +if ($params->get('layout', 'default') === 'default') { + $wrapperClass .= ' mod-menu--default'; +} +?> + diff --git a/src/templates/html/mod_menu/default_component.php b/src/templates/html/mod_menu/default_component.php new file mode 100644 index 0000000..68ca54e --- /dev/null +++ b/src/templates/html/mod_menu/default_component.php @@ -0,0 +1,14 @@ + + * @license GNU General Public License version 2 or later; see LICENSE.txt + * + * Mobile responsive component for mod_menu + */ + +defined('_JEXEC') or die; +?> +title; ?> diff --git a/src/templates/html/mod_menu/default_url.php b/src/templates/html/mod_menu/default_url.php new file mode 100644 index 0000000..43cc450 --- /dev/null +++ b/src/templates/html/mod_menu/default_url.php @@ -0,0 +1,52 @@ + + * @license GNU General Public License version 2 or later; see LICENSE.txt + * + * Mobile responsive menu list for mod_menu + */ + +defined('_JEXEC') or die; + +use Joomla\CMS\HTML\HTMLHelper; + +$attributes = []; + +if ($item->anchor_title) { + $attributes['title'] = $item->anchor_title; +} + +if ($item->anchor_css) { + $attributes['class'] = $item->anchor_css; +} + +if ($item->anchor_rel) { + $attributes['rel'] = $item->anchor_rel; +} + +$linktype = $item->title; + +if ($item->menu_image) { + if ($item->menu_image_css) { + $image_attributes['class'] = $item->menu_image_css; + $linktype = HTMLHelper::_('image', $item->menu_image, $item->title, $image_attributes); + } else { + $linktype = HTMLHelper::_('image', $item->menu_image, $item->title); + } + + if ($item->params->get('menu_text', 1)) { + $linktype .= '' . $item->title . ''; + } +} + +if ($item->browserNav == 1) { + $attributes['target'] = '_blank'; +} elseif ($item->browserNav == 2) { + $options = 'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes'; + $attributes['onclick'] = "window.open(this.href, 'targetWindow', '" . $options . "'); return false;"; +} + +echo HTMLHelper::_('link', $item->flink, $linktype, $attributes); diff --git a/src/templates/html/mod_menu/index.html b/src/templates/html/mod_menu/index.html new file mode 100644 index 0000000..09b7ab1 --- /dev/null +++ b/src/templates/html/mod_menu/index.html @@ -0,0 +1 @@ + From 5e9a9a117085da5b3b8d0672cbe8ae1d5ac562b0 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sun, 22 Feb 2026 22:28:53 +0000 Subject: [PATCH 06/14] Fix typos in login module IDs and add comprehensive documentation Co-authored-by: jmiller-moko <230051081+jmiller-moko@users.noreply.github.com> --- src/templates/html/STANDARD_MODULES_README.md | 253 ++++++++++++++++++ src/templates/html/mod_cblogin/default.php | 4 +- src/templates/html/mod_login/default.php | 4 +- 3 files changed, 257 insertions(+), 4 deletions(-) create mode 100644 src/templates/html/STANDARD_MODULES_README.md diff --git a/src/templates/html/STANDARD_MODULES_README.md b/src/templates/html/STANDARD_MODULES_README.md new file mode 100644 index 0000000..508c8ec --- /dev/null +++ b/src/templates/html/STANDARD_MODULES_README.md @@ -0,0 +1,253 @@ +# Standard Joomla & Community Builder Module Mobile Responsive Overrides + +## Overview +This directory contains mobile-responsive overrides for standard Joomla and Community Builder modules, designed specifically for the MokoCassiopeia template. + +## Standard Joomla Modules + +### 1. mod_menu +Main navigation menu module with: +- Responsive navigation structure +- BEM naming for easy styling +- Support for all menu types +- Semantic HTML5 nav element +- Accessibility-friendly with ARIA labels + +### 2. mod_breadcrumbs +Breadcrumb navigation module featuring: +- Schema.org structured data +- Responsive breadcrumb trail +- Home icon support +- Active page highlighting +- Touch-friendly links + +### 3. mod_login +User login form module with: +- Login and logout states +- Two-factor authentication support +- Remember me functionality +- Password recovery links +- User registration links +- Touch-friendly form inputs (48px on mobile) +- 16px input font (prevents iOS zoom) + +### 4. mod_articles_latest +Latest articles display module offering: +- Responsive article cards +- Optional metadata display (author, date, category, hits) +- Schema.org Article markup +- Introtext support +- Read more links +- Touch-friendly interactions + +## Community Builder Modules + +### 5. mod_cblogin +Community Builder login module with: +- Avatar display in logged-in state +- Profile link button +- Touch-friendly form controls +- Remember me checkbox +- Password/username recovery links +- Registration link +- Pre/post text support + +### 6. mod_comprofilerOnline +Community Builder online users module featuring: +- Online user count display +- Members vs. guests breakdown +- User list with avatars +- Profile links +- Online status indicators +- Responsive card layouts + +## Mobile Responsive Features + +### Touch Target Sizes (WCAG 2.1 Compliant) +- **Mobile (< 576px):** 48px minimum height +- **Desktop (≥ 768px):** 44px minimum height + +### Font Sizes (iOS Zoom Prevention) +- **Mobile:** 16px base font for inputs (prevents auto-zoom) +- **Desktop:** 1rem (16px typically) + +### Responsive Breakpoints +Using Bootstrap-aligned breakpoints: +- `< 576px` - Mobile (xs) +- `576px - 767px` - Tablet (sm-md) +- `768px+` - Desktop (md+) + +### Layout Adaptations + +#### Mobile (< 576px) +- Stacked form layouts +- Full-width buttons +- Larger touch targets (48px) +- 16px input font size +- Vertical link lists + +#### Tablet & Desktop (≥ 768px) +- Inline button layouts where appropriate +- Horizontal action groups +- Enhanced hover effects +- Optimized spacing + +## CSS Architecture + +### BEM Naming Convention +All modules use Block-Element-Modifier naming: + +```css +.mod-login /* Block */ +.mod-login__input /* Element */ +.mod-login__btn--submit /* Modifier */ +``` + +### CSS Variables Integration +Styles integrate with template's color system: + +```css +--body-color +--link-color +--link-hover-color +--color-primary +--secondary-bg +--border-color +--border-radius +--gray-600 +--success +``` + +## Accessibility Features + +All modules include: +- ✅ Semantic HTML5 elements +- ✅ ARIA labels and landmarks +- ✅ Proper form labeling +- ✅ Keyboard navigation support +- ✅ Screen reader friendly +- ✅ Focus indicators +- ✅ Touch-optimized controls +- ✅ Schema.org structured data (where applicable) + +## Browser Compatibility + +- ✅ Modern browsers (Chrome, Firefox, Safari, Edge) +- ✅ iOS Safari (no zoom on input focus) +- ✅ Android browsers +- ✅ Touch and mouse input +- ✅ All screen sizes (320px+) +- ✅ Portrait and landscape orientations + +## File Structure + +``` +src/templates/html/ +├── mod_menu/ +│ ├── default.php +│ ├── default_url.php +│ ├── default_component.php +│ └── index.html +├── mod_breadcrumbs/ +│ ├── default.php +│ └── index.html +├── mod_login/ +│ ├── default.php +│ └── index.html +├── mod_articles_latest/ +│ ├── default.php +│ └── index.html +├── mod_cblogin/ +│ ├── default.php +│ └── index.html +└── mod_comprofilerOnline/ + ├── default.php + └── index.html +``` + +## Usage + +These overrides are automatically used when: +1. The MokoCassiopeia template is active +2. The respective modules are published +3. No additional configuration required beyond standard module settings + +## Module Parameters + +All standard Joomla and Community Builder module parameters are fully supported. Each override respects the module's configuration options. + +## Customization + +### Override CSS Variables +```css +:root { + --border-radius: 0.5rem; + --color-primary: #your-color; +} +``` + +### Add Custom Styles +```css +.mod-login-responsive { + max-width: 400px; + margin: 0 auto; +} +``` + +### Modify Templates +Each PHP file can be modified to adjust HTML structure while maintaining mobile responsiveness. + +## Security + +- ✅ index.html security files in all directories +- ✅ Proper input escaping with `htmlspecialchars()` +- ✅ XSS prevention +- ✅ Joomla security best practices (`_JEXEC` check) +- ✅ Form token validation + +## Testing Checklist + +### General Testing +- [ ] Test on mobile device (< 576px) +- [ ] Test on tablet (576px - 767px) +- [ ] Test on desktop (≥ 768px) +- [ ] Verify touch targets are adequate +- [ ] Test with screen reader +- [ ] Check keyboard navigation +- [ ] Verify ARIA labels + +### Module-Specific Testing +- [ ] mod_menu: Test menu types and levels +- [ ] mod_breadcrumbs: Verify breadcrumb trail accuracy +- [ ] mod_login: Test login/logout flows, 2FA +- [ ] mod_articles_latest: Check various parameter combinations +- [ ] mod_cblogin: Test CB login/logout with avatar +- [ ] mod_comprofilerOnline: Verify user list display + +## Documentation + +Each module follows the same pattern established by: +- mod_search override +- VirtueMart module overrides +- Comprehensive documentation +- BEM naming convention +- Mobile-first responsive design + +## Related Documentation + +- `VIRTUEMART_MODULES_README.md` - VirtueMart module overrides +- `docs/CSS_VARIABLES.md` - Complete CSS variables reference +- `docs/ROADMAP.md` - Template development roadmap + +## License + +Copyright (C) 2025 Moko Consulting +Licensed under GNU General Public License version 2 or later + +## Support + +For issues or questions: +- Review module-specific parameters +- Check CSS variables documentation +- Consult Joomla and Community Builder documentation +- Verify module configuration in Joomla admin diff --git a/src/templates/html/mod_cblogin/default.php b/src/templates/html/mod_cblogin/default.php index 9348fda..568ee74 100644 --- a/src/templates/html/mod_cblogin/default.php +++ b/src/templates/html/mod_cblogin/default.php @@ -67,11 +67,11 @@ $wrapperClass = 'mod-cblogin mod-cblogin-responsive ' . $moduleclass_sfx;
-