Add mobile-responsive overrides for 20 modules and 7 component views #81

Merged
Copilot merged 14 commits from copilot/make-mod-search-mobile-responsive into main 2026-02-26 15:49:03 +00:00
3 changed files with 109 additions and 6 deletions
Showing only changes of commit f4cfb878d9 - Show all commits

View File

@@ -8,17 +8,58 @@
DEFGROUP: Joomla.Template.Site DEFGROUP: Joomla.Template.Site
INGROUP: MokoCassiopeia.Documentation INGROUP: MokoCassiopeia.Documentation
PATH: ./CHANGELOG.md PATH: ./CHANGELOG.md
VERSION: 03.06.03 VERSION: 03.08.00
BRIEF: Changelog file documenting version history of MokoCassiopeia BRIEF: Changelog file documenting version history of MokoCassiopeia
--> -->
# Changelog — MokoCassiopeia (VERSION: 03.07.00) # Changelog — MokoCassiopeia (VERSION: 03.08.00)
All notable changes to the MokoCassiopeia Joomla template are documented in this file. All notable changes to the MokoCassiopeia Joomla template are documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
## [03.08.00] - 2026-02-22
### Added - Community Builder Component Overrides
Minor version bump adding **4 Community Builder component view overrides** to complement the existing CB module overrides (mod_cblogin, mod_comprofilerOnline).
#### Community Builder Components (4 views)
- **com_comprofiler/userprofile**: User profile display with avatar, tabs, and custom fields in responsive layout
- **com_comprofiler/userslist**: User directory with search functionality and responsive grid (1-3 columns)
- **com_comprofiler/registers**: User registration form with multi-step fieldsets, validation, captcha support
- **com_comprofiler/login**: Login page with remember me checkbox, registration and password recovery links
#### CSS Architecture (600+ lines)
- Mobile-first responsive design with Bootstrap breakpoints (576px, 768px, 992px)
- BEM naming convention (`.cb-profile__`, `.cb-userslist__`, `.cb-register__`, `.cb-login__`)
- Integrated with template CSS variables for consistent theming
- 48px touch targets on mobile, 44px on desktop (WCAG 2.1 Level AA)
- 16px input font size on mobile to prevent iOS zoom
- Responsive grids adapting from 1 column (mobile) to 2-3 columns (desktop)
#### Accessibility Features
- Full ARIA labels and descriptions for screen readers
- Semantic HTML5 structure with proper landmarks
- Keyboard navigation support throughout
- Required field indicators with visually-hidden labels
- Focus states with visible outlines
#### Security Best Practices
- Proper output escaping with htmlspecialchars() and ENT_QUOTES
- _JEXEC security checks in all PHP files
- index.html protection files in all directories (6 files)
- CSRF token support in forms
- Input validation and error display
### Technical Details
- **Files Added**: 11 (4 component view files + 6 index.html + 1 root index.html)
- **CSS Lines Added**: 600+ lines of responsive styles
- **PHP Validation**: All files pass syntax validation
- **Component Views**: userprofile, userslist, registers, login
- **Documentation**: Ready for MODULE_OVERRIDES.md update
## [03.07.00] - 2026-02-22 ## [03.07.00] - 2026-02-22
### Added - Mobile-Responsive Module & Component Overrides ### Added - Mobile-Responsive Module & Component Overrides

View File

@@ -24,7 +24,7 @@
INGROUP: MokoCassiopeia.Documentation INGROUP: MokoCassiopeia.Documentation
REPO: https://github.com/mokoconsulting-tech/MokoCassiopeia REPO: https://github.com/mokoconsulting-tech/MokoCassiopeia
FILE: docs/MODULE_OVERRIDES.md FILE: docs/MODULE_OVERRIDES.md
VERSION: 03.07.00 VERSION: 03.08.00
BRIEF: Comprehensive guide to MokoCassiopeia mobile-responsive module overrides BRIEF: Comprehensive guide to MokoCassiopeia mobile-responsive module overrides
PATH: /docs/MODULE_OVERRIDES.md PATH: /docs/MODULE_OVERRIDES.md
--> -->
@@ -35,7 +35,7 @@ This document provides a comprehensive guide to all mobile-responsive module and
## Overview ## Overview
MokoCassiopeia includes **20 mobile-responsive module overrides** and **3 component overrides** designed to enhance the mobile user experience across standard Joomla, VirtueMart, Community Builder, and popular third-party extensions. MokoCassiopeia includes **20 mobile-responsive module overrides** and **7 component view overrides** designed to enhance the mobile user experience across standard Joomla, VirtueMart, Community Builder, and popular third-party extensions.
### Key Features ### Key Features
@@ -337,6 +337,61 @@ Membership pricing tables.
--- ---
### 5. Community Builder Components
Four comprehensive component view overrides for Community Builder user management.
#### com_comprofiler
**Location**: `src/templates/html/com_comprofiler/`
Mobile-responsive views for Community Builder user profiles, registration, and login.
##### userprofile
User profile display with tabbed interface.
**Features**:
- Large avatar display (150px)
- Tabbed interface for profile sections
- Custom field display with labels
- Online status indicator
- Responsive layout: vertical mobile → horizontal desktop
##### userslist
User directory with search and grid layout.
**Features**:
- Search functionality with accessible form
- Responsive grid: 1 column mobile → 2-3 columns desktop
- User cards with avatars (80px)
- Custom field display
- Profile view buttons
- Pagination support
##### registers
Multi-step registration form with validation.
**Features**:
- Fieldset organization with legends
- Required field indicators (*)
- Input validation and error display
- Captcha support section
- Terms & conditions checkbox
- GDPR-compliant design
- 16px input font on mobile
##### login
Login page with remember me and helper links.
**Features**:
- Centered login container (max-width: 450px)
- Username/password fields with autocomplete
- Remember me checkbox
- Registration and password recovery links
- CSRF token support
- Responsive padding adjustments
---
## CSS Architecture ## CSS Architecture
All module styles are located in `src/media/css/template.css` with dedicated sections: All module styles are located in `src/media/css/template.css` with dedicated sections:
@@ -360,7 +415,7 @@ All module styles are located in `src/media/css/template.css` with dedicated sec
- Breadcrumbs - Breadcrumbs
- Login forms - Login forms
- Article displays - Article displays
- CB components - CB module components
4. **INDUSTRY EXTENSION MODULE STYLES** (Lines ~19800+) 4. **INDUSTRY EXTENSION MODULE STYLES** (Lines ~19800+)
- K2 content grids - K2 content grids
@@ -369,6 +424,13 @@ All module styles are located in `src/media/css/template.css` with dedicated sec
- Kunena forum modules - Kunena forum modules
- OS Membership pricing - OS Membership pricing
5. **COMMUNITY BUILDER COMPONENT STYLES** (Lines ~21000+)
- User profile layouts
- Users list grids
- Registration forms
- Login pages
- Tab interfaces
### CSS Variables Integration ### CSS Variables Integration
All modules integrate with template CSS variables: All modules integrate with template CSS variables:

View File

@@ -24,7 +24,7 @@
INGROUP: MokoCassiopeia.Documentation INGROUP: MokoCassiopeia.Documentation
REPO: https://github.com/mokoconsulting-tech/MokoCassiopeia REPO: https://github.com/mokoconsulting-tech/MokoCassiopeia
FILE: docs/README.md FILE: docs/README.md
VERSION: 03.07.00 VERSION: 03.08.00
BRIEF: Documentation index for MokoCassiopeia template BRIEF: Documentation index for MokoCassiopeia template
PATH: /docs/README.md PATH: /docs/README.md
--> -->