MokoConsulting/MokoCassiopeia
1
1
Fork 0
Code Issues 2 Pull Requests Actions Packages Releases 1 Activity

Add Community Builder component overrides with mobile responsive design

Browse Source 
Co-authored-by: jmiller-moko <230051081+jmiller-moko@users.noreply.github.com>
This commit is contained in:
copilot-swe-agent[bot]
2026-02-22 23:18:28 +00:00
parent 5fc186c009
commit 01414563f5
10 changed files with 1177 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

701
src/media/css/template.css
View File

@@ -20981,3 +20981,704 @@ nav[data-toggle=toc] .nav-link.active+ul{
grid-template-columns: repeat(3, 1fr);
}
}
/* ============================================================================
COMMUNITY BUILDER COMPONENT STYLES
Mobile-responsive styles for com_comprofiler component views
============================================================================ */
/* === Base Component Wrapper === */
.cb-component {
width: 100%;
max-width: 100%;
}
/* === User Profile View === */
.cb-profile-responsive {
background: var(--body-bg);
border-radius: var(--border-radius);
}
.cb-profile__header {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
padding: 2rem;
background: var(--secondary-bg);
border-radius: var(--border-radius);
margin-bottom: 2rem;
}
.cb-profile__avatar {
width: 150px;
height: 150px;
border-radius: 50%;
overflow: hidden;
border: 4px solid var(--body-bg);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.cb-profile__avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.cb-profile__header-info {
text-align: center;
}
.cb-profile__name {
font-size: 1.75rem;
font-weight: 700;
margin: 0 0 0.5rem;
color: var(--heading-color);
}
.cb-profile__status {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background: var(--success-bg);
color: var(--success);
border-radius: 2rem;
font-size: 0.875rem;
font-weight: 600;
}
/* Profile Tabs */
.cb-profile__tabs {
margin-top: 2rem;
}
.cb-profile__tabs-nav {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0 0 2rem;
padding: 0;
list-style: none;
border-bottom: 2px solid var(--border-color);
}
.cb-profile__tab-item {
margin: 0;
}
.cb-profile__tab-link {
display: block;
padding: 0.75rem 1.5rem;
color: var(--body-color);
text-decoration: none;
border-radius: var(--border-radius) var(--border-radius) 0 0;
transition: all 0.2s;
min-height: 44px;
display: flex;
align-items: center;
}
.cb-profile__tab-link:hover,
.cb-profile__tab-link[aria-selected="true"] {
background: var(--color-primary);
color: white;
}
.cb-profile__tab-pane {
display: none;
padding: 1.5rem;
background: var(--body-bg);
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
}
.cb-profile__tab-pane[aria-selected="true"] {
display: block;
}
.cb-profile__tab-description {
margin-bottom: 1.5rem;
padding: 1rem;
background: var(--secondary-bg);
border-radius: var(--border-radius);
}
.cb-profile__fields {
display: grid;
gap: 1.5rem;
}
.cb-profile__field {
display: grid;
grid-template-columns: 1fr;
gap: 0.5rem;
}
.cb-profile__field-label {
font-weight: 600;
color: var(--heading-color);
}
.cb-profile__field-value {
color: var(--body-color);
}
/* === Users List View === */
.cb-userslist-responsive {
width: 100%;
}
.cb-userslist__header {
margin-bottom: 2rem;
}
.cb-userslist__title {
font-size: 2rem;
font-weight: 700;
margin: 0 0 1.5rem;
color: var(--heading-color);
}
.cb-userslist__search-form {
width: 100%;
}
.cb-userslist__search-wrapper {
display: flex;
gap: 0.5rem;
width: 100%;
}
.cb-userslist__search-input {
flex: 1;
min-height: 48px;
padding: 0.75rem 1rem;
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
font-size: 16px;
transition: all 0.2s;
}
.cb-userslist__search-input:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
}
.cb-userslist__search-btn {
min-height: 48px;
min-width: 48px;
padding: 0.75rem 1.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
flex-shrink: 0;
}
.cb-userslist__search-text {
display: none;
}
.cb-userslist__grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
.cb-userslist__user-card {
background: var(--body-bg);
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
padding: 1.5rem;
transition: all 0.3s;
display: flex;
flex-direction: column;
gap: 1rem;
}
.cb-userslist__user-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
border-color: var(--color-primary);
}
.cb-userslist__avatar {
width: 80px;
height: 80px;
border-radius: 50%;
overflow: hidden;
margin: 0 auto;
}
.cb-userslist__avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.cb-userslist__user-info {
text-align: center;
}
.cb-userslist__username {
font-size: 1.25rem;
font-weight: 600;
margin: 0 0 0.5rem;
}
.cb-userslist__username a {
color: var(--heading-color);
text-decoration: none;
}
.cb-userslist__username a:hover {
color: var(--color-primary);
}
.cb-userslist__fields {
display: grid;
gap: 0.5rem;
margin: 1rem 0;
padding: 1rem;
background: var(--secondary-bg);
border-radius: var(--border-radius);
}
.cb-userslist__field {
font-size: 0.875rem;
}
.cb-userslist__field-label {
font-weight: 600;
margin-right: 0.5rem;
}
.cb-userslist__actions {
margin-top: 1rem;
}
.cb-userslist__btn {
min-height: 44px;
width: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
text-decoration: none;
}
.cb-userslist__pagination {
margin-top: 2rem;
display: flex;
justify-content: center;
}
/* === Registration View === */
.cb-register-responsive {
max-width: 800px;
margin: 0 auto;
}
.cb-register__header {
margin-bottom: 2rem;
text-align: center;
}
.cb-register__title {
font-size: 2rem;
font-weight: 700;
margin: 0 0 1rem;
color: var(--heading-color);
}
.cb-register__intro {
padding: 1rem;
background: var(--secondary-bg);
border-radius: var(--border-radius);
margin-bottom: 1.5rem;
}
.cb-register__form {
background: var(--body-bg);
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
padding: 2rem;
}
.cb-register__fieldset {
border: none;
margin: 0 0 2rem;
padding: 0;
}
.cb-register__legend {
font-size: 1.5rem;
font-weight: 700;
color: var(--heading-color);
margin: 0 0 1.5rem;
padding: 0;
width: 100%;
border-bottom: 2px solid var(--border-color);
padding-bottom: 0.75rem;
}
.cb-register__tab-description {
margin-bottom: 1.5rem;
padding: 1rem;
background: var(--secondary-bg);
border-radius: var(--border-radius);
}
.cb-register__fields {
display: grid;
gap: 1.5rem;
}
.cb-register__field {
display: grid;
gap: 0.5rem;
}
.cb-register__label {
font-weight: 600;
color: var(--heading-color);
display: flex;
align-items: center;
gap: 0.25rem;
}
.cb-register__required {
color: var(--danger);
font-weight: 700;
}
.cb-register__field-description {
font-size: 0.875rem;
color: var(--gray-600);
margin-top: 0.25rem;
}
.cb-register__input-wrapper input[type="text"],
.cb-register__input-wrapper input[type="email"],
.cb-register__input-wrapper input[type="password"],
.cb-register__input-wrapper input[type="tel"],
.cb-register__input-wrapper input[type="url"],
.cb-register__input-wrapper select,
.cb-register__input-wrapper textarea {
width: 100%;
min-height: 48px;
padding: 0.75rem 1rem;
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
font-size: 16px;
transition: all 0.2s;
}
.cb-register__input-wrapper input:focus,
.cb-register__input-wrapper select:focus,
.cb-register__input-wrapper textarea:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
}
.cb-register__field--required .cb-register__input-wrapper input,
.cb-register__field--required .cb-register__input-wrapper select,
.cb-register__field--required .cb-register__input-wrapper textarea {
border-left: 3px solid var(--danger);
}
.cb-register__error {
color: var(--danger);
font-size: 0.875rem;
margin-top: 0.25rem;
padding: 0.5rem;
background: var(--danger-bg);
border-radius: var(--border-radius);
}
.cb-register__captcha {
margin: 1.5rem 0;
padding: 1.5rem;
background: var(--secondary-bg);
border-radius: var(--border-radius);
}
.cb-register__terms {
margin: 1.5rem 0;
padding: 1rem;
background: var(--secondary-bg);
border-radius: var(--border-radius);
}
.cb-register__terms-checkbox {
min-width: 20px;
min-height: 20px;
cursor: pointer;
}
.cb-register__terms-label {
cursor: pointer;
}
.cb-register__actions {
display: flex;
flex-direction: column;
gap: 1rem;
margin-top: 2rem;
}
.cb-register__btn {
min-height: 48px;
padding: 0.75rem 1.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
text-decoration: none;
border: none;
cursor: pointer;
font-weight: 600;
transition: all 0.2s;
}
/* === Login View === */
.cb-login-responsive {
display: flex;
align-items: center;
justify-content: center;
min-height: 60vh;
padding: 2rem 1rem;
}
.cb-login__container {
width: 100%;
max-width: 450px;
background: var(--body-bg);
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
padding: 2rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.cb-login__header {
text-align: center;
margin-bottom: 2rem;
}
.cb-login__title {
font-size: 2rem;
font-weight: 700;
margin: 0;
color: var(--heading-color);
}
.cb-login__form {
display: grid;
gap: 1.5rem;
}
.cb-login__field {
display: grid;
gap: 0.5rem;
}
.cb-login__label {
font-weight: 600;
color: var(--heading-color);
display: flex;
align-items: center;
gap: 0.25rem;
}
.cb-login__required {
color: var(--danger);
font-weight: 700;
}
.cb-login__input {
width: 100%;
min-height: 48px;
padding: 0.75rem 1rem;
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
font-size: 16px;
transition: all 0.2s;
}
.cb-login__input:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
}
.cb-login__remember {
margin: 0.5rem 0;
}
.cb-login__remember-checkbox {
min-width: 20px;
min-height: 20px;
cursor: pointer;
}
.cb-login__remember-label {
cursor: pointer;
}
.cb-login__actions {
margin-top: 1rem;
}
.cb-login__btn {
width: 100%;
min-height: 48px;
padding: 0.75rem 1.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
text-decoration: none;
border: none;
cursor: pointer;
font-weight: 600;
transition: all 0.2s;
}
.cb-login__links {
margin-top: 2rem;
padding-top: 2rem;
border-top: 1px solid var(--border-color);
display: flex;
flex-direction: column;
gap: 1rem;
}
.cb-login__link {
text-align: center;
}
.cb-login__link-item {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
color: var(--link-color);
text-decoration: none;
min-height: 44px;
padding: 0.5rem;
transition: all 0.2s;
}
.cb-login__link-item:hover {
color: var(--color-primary);
}
/* === Responsive Design === */
@media (min-width: 576px) {
.cb-userslist__search-text {
display: inline;
}
.cb-profile__field {
grid-template-columns: 200px 1fr;
}
.cb-register__actions {
flex-direction: row;
justify-content: flex-end;
}
.cb-register__btn--cancel {
order: -1;
}
}
@media (min-width: 768px) {
.cb-profile__header {
flex-direction: row;
text-align: left;
}
.cb-profile__header-info {
text-align: left;
}
.cb-userslist__grid {
grid-template-columns: repeat(2, 1fr);
}
.cb-userslist__user-card {
flex-direction: row;
align-items: center;
}
.cb-userslist__avatar {
margin: 0;
}
.cb-userslist__user-info {
text-align: left;
flex: 1;
}
.cb-login__container {
padding: 3rem;
}
}
@media (min-width: 992px) {
.cb-userslist__grid {
grid-template-columns: repeat(3, 1fr);
}
.cb-userslist__user-card {
flex-direction: column;
text-align: center;
}
.cb-userslist__avatar {
margin: 0 auto;
}
.cb-userslist__user-info {
text-align: center;
}
.cb-profile__tabs-nav {
flex-wrap: nowrap;
}
}
@media (max-width: 575.98px) {
.cb-login__input,
.cb-register__input-wrapper input[type="text"],
.cb-register__input-wrapper input[type="email"],
.cb-register__input-wrapper input[type="password"],
.cb-register__input-wrapper input[type="tel"],
.cb-register__input-wrapper input[type="url"],
.cb-register__input-wrapper select,
.cb-userslist__search-input {
font-size: 16px;
min-height: 48px;
}
.cb-login__btn,
.cb-register__btn,
.cb-userslist__btn,
.cb-userslist__search-btn {
min-height: 48px;
}
.cb-profile__avatar {
width: 120px;
height: 120px;
}
.cb-register__form,
.cb-login__container {
padding: 1.5rem;
}
}

1
src/templates/html/com_comprofiler/index.html Normal file
View File

@@ -0,0 +1 @@
<!DOCTYPE html><title></title>

112
src/templates/html/com_comprofiler/login/default.php Normal file
View File

@@ -0,0 +1,112 @@
<?php
/**
* @package Community Builder
* @subpackage com_comprofiler
*
* @copyright (C) 2026 Moko Consulting <hello@mokoconsulting.tech>
* @license GNU General Public License version 2 or later; see LICENSE.txt
*
* Mobile responsive override for Community Builder login view
*/
defined('_JEXEC') or die;
use Joomla\CMS\Language\Text;
use Joomla\CMS\Router\Route;
$return = $this->return ?? '';
$showRegisterLink = $this->showRegisterLink ?? true;
$showLostPasswordLink = $this->showLostPasswordLink ?? true;
?>
<div class="cb-login-responsive cb-component">
<div class="cb-login__container">
<div class="cb-login__header">
<h1 class="cb-login__title">
<?php echo Text::_('COM_COMPROFILER_LOGIN'); ?>
</h1>
</div>
<form action="<?php echo Route::_('index.php?option=com_comprofiler&view=login'); ?>"
method="post"
class="cb-login__form"
aria-label="<?php echo Text::_('COM_COMPROFILER_LOGIN_FORM'); ?>">
<div class="cb-login__field">
<label for="cb-username" class="cb-login__label">
<?php echo Text::_('COM_COMPROFILER_USERNAME'); ?>
<span class="cb-login__required" aria-label="<?php echo Text::_('COM_COMPROFILER_REQUIRED'); ?>">*</span>
</label>
<input type="text"
id="cb-username"
name="username"
class="cb-login__input"
required
aria-required="true"
autocomplete="username"
placeholder="<?php echo Text::_('COM_COMPROFILER_USERNAME'); ?>">
</div>
<div class="cb-login__field">
<label for="cb-password" class="cb-login__label">
<?php echo Text::_('COM_COMPROFILER_PASSWORD'); ?>
<span class="cb-login__required" aria-label="<?php echo Text::_('COM_COMPROFILER_REQUIRED'); ?>">*</span>
</label>
<input type="password"
id="cb-password"
name="passwd"
class="cb-login__input"
required
aria-required="true"
autocomplete="current-password"
placeholder="<?php echo Text::_('COM_COMPROFILER_PASSWORD'); ?>">
</div>
<?php if ($this->showRememberMe ?? true) : ?>
<div class="cb-login__remember">
<div class="form-check">
<input type="checkbox"
id="cb-remember"
name="remember"
class="form-check-input cb-login__remember-checkbox"
value="yes">
<label for="cb-remember" class="form-check-label cb-login__remember-label">
<?php echo Text::_('COM_COMPROFILER_REMEMBER_ME'); ?>
</label>
</div>
</div>
<?php endif; ?>
<div class="cb-login__actions">
<button type="submit" class="cb-login__btn cb-login__btn--submit btn btn-primary">
<span class="icon-lock" aria-hidden="true"></span>
<?php echo Text::_('COM_COMPROFILER_LOGIN'); ?>
</button>
</div>
<input type="hidden" name="task" value="login">
<input type="hidden" name="return" value="<?php echo htmlspecialchars($return, ENT_QUOTES, 'UTF-8'); ?>">
<?php echo $this->token ?? ''; ?>
</form>
<div class="cb-login__links">
<?php if ($showRegisterLink) : ?>
<div class="cb-login__link">
<a href="<?php echo Route::_('index.php?option=com_comprofiler&view=registers'); ?>" class="cb-login__link-item">
<span class="icon-user-plus" aria-hidden="true"></span>
<?php echo Text::_('COM_COMPROFILER_REGISTER_NEW_ACCOUNT'); ?>
</a>
</div>
<?php endif; ?>
<?php if ($showLostPasswordLink) : ?>
<div class="cb-login__link">
<a href="<?php echo Route::_('index.php?option=com_comprofiler&view=lostpassword'); ?>" class="cb-login__link-item">
<span class="icon-question" aria-hidden="true"></span>
<?php echo Text::_('COM_COMPROFILER_FORGOT_PASSWORD'); ?>
</a>
</div>
<?php endif; ?>
</div>
</div>
</div>

1
src/templates/html/com_comprofiler/login/index.html Normal file
View File

@@ -0,0 +1 @@
<!DOCTYPE html><title></title>

136
src/templates/html/com_comprofiler/registers/default.php Normal file
View File

@@ -0,0 +1,136 @@
<?php
/**
* @package Community Builder
* @subpackage com_comprofiler
*
* @copyright (C) 2026 Moko Consulting <hello@mokoconsulting.tech>
* @license GNU General Public License version 2 or later; see LICENSE.txt
*
* Mobile responsive override for Community Builder registration view
*/
defined('_JEXEC') or die;
use Joomla\CMS\Language\Text;
// Get form and fields
$form = $this->form ?? null;
$tabs = $this->tabs ?? null;
?>
<div class="cb-register-responsive cb-component">
<div class="cb-register__header">
<h1 class="cb-register__title">
<?php echo Text::_('COM_COMPROFILER_REGISTER'); ?>
</h1>
<?php if ($this->introduction ?? null) : ?>
<div class="cb-register__intro">
<?php echo $this->introduction; ?>
</div>
<?php endif; ?>
</div>
<?php if ($form) : ?>
<form action="<?php echo $this->action ?? ''; ?>"
method="post"
class="cb-register__form"
enctype="multipart/form-data"
aria-label="<?php echo Text::_('COM_COMPROFILER_REGISTRATION_FORM'); ?>">
<?php if ($tabs) : ?>
<?php foreach ($tabs as $tab) : ?>
<?php if (isset($tab->fields) && !empty($tab->fields)) : ?>
<fieldset class="cb-register__fieldset">
<?php if ($tab->title) : ?>
<legend class="cb-register__legend">
<?php echo htmlspecialchars($tab->title, ENT_QUOTES, 'UTF-8'); ?>
</legend>
<?php endif; ?>
<?php if ($tab->description) : ?>
<div class="cb-register__tab-description">
<?php echo $tab->description; ?>
</div>
<?php endif; ?>
<div class="cb-register__fields">
<?php foreach ($tab->fields as $field) : ?>
<div class="cb-register__field<?php echo $field->required ? ' cb-register__field--required' : ''; ?>">
<label for="<?php echo htmlspecialchars($field->name, ENT_QUOTES, 'UTF-8'); ?>"
class="cb-register__label">
<?php echo htmlspecialchars($field->title, ENT_QUOTES, 'UTF-8'); ?>
<?php if ($field->required) : ?>
<span class="cb-register__required" aria-label="<?php echo Text::_('COM_COMPROFILER_REQUIRED'); ?>">*</span>
<?php endif; ?>
</label>
<?php if ($field->description) : ?>
<div class="cb-register__field-description" id="<?php echo htmlspecialchars($field->name, ENT_QUOTES, 'UTF-8'); ?>-desc">
<?php echo $field->description; ?>
</div>
<?php endif; ?>
<div class="cb-register__input-wrapper">
<?php echo $field->input; ?>
</div>
<?php if (isset($field->error) && $field->error) : ?>
<div class="cb-register__error" role="alert">
<?php echo $field->error; ?>
</div>
<?php endif; ?>
</div>
<?php endforeach; ?>
</div>
</fieldset>
<?php endif; ?>
<?php endforeach; ?>
<?php endif; ?>
<?php if ($this->showCaptcha ?? false) : ?>
<div class="cb-register__captcha">
<?php echo $this->captcha; ?>
</div>
<?php endif; ?>
<?php if ($this->showTerms ?? false) : ?>
<div class="cb-register__terms">
<div class="form-check">
<input type="checkbox"
id="cb-terms"
name="agreedToTerms"
class="form-check-input cb-register__terms-checkbox"
required
aria-required="true"
aria-describedby="cb-terms-text">
<label for="cb-terms" class="form-check-label cb-register__terms-label" id="cb-terms-text">
<?php echo Text::_('COM_COMPROFILER_AGREE_TO_TERMS'); ?>
<a href="<?php echo $this->termsUrl ?? ''; ?>" target="_blank" rel="noopener noreferrer">
<?php echo Text::_('COM_COMPROFILER_TERMS_CONDITIONS'); ?>
</a>
</label>
</div>
</div>
<?php endif; ?>
<div class="cb-register__actions">
<button type="submit" class="cb-register__btn cb-register__btn--submit btn btn-primary">
<span class="icon-check" aria-hidden="true"></span>
<?php echo Text::_('COM_COMPROFILER_REGISTER_SUBMIT'); ?>
</button>
<a href="<?php echo $this->loginUrl ?? ''; ?>" class="cb-register__btn cb-register__btn--cancel btn btn-secondary">
<span class="icon-cancel" aria-hidden="true"></span>
<?php echo Text::_('JCANCEL'); ?>
</a>
</div>
<?php echo $this->token ?? ''; ?>
</form>
<?php else : ?>
<div class="alert alert-warning" role="alert">
<?php echo Text::_('COM_COMPROFILER_REGISTRATION_NOT_AVAILABLE'); ?>
</div>
<?php endif; ?>
</div>

1
src/templates/html/com_comprofiler/registers/index.html Normal file
View File

@@ -0,0 +1 @@
<!DOCTYPE html><title></title>

100
src/templates/html/com_comprofiler/userprofile/default.php Normal file
View File

@@ -0,0 +1,100 @@
<?php
/**
* @package Community Builder
* @subpackage com_comprofiler
*
* @copyright (C) 2026 Moko Consulting <hello@mokoconsulting.tech>
* @license GNU General Public License version 2 or later; see LICENSE.txt
*
* Mobile responsive override for Community Builder user profile view
*/
defined('_JEXEC') or die;
use Joomla\CMS\Language\Text;
// Get user object
$user = $this->user ?? null;
$tabs = $this->tabs ?? null;
?>
<div class="cb-profile-responsive cb-component">
<?php if ($user) : ?>
<div class="cb-profile__header">
<?php if ($user->getField('avatar', null, 'html', 'none', 'profile')) : ?>
<div class="cb-profile__avatar">
<?php echo $user->getField('avatar', null, 'html', 'none', 'profile'); ?>
</div>
<?php endif; ?>
<div class="cb-profile__header-info">
<h1 class="cb-profile__name">
<?php echo htmlspecialchars($user->getField('formatname', null, 'html', 'none', 'profile'), ENT_QUOTES, 'UTF-8'); ?>
</h1>
<?php if ($user->getField('onlinestatus', null, 'html', 'none', 'profile')) : ?>
<div class="cb-profile__status">
<?php echo $user->getField('onlinestatus', null, 'html', 'none', 'profile'); ?>
</div>
<?php endif; ?>
</div>
</div>
<?php if ($tabs) : ?>
<div class="cb-profile__tabs">
<ul class="cb-profile__tabs-nav" role="tablist" aria-label="<?php echo Text::_('COM_COMPROFILER_PROFILE_TABS'); ?>">
<?php foreach ($tabs as $tab) : ?>
<?php if (isset($tab->fields) && !empty($tab->fields)) : ?>
<li class="cb-profile__tab-item" role="presentation">
<a href="#<?php echo htmlspecialchars($tab->id, ENT_QUOTES, 'UTF-8'); ?>"
class="cb-profile__tab-link"
role="tab"
aria-controls="<?php echo htmlspecialchars($tab->id, ENT_QUOTES, 'UTF-8'); ?>"
aria-selected="false">
<?php echo htmlspecialchars($tab->title, ENT_QUOTES, 'UTF-8'); ?>
</a>
</li>
<?php endif; ?>
<?php endforeach; ?>
</ul>
<div class="cb-profile__tabs-content">
<?php foreach ($tabs as $tab) : ?>
<?php if (isset($tab->fields) && !empty($tab->fields)) : ?>
<div id="<?php echo htmlspecialchars($tab->id, ENT_QUOTES, 'UTF-8'); ?>"
class="cb-profile__tab-pane"
role="tabpanel"
aria-labelledby="<?php echo htmlspecialchars($tab->id, ENT_QUOTES, 'UTF-8'); ?>-tab">
<?php if ($tab->description) : ?>
<div class="cb-profile__tab-description">
<?php echo $tab->description; ?>
</div>
<?php endif; ?>
<div class="cb-profile__fields">
<?php foreach ($tab->fields as $field) : ?>
<?php if ($field->value) : ?>
<div class="cb-profile__field">
<div class="cb-profile__field-label">
<?php echo htmlspecialchars($field->title, ENT_QUOTES, 'UTF-8'); ?>
</div>
<div class="cb-profile__field-value">
<?php echo $field->value; ?>
</div>
</div>
<?php endif; ?>
<?php endforeach; ?>
</div>
</div>
<?php endif; ?>
<?php endforeach; ?>
</div>
</div>
<?php endif; ?>
<?php else : ?>
<div class="alert alert-warning" role="alert">
<?php echo Text::_('COM_COMPROFILER_USER_NOT_FOUND'); ?>
</div>
<?php endif; ?>
</div>

1
src/templates/html/com_comprofiler/userprofile/index.html Normal file
View File

@@ -0,0 +1 @@
<!DOCTYPE html><title></title>

123
src/templates/html/com_comprofiler/userslist/default.php Normal file
View File

@@ -0,0 +1,123 @@
<?php
/**
* @package Community Builder
* @subpackage com_comprofiler
*
* @copyright (C) 2026 Moko Consulting <hello@mokoconsulting.tech>
* @license GNU General Public License version 2 or later; see LICENSE.txt
*
* Mobile responsive override for Community Builder users list view
*/
defined('_JEXEC') or die;
use Joomla\CMS\Language\Text;
use Joomla\CMS\Router\Route;
// Get users list
$users = $this->users ?? [];
$pagination = $this->pagination ?? null;
$search = $this->search ?? '';
$listid = $this->listid ?? 0;
?>
<div class="cb-userslist-responsive cb-component">
<div class="cb-userslist__header">
<h1 class="cb-userslist__title">
<?php echo Text::_('COM_COMPROFILER_USERLIST'); ?>
</h1>
<?php if ($this->showSearch ?? true) : ?>
<div class="cb-userslist__search">
<form action="<?php echo Route::_('index.php?option=com_comprofiler&view=userslist&listid=' . $listid); ?>"
method="post"
class="cb-userslist__search-form"
role="search"
aria-label="<?php echo Text::_('COM_COMPROFILER_SEARCH_USERS'); ?>">
<div class="cb-userslist__search-wrapper">
<label for="cb-userslist-search" class="visually-hidden">
<?php echo Text::_('COM_COMPROFILER_SEARCH'); ?>
</label>
<input type="search"
id="cb-userslist-search"
name="search"
class="cb-userslist__search-input"
placeholder="<?php echo Text::_('COM_COMPROFILER_SEARCH_USERS'); ?>"
value="<?php echo htmlspecialchars($search, ENT_QUOTES, 'UTF-8'); ?>"
aria-label="<?php echo Text::_('COM_COMPROFILER_SEARCH'); ?>">
<button type="submit"
class="cb-userslist__search-btn btn btn-primary"
aria-label="<?php echo Text::_('COM_COMPROFILER_SEARCH'); ?>">
<span class="icon-search" aria-hidden="true"></span>
<span class="cb-userslist__search-text"><?php echo Text::_('COM_COMPROFILER_SEARCH'); ?></span>
</button>
</div>
</form>
</div>
<?php endif; ?>
</div>
<?php if (!empty($users)) : ?>
<div class="cb-userslist__grid">
<?php foreach ($users as $user) : ?>
<div class="cb-userslist__user-card">
<?php if ($user->getField('avatar', null, 'html', 'none', 'list')) : ?>
<div class="cb-userslist__avatar">
<a href="<?php echo $user->getField('canvas', null, 'html', 'none', 'profile'); ?>"
aria-label="<?php echo Text::sprintf('COM_COMPROFILER_VIEW_PROFILE', htmlspecialchars($user->getField('formatname', null, 'html', 'none', 'list'), ENT_QUOTES, 'UTF-8')); ?>">
<?php echo $user->getField('avatar', null, 'html', 'none', 'list'); ?>
</a>
</div>
<?php endif; ?>
<div class="cb-userslist__user-info">
<h3 class="cb-userslist__username">
<a href="<?php echo $user->getField('canvas', null, 'html', 'none', 'profile'); ?>">
<?php echo htmlspecialchars($user->getField('formatname', null, 'html', 'none', 'list'), ENT_QUOTES, 'UTF-8'); ?>
</a>
</h3>
<?php if ($user->getField('onlinestatus', null, 'html', 'none', 'list')) : ?>
<div class="cb-userslist__status">
<?php echo $user->getField('onlinestatus', null, 'html', 'none', 'list'); ?>
</div>
<?php endif; ?>
<?php if (isset($user->fields) && !empty($user->fields)) : ?>
<div class="cb-userslist__fields">
<?php foreach ($user->fields as $field) : ?>
<?php if ($field->value) : ?>
<div class="cb-userslist__field">
<span class="cb-userslist__field-label"><?php echo htmlspecialchars($field->title, ENT_QUOTES, 'UTF-8'); ?>:</span>
<span class="cb-userslist__field-value"><?php echo $field->value; ?></span>
</div>
<?php endif; ?>
<?php endforeach; ?>
</div>
<?php endif; ?>
<div class="cb-userslist__actions">
<a href="<?php echo $user->getField('canvas', null, 'html', 'none', 'profile'); ?>"
class="cb-userslist__btn btn btn-primary btn-sm">
<span class="icon-user" aria-hidden="true"></span>
<?php echo Text::_('COM_COMPROFILER_VIEW_PROFILE'); ?>
</a>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
<?php if ($pagination) : ?>
<div class="cb-userslist__pagination">
<?php echo $pagination->getPagesLinks(); ?>
</div>
<?php endif; ?>
<?php else : ?>
<div class="alert alert-info" role="alert">
<?php echo Text::_('COM_COMPROFILER_NO_USERS_FOUND'); ?>
</div>
<?php endif; ?>
</div>

1
src/templates/html/com_comprofiler/userslist/index.html Normal file
View File

@@ -0,0 +1 @@
<!DOCTYPE html><title></title>