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

Position rank badge at top-right corner of user card

Browse Source
This commit is contained in:
Kato
2026-09-04 19:56:23 +00:00
parent 80a2fc81be
commit 72c1e89f6d
2 changed files with 8 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/styles.css
+6 -2
View File
@@ -72,7 +72,7 @@ a:hover { text-decoration: underline; }
.user-search input { width: 100%; padding: 10px; border: 1px solid var(--gray2); border-radius: 8px; font-size: 1rem; outline: none; } .user-search input { width: 100%; padding: 10px; border: 1px solid var(--gray2); border-radius: 8px; font-size: 1rem; outline: none; }
.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; position: relative; overflow: visible; }
.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 { 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-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%; }
@@ -87,7 +87,11 @@ 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; }
.user-posts { font-size: .75rem; color: #9ca3af; margin: 6px 0 0 0; } .user-posts { font-size: .75rem; color: #9ca3af; margin: 6px 0 0 0; }
.rank-badge { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: 12px; white-space: nowrap; } .rank-badge {
font-size: .6rem; font-weight: 700; padding: 4px 8px; border-radius: 0 0 8px 8px;
position: absolute; top: 0; right: 0; white-space: nowrap;
box-shadow: 0 -1px 3px rgba(0,0,0,.08);
}
.rank-rookie { background: #f3f4f6; color: #6b7280; } .rank-rookie { background: #f3f4f6; color: #6b7280; }
.rank-beginner { background: #d1fae5; color: #065f46; } .rank-beginner { background: #d1fae5; color: #065f46; }
.rank-member { background: #dbeafe; color: #1e40af; } .rank-member { background: #dbeafe; color: #1e40af; }
js/main.js
+2 -4
View File
@@ -248,10 +248,7 @@ async function loadUsers() {
card.innerHTML = ` card.innerHTML = `
<div class="user-avatar">${avatarContent}</div> <div class="user-avatar">${avatarContent}</div>
<div class="user-info"> <div class="user-info">
<div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap;"> <h4 style="margin:0">${user.username || 'N/A'}</h4>
<h4 style="margin:0">${user.username || 'N/A'}</h4>
<span class="rank-badge rank-${rank.level}">${rank.emoji} ${rank.title}</span>
</div>
<p class="user-company">${user.company || ''}</p> <p class="user-company">${user.company || ''}</p>
<p class="user-email">${user.email ? `<a href="mailto:${user.email}">${user.email}</a>` : ''}</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-homepage">${user.homepage ? `<a href="${user.homepage.startsWith('http') ? '' : 'https://'}${user.homepage}" target="_blank">${user.homepage}</a>` : ''}</p>
@@ -259,6 +256,7 @@ async function loadUsers() {
<p class="user-description">${user.Description || ''}</p> <p class="user-description">${user.Description || ''}</p>
${user.posts ? `<p class="user-posts">${user.posts} <span class="hide-de">Beiträge</span><span class="hide-en">posts</span></p>` : ''} ${user.posts ? `<p class="user-posts">${user.posts} <span class="hide-de">Beiträge</span><span class="hide-en">posts</span></p>` : ''}
</div> </div>
<span class="rank-badge rank-${rank.level}" title="${rank.emoji} ${rank.title}">${rank.emoji} ${rank.title}</span>
`; `;
card.addEventListener('click', () => openUserDetailModal(user)); card.addEventListener('click', () => openUserDetailModal(user));
usersContainer.appendChild(card); usersContainer.appendChild(card);