From fb4bdbeacedec62bed1adae064865b3263b9326d Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sun, 22 Feb 2026 22:38:54 +0000 Subject: [PATCH] Add comprehensive Kunena and Membership Pro modules and components Co-authored-by: jmiller-moko <230051081+jmiller-moko@users.noreply.github.com> --- src/media/css/template.css | 558 ++++++++++++++++++ src/templates/html/INDUSTRY_MODULES_README.md | 49 ++ .../html/com_kunena/category/default.php | 70 +++ .../html/com_kunena/category/index.html | 1 + .../html/com_kunena/topic/index.html | 1 + .../html/com_osmembership/plan/index.html | 1 + .../html/com_osmembership/plans/default.php | 141 +++++ .../html/com_osmembership/plans/index.html | 1 + .../html/mod_kunenalogin/default.php | 187 ++++++ src/templates/html/mod_kunenalogin/index.html | 1 + .../html/mod_kunenasearch/default.php | 74 +++ .../html/mod_kunenasearch/index.html | 1 + .../html/mod_kunenastats/default.php | 100 ++++ src/templates/html/mod_kunenastats/index.html | 1 + .../html/mod_osmembership/default.php | 105 ++++ .../html/mod_osmembership/index.html | 1 + 16 files changed, 1292 insertions(+) create mode 100644 src/templates/html/com_kunena/category/default.php create mode 100644 src/templates/html/com_kunena/category/index.html create mode 100644 src/templates/html/com_kunena/topic/index.html create mode 100644 src/templates/html/com_osmembership/plan/index.html create mode 100644 src/templates/html/com_osmembership/plans/default.php create mode 100644 src/templates/html/com_osmembership/plans/index.html create mode 100644 src/templates/html/mod_kunenalogin/default.php create mode 100644 src/templates/html/mod_kunenalogin/index.html create mode 100644 src/templates/html/mod_kunenasearch/default.php create mode 100644 src/templates/html/mod_kunenasearch/index.html create mode 100644 src/templates/html/mod_kunenastats/default.php create mode 100644 src/templates/html/mod_kunenastats/index.html create mode 100644 src/templates/html/mod_osmembership/default.php create mode 100644 src/templates/html/mod_osmembership/index.html diff --git a/src/media/css/template.css b/src/media/css/template.css index 96e6a8f..f68121b 100644 --- a/src/media/css/template.css +++ b/src/media/css/template.css @@ -20423,3 +20423,561 @@ nav[data-toggle=toc] .nav-link.active+ul{ text-align: left; } } + +/* ===== ADDITIONAL KUNENA & MEMBERSHIP PRO MODULE STYLES ===== */ + +/* === mod_kunenalogin (Kunena Login) === */ +.mod-kunena-login-responsive { + width: 100%; +} + +.mod-kunena-login__profile { + display: flex; + align-items: center; + gap: 1rem; + padding: 1rem; + background: var(--secondary-bg); + border-radius: var(--border-radius); + margin-bottom: 1rem; +} + +.mod-kunena-login__avatar { + flex-shrink: 0; + width: 60px; + height: 60px; + border-radius: 50%; + overflow: hidden; +} + +.mod-kunena-login__avatar img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.mod-kunena-login__user-info { + flex: 1; +} + +.mod-kunena-login__username { + font-weight: 600; + font-size: 1.125rem; + margin-bottom: 0.25rem; +} + +.mod-kunena-login__username a { + color: var(--body-color); + text-decoration: none; +} + +.mod-kunena-login__username a:hover { + color: var(--color-primary); +} + +.mod-kunena-login__rank { + font-size: 0.875rem; + color: var(--gray-600); +} + +.mod-kunena-login__stats { + display: flex; + gap: 1.5rem; + padding: 1rem; + background: var(--body-bg); + border: 1px solid var(--border-color); + border-radius: var(--border-radius); + margin-bottom: 1rem; +} + +.mod-kunena-login__stat { + display: flex; + gap: 0.5rem; + align-items: center; +} + +.mod-kunena-login__stat-label { + color: var(--gray-600); + font-size: 0.875rem; +} + +.mod-kunena-login__stat-value { + font-weight: 600; + color: var(--body-color); +} + +.mod-kunena-login__form { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.mod-kunena-login__pretext, +.mod-kunena-login__posttext { + font-size: 0.875rem; + color: var(--gray-600); + line-height: 1.6; +} + +.mod-kunena-login__fields { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.mod-kunena-login__field { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.mod-kunena-login__label { + font-weight: 600; + font-size: 0.875rem; + color: var(--body-color); +} + +.mod-kunena-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-kunena-login__input:focus { + border-color: var(--color-primary); + outline: 0; + box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); +} + +.mod-kunena-login__remember { + display: flex; + align-items: center; + gap: 0.5rem; +} + +.mod-kunena-login__checkbox { + width: 20px; + height: 20px; + cursor: pointer; +} + +.mod-kunena-login__remember-label { + font-size: 0.875rem; + cursor: pointer; + margin: 0; +} + +.mod-kunena-login__actions { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.mod-kunena-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; + text-decoration: none; + position: relative; +} + +.mod-kunena-login__badge { + position: absolute; + top: -8px; + right: -8px; + background: var(--danger); + color: white; + border-radius: 50%; + width: 24px; + height: 24px; + display: flex; + align-items: center; + justify-content: center; + font-size: 0.75rem; + font-weight: 700; +} + +.mod-kunena-login__logout-form { + width: 100%; +} + +.mod-kunena-login__links { + display: flex; + flex-direction: column; + gap: 0.5rem; + margin-top: 0.5rem; +} + +.mod-kunena-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-kunena-login__link:hover { + background: var(--secondary-bg); + color: var(--link-hover-color); +} + +/* === mod_kunenasearch (Kunena Search) === */ +.mod-kunena-search-responsive { + width: 100%; +} + +.mod-kunena-search__form { + display: flex; + gap: 0.5rem; + width: 100%; +} + +.mod-kunena-search__form--button-top, +.mod-kunena-search__form--button-bottom { + flex-direction: column; +} + +.mod-kunena-search__form--button-left { + flex-direction: row-reverse; +} + +.mod-kunena-search__form--button-right { + flex-direction: row; +} + +.mod-kunena-search__input-wrapper { + flex: 1; +} + +.mod-kunena-search__input { + width: 100%; + 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-kunena-search__input:focus { + border-color: var(--color-primary); + outline: 0; + box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); +} + +.mod-kunena-search__button { + padding: 0.5rem 1rem; + min-height: 44px; + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.5rem; +} + +.mod-kunena-search__form--button-top .mod-kunena-search__button, +.mod-kunena-search__form--button-bottom .mod-kunena-search__button { + width: 100%; +} + +/* === mod_kunenastats (Kunena Statistics) === */ +.mod-kunena-stats-responsive { + width: 100%; +} + +.mod-kunena-stats__container { + display: grid; + gap: 1rem; + grid-template-columns: 1fr; +} + +.mod-kunena-stats__stat { + display: flex; + align-items: center; + gap: 1rem; + padding: 1rem; + background: var(--body-bg); + border: 1px solid var(--border-color); + border-radius: var(--border-radius); + transition: all 0.2s; +} + +.mod-kunena-stats__stat:hover { + background: var(--secondary-bg); + border-color: var(--color-primary); +} + +.mod-kunena-stats__icon { + font-size: 2rem; + color: var(--color-primary); + flex-shrink: 0; + width: 48px; + height: 48px; + display: flex; + align-items: center; + justify-content: center; + background: var(--secondary-bg); + border-radius: 50%; +} + +.mod-kunena-stats__content { + flex: 1; +} + +.mod-kunena-stats__value { + font-size: 1.75rem; + font-weight: 700; + color: var(--body-color); + line-height: 1; + margin-bottom: 0.25rem; +} + +.mod-kunena-stats__value--link a { + color: var(--color-primary); + text-decoration: none; + font-size: 1.125rem; +} + +.mod-kunena-stats__value--link a:hover { + text-decoration: underline; +} + +.mod-kunena-stats__label { + font-size: 0.875rem; + color: var(--gray-600); + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.mod-kunena-stats__stat--latest-member .mod-kunena-stats__label { + margin-bottom: 0.25rem; +} + +/* === mod_osmembership (OS Membership Pro) === */ +.mod-osmembership-responsive { + width: 100%; +} + +.mod-osmembership__plans { + display: grid; + gap: 2rem; + grid-template-columns: 1fr; +} + +.mod-osmembership__plan { + background: var(--body-bg); + border: 2px solid var(--border-color); + border-radius: var(--border-radius); + overflow: hidden; + transition: all 0.3s; + display: flex; + flex-direction: column; +} + +.mod-osmembership__plan:hover { + transform: translateY(-4px); + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); + border-color: var(--color-primary); +} + +.mod-osmembership__plan-image { + width: 100%; + overflow: hidden; +} + +.mod-osmembership__plan-image img { + width: 100%; + height: auto; + display: block; +} + +.mod-osmembership__plan-content { + padding: 2rem; + flex: 1; + display: flex; + flex-direction: column; +} + +.mod-osmembership__plan-title { + margin: 0 0 1rem 0; + font-weight: 700; + font-size: 1.5rem; + line-height: 1.3; +} + +.mod-osmembership__plan-description { + color: var(--gray-600); + line-height: 1.6; + margin-bottom: 1.5rem; +} + +.mod-osmembership__plan-pricing { + margin-bottom: 1.5rem; +} + +.mod-osmembership__price { + display: flex; + align-items: baseline; + gap: 0.5rem; + flex-wrap: wrap; +} + +.mod-osmembership__currency { + font-size: 1.5rem; + color: var(--color-primary); + font-weight: 600; +} + +.mod-osmembership__amount { + font-size: 2.5rem; + font-weight: 700; + color: var(--color-primary); + line-height: 1; +} + +.mod-osmembership__period { + color: var(--gray-600); + font-size: 1rem; +} + +.mod-osmembership__price--free { + font-size: 2rem; + font-weight: 700; + color: var(--success); +} + +.mod-osmembership__features { + flex: 1; + margin-bottom: 1.5rem; +} + +.mod-osmembership__features-list { + list-style: none; + padding: 0; + margin: 0; +} + +.mod-osmembership__feature { + padding: 0.5rem 0; + display: flex; + align-items: flex-start; + gap: 0.5rem; +} + +.mod-osmembership__feature .icon-check { + color: var(--success); + flex-shrink: 0; + margin-top: 0.25rem; +} + +.mod-osmembership__actions { + margin-top: auto; +} + +.mod-osmembership__btn { + width: 100%; + min-height: 48px; + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + text-decoration: none; +} + +.mod-osmembership__all-plans { + margin-top: 2rem; + text-align: center; +} + +.mod-osmembership__all-plans-link { + min-height: 44px; + display: inline-flex; + align-items: center; + justify-content: center; +} + +.mod-osmembership__empty { + text-align: center; + padding: 2rem 1rem; + background: var(--secondary-bg); + border-radius: var(--border-radius); + color: var(--gray-600); +} + +/* === Mobile Responsive Adjustments === */ +@media (max-width: 575.98px) { + .mod-kunena-login__input { + font-size: 16px; + min-height: 48px; + padding: 0.75rem 1rem; + } + + .mod-kunena-login__btn { + min-height: 48px; + } + + .mod-kunena-login__stats { + flex-direction: column; + gap: 0.75rem; + } + + .mod-kunena-search__input { + font-size: 16px; + min-height: 48px; + padding: 0.75rem 1rem; + } + + .mod-kunena-search__button { + min-height: 48px; + } + + .mod-kunenastats__container { + grid-template-columns: 1fr; + } +} + +/* Tablet adjustments */ +@media (min-width: 576px) { + .mod-kunena-stats__container { + grid-template-columns: repeat(2, 1fr); + } + + .mod-osmembership__plans { + grid-template-columns: repeat(2, 1fr); + } +} + +/* Desktop enhancements */ +@media (min-width: 768px) { + .mod-kunena-login__actions { + flex-direction: row; + } + + .mod-kunenastats__container { + grid-template-columns: repeat(3, 1fr); + } +} + +@media (min-width: 992px) { + .mod-osmembership__plans { + grid-template-columns: repeat(3, 1fr); + } +} diff --git a/src/templates/html/INDUSTRY_MODULES_README.md b/src/templates/html/INDUSTRY_MODULES_README.md index 2fe09f1..fcb8452 100644 --- a/src/templates/html/INDUSTRY_MODULES_README.md +++ b/src/templates/html/INDUSTRY_MODULES_README.md @@ -42,6 +42,55 @@ Kunena latest posts module with: - Responsive card layouts - Touch-friendly post links +### 5. mod_kunenalogin (Kunena Forum) +Kunena login module featuring: +- Login and logout states +- User profile with avatar +- Post count and karma display +- Profile and private messages links +- Touch-friendly form controls +- Password recovery links + +### 6. mod_kunenasearch (Kunena Forum) +Kunena forum search module with: +- Configurable button positions (top/right/bottom/left) +- Touch-friendly search input (48px on mobile) +- 16px input font (prevents iOS zoom) +- Icon-only or text button options +- Accessible search form + +### 7. mod_kunenastats (Kunena Forum) +Kunena statistics module offering: +- Member count with icon +- Latest member display +- Message and topic counts +- Today/yesterday topic counts +- Responsive grid layout (1-3 columns) +- Visual stat cards with icons + +### 8. mod_osmembership (OS Membership Pro) +Membership Pro plans module with: +- Responsive pricing cards +- Plan images and descriptions +- Feature lists with checkmarks +- Pricing display with periods +- Free plan highlighting +- Touch-friendly subscribe buttons +- Grid layout (1-3 columns) + +## Component Overrides + +### com_kunena (Kunena Forum) +- Category list view with responsive cards +- Mobile-optimized forum navigation +- Touch-friendly category links + +### com_osmembership (OS Membership Pro) +- Plans list with pricing table layout +- Featured plan highlighting +- Responsive grid (1-4 columns) +- Touch-friendly subscription buttons + ## Mobile Responsive Features ### Touch Target Sizes (WCAG 2.1 Compliant) diff --git a/src/templates/html/com_kunena/category/default.php b/src/templates/html/com_kunena/category/default.php new file mode 100644 index 0000000..a45ece9 --- /dev/null +++ b/src/templates/html/com_kunena/category/default.php @@ -0,0 +1,70 @@ + + * @license GNU General Public License version 2 or later; see LICENSE.txt + * + * Mobile responsive override for Kunena category list + */ + +defined('_JEXEC') or die; + +use Joomla\CMS\Language\Text; + +$this->document->addStyleDeclaration(' +.kunena-category-list-responsive { + width: 100%; +} + +.kunena-category-responsive { + background: var(--body-bg); + border: 1px solid var(--border-color); + border-radius: var(--border-radius); + padding: 1rem; + margin-bottom: 1rem; + transition: all 0.2s; +} + +.kunena-category-responsive:hover { + background: var(--secondary-bg); + border-color: var(--color-primary); +} + +@media (max-width: 575.98px) { + .kunena-category-responsive { + padding: 0.75rem; + } +} +'); +?> + +