MokoCassiopeia/src/templates/html/mod_search/README.md

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:

.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 hello@mokoconsulting.tech Licensed under GNU General Public License version 2 or later