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

Fix: load users on page reload, show image in avatar

Browse Source
This commit is contained in:
Kato
2026-09-02 20:45:01 +00:00
parent e00d8b4555
commit 19d42f9c01
2 changed files with 10 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/styles.css
+3 -1
View File
@@ -73,7 +73,9 @@ a:hover { text-decoration: underline; }
.user-search input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(30,64,175,.1); } .user-search input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(30,64,175,.1); }
.users-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; } .users-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.user-card { background: var(--white); border: 1px solid var(--gray2); border-radius: 12px; padding: 20px; display: flex; align-items: flex-start; gap: 16px; } .user-card { background: var(--white); border: 1px solid var(--gray2); border-radius: 12px; padding: 20px; display: flex; align-items: flex-start; gap: 16px; }
.user-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--blue); color: var(--white); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.2rem; flex-shrink: 0; } .user-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--blue); color: var(--white); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.2rem; flex-shrink: 0; overflow: hidden; }
.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-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, .user-email { font-size: .9rem; color: #6b7280; margin: 0; }
.user-actions { display: flex; gap: 12px; align-items: center; } .user-actions { display: flex; gap: 12px; align-items: center; }
js/main.js
+7 -1
View File
@@ -1,5 +1,8 @@
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
checkSession(); checkSession();
if (getCookie('sessionid')) {
loadUsers();
}
}); });
function getCookie(name) { function getCookie(name) {
@@ -229,8 +232,11 @@ async function loadUsers() {
data.data.forEach(user => { data.data.forEach(user => {
const card = document.createElement('div'); const card = document.createElement('div');
card.className = 'user-card'; card.className = 'user-card';
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>`;
card.innerHTML = ` card.innerHTML = `
<div class="user-avatar">${(user.username || '').charAt(0).toUpperCase()}</div> <div class="user-avatar">${avatarContent}</div>
<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>