Oliver/paraguay
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add user detail modal - click on member card to view full profile

Browse Source
This commit is contained in:
Kato
2026-09-03 20:45:53 +00:00
parent 9b972daa00
commit fe6626c10b
3 changed files with 83 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
js/main.js
+30
View File
@@ -235,6 +235,7 @@ async function loadUsers() {
data.data.forEach(user => {
const card = document.createElement('div');
card.className = 'user-card';
card.style.cursor = 'pointer';
const avatarContent = user.image
? `<img src="${user.image}" alt="${user.username || 'user'}" class="user-avatar-img" />`
: `<span class="user-avatar-text">${(user.username || '').charAt(0).toUpperCase()}</span>`;
@@ -248,6 +249,7 @@ async function loadUsers() {
<p class="user-description">${user.Description || ''}</p>
</div>
`;
card.addEventListener('click', () => openUserDetailModal(user));
usersContainer.appendChild(card);
});
console.log('loadUsers: done, users rendered');
@@ -307,6 +309,34 @@ function closeProfileModal() {
document.getElementById('profile-modal').classList.add('hidden');
}
function openUserDetailModal(user) {
const modal = document.getElementById('user-detail-modal');
const avatar = document.getElementById('user-detail-avatar');
const initial = document.getElementById('user-detail-initial');
const img = document.getElementById('user-detail-img');
// Avatar: image or initial
if (user.image) {
avatar.innerHTML = `<img src="${user.image}" alt="${user.username}" style="width:100%;height:100%;object-fit:cover;border-radius:50%;">`;
} else {
avatar.innerHTML = `<span class="user-avatar-text">${(user.username || '?').charAt(0).toUpperCase()}</span>`;
}
document.getElementById('user-detail-username').textContent = '@' + (user.username || 'Unknown');
document.getElementById('user-detail-company').textContent = user.company || '';
document.getElementById('user-detail-email').textContent = user.email || '-';
document.getElementById('user-detail-homepage').textContent = user.homepage || '-';
document.getElementById('user-detail-location').textContent = user.location || '-';
document.getElementById('user-detail-publish').textContent = user.publish ? 'Ja / Yes' : 'Nein / No';
document.getElementById('user-detail-description').textContent = user.Description || '-';
modal.classList.remove('hidden');
}
function closeUserDetailModal() {
document.getElementById('user-detail-modal').classList.add('hidden');
}
async function loadWiki() {
const wikiContainer = document.getElementById('wiki-content');
if (!wikiContainer) return;