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

Add location and description to user cards, update search

Browse Source
This commit is contained in:
Kato
2026-09-02 20:57:51 +00:00
parent 19d42f9c01
commit 9b61ee0111
2 changed files with 7 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/styles.css
+2
View File
@@ -78,6 +78,8 @@ a:hover { text-decoration: underline; }
.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-company, .user-email { font-size: .9rem; color: #6b7280; margin: 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-actions { display: flex; gap: 12px; align-items: center; }
.user-btn { padding: 8px 16px; font-size: .85rem; }
.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; }
js/main.js
+5 -1
View File
@@ -241,6 +241,8 @@ async function loadUsers() {
<h4>${user.username || 'N/A'}</h4>
<p class="user-company">${user.company || ''}</p>
<p class="user-email">${user.email || ''}</p>
<p class="user-location">${user.location || ''}</p>
<p class="user-description">${user.Description || ''}</p>
</div>
`;
usersContainer.appendChild(card);
@@ -265,7 +267,9 @@ function filterUsers(searchTerm) {
const username = card.querySelector('h4')?.innerText?.toLowerCase() || '';
const company = card.querySelector('.user-company')?.innerText?.toLowerCase() || '';
const email = card.querySelector('.user-email')?.innerText?.toLowerCase() || '';
const displayText = username + ' ' + company + ' ' + email;
const location = card.querySelector('.user-location')?.innerText?.toLowerCase() || '';
const description = card.querySelector('.user-description')?.innerText?.toLowerCase() || '';
const displayText = username + ' ' + company + ' ' + email + ' ' + location + ' ' + description;
card.style.display = displayText.includes(term) ? 'block' : 'none';
});
}