Make email and homepage clickable links in cards and detail modal

This commit is contained in:
Kato
2026-09-04 19:41:30 +00:00
parent 90864d8ff9
commit c3a3622c34
2 changed files with 14 additions and 4 deletions
+7 -1
View File
@@ -77,7 +77,13 @@ a:hover { text-decoration: underline; }
.user-avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .user-avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.user-avatar-text { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .user-avatar-text { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.user-info h4 { font-size: 1.1rem; font-weight: 600; margin-bottom: 8px; } .user-info h4 { font-size: 1.1rem; font-weight: 600; margin-bottom: 8px; }
.user-company, .user-email { font-size: .9rem; color: #6b7280; margin: 0; } .user-company { font-size: .9rem; color: #6b7280; margin: 0; }
.user-email { font-size: .9rem; margin: 0; }
.user-email a { font-size: .9rem; color: #2563eb; text-decoration: none; }
.user-email a:hover { text-decoration: underline; }
.user-homepage { font-size: .9rem; margin: 0; }
.user-homepage a { font-size: .9rem; color: #2563eb; text-decoration: none; }
.user-homepage a:hover { text-decoration: underline; }
.user-location { font-size: .85rem; color: #6b7280; margin: 4px 0 0 0; } .user-location { font-size: .85rem; color: #6b7280; margin: 4px 0 0 0; }
.user-description { font-size: .85rem; color: #4b5563; margin: 8px 0 0 0; max-height: 40px; overflow: hidden; text-overflow: ellipsis; } .user-description { font-size: .85rem; color: #4b5563; margin: 8px 0 0 0; max-height: 40px; overflow: hidden; text-overflow: ellipsis; }
.wiki-accordion { margin: 24px 0; } .wiki-accordion { margin: 24px 0; }
+7 -3
View File
@@ -249,7 +249,8 @@ async function loadUsers() {
<div class="user-info"> <div class="user-info">
<h4>${user.username || 'N/A'}</h4> <h4>${user.username || 'N/A'}</h4>
<p class="user-company">${user.company || ''}</p> <p class="user-company">${user.company || ''}</p>
<p class="user-email">${user.email || ''}</p> <p class="user-email">${user.email ? `<a href="mailto:${user.email}">${user.email}</a>` : ''}</p>
<p class="user-homepage">${user.homepage ? `<a href="${user.homepage.startsWith('http') ? '' : 'https://'}${user.homepage}" target="_blank">${user.homepage}</a>` : ''}</p>
<p class="user-location">${user.location || ''}</p> <p class="user-location">${user.location || ''}</p>
<p class="user-description">${user.Description || ''}</p> <p class="user-description">${user.Description || ''}</p>
</div> </div>
@@ -323,8 +324,11 @@ function openUserDetailModal(user) {
document.getElementById('user-detail-username').textContent = '@' + (user.username || 'Unknown'); document.getElementById('user-detail-username').textContent = '@' + (user.username || 'Unknown');
document.getElementById('user-detail-company').textContent = user.company || ''; document.getElementById('user-detail-company').textContent = user.company || '';
document.getElementById('user-detail-email').textContent = user.email || '-'; const emailEl = document.getElementById('user-detail-email');
document.getElementById('user-detail-homepage').textContent = user.homepage || '-'; emailEl.innerHTML = user.email ? `<a href="mailto:${user.email}">${user.email}</a>` : '-';
const hpEl = document.getElementById('user-detail-homepage');
const hp = user.homepage || '';
hpEl.innerHTML = hp ? `<a href="${hp.startsWith('http') ? '' : 'https://'}${hp}">${hp}</a>` : '-';
document.getElementById('user-detail-location').textContent = user.location || '-'; document.getElementById('user-detail-location').textContent = user.location || '-';
document.getElementById('user-detail-description').innerHTML = (user.Description || '-').replace(/\n/g, '<br>'); document.getElementById('user-detail-description').innerHTML = (user.Description || '-').replace(/\n/g, '<br>');