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] 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 @@ +