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
css/styles.css
+10
View File
@@ -96,6 +96,16 @@ a:hover { text-decoration: underline; }
.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.5); z-index: 999; display: flex; align-items: center; justify-content: center; }
.modal.hidden { display: none; }
.modal-content { background: var(--white); padding: 32px; border-radius: 16px; width: 90%; max-width: 800px; position: relative; box-shadow: 0 10px 30px rgba(0,0,0,.2); }
.user-detail-modal { max-width: 600px; }
.user-detail-header { display: flex; align-items: center; gap: 20px; margin-bottom: 24px; }
.user-detail-avatar { width: 80px; height: 80px; border-radius: 50%; background: var(--blue); color: var(--white); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.user-detail-avatar .user-avatar-text { font-size: 2rem; font-weight: 700; }
.user-detail-header h2 { font-size: 1.5rem; font-weight: 700; margin: 0 0 4px 0; }
.user-detail-header p { font-size: 1rem; color: #6b7280; margin: 0; }
.detail-row { display: flex; justify-content: space-between; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--gray2); }
.detail-row:last-child { border-bottom: none; }
.detail-label { font-weight: 600; font-size: .9rem; color: #4b5563; }
.detail-value { font-size: .9rem; color: #1f2937; text-align: right; max-width: 60%; word-break: break-word; }
.modal-content h3 { margin-bottom: 24px; }
.close-btn { position: absolute; top: 16px; right: 20px; font-size: 24px; cursor: pointer; color: #6b7280; }
.username-display { padding: 12px 0; font-size: 1.1rem; font-weight: 700; color: var(--black); }
index.html
+43
View File
@@ -222,6 +222,49 @@
</div>
</div>
<!-- User Detail Modal -->
<div id="user-detail-modal" class="modal hidden">
<div class="modal-content user-detail-modal">
<span class="close-btn" onclick="closeUserDetailModal()">&times;</span>
<div class="user-detail-header">
<div class="user-detail-avatar" id="user-detail-avatar">
<span class="user-avatar-text" id="user-detail-initial">?</span>
</div>
<div>
<h2 id="user-detail-username">@username</h2>
<p id="user-detail-company">Company</p>
</div>
</div>
<div class="user-detail-info">
<div class="detail-row">
<span class="detail-label hide-de">E-Mail</span>
<span class="detail-label hide-en">Email</span>
<span class="detail-value" id="user-detail-email">-</span>
</div>
<div class="detail-row">
<span class="detail-label hide-de">Homepage</span>
<span class="detail-label hide-en">Homepage</span>
<span class="detail-value" id="user-detail-homepage">-</span>
</div>
<div class="detail-row">
<span class="detail-label hide-de">Standort</span>
<span class="detail-label hide-en">Location</span>
<span class="detail-value" id="user-detail-location">-</span>
</div>
<div class="detail-row">
<span class="detail-label hide-de">Veröffentlicht</span>
<span class="detail-label hide-en">Published</span>
<span class="detail-value" id="user-detail-publish">-</span>
</div>
<div class="detail-row">
<span class="detail-label hide-de">Beschreibung</span>
<span class="detail-label hide-en">Description</span>
<span class="detail-value" id="user-detail-description">-</span>
</div>
</div>
</div>
</div>
<footer class="footer">
<p>
<span class="hide-de">Sponsored by</span>
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;