Update the guild selector to display server information using visual cards
Replace the existing guild dropdown with a new card-based UI for displaying server icons, names, and admin status, including updated CSS for styling and JavaScript logic for population. Replit-Commit-Author: Agent Replit-Commit-Session-Id: aed2e46d-25bb-4b73-81a1-bb9e8437c261 Replit-Commit-Checkpoint-Type: intermediate_checkpoint Replit-Commit-Event-Id: a66a236d-ea40-44f2-a853-1320114b514d Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3bdfff67-975a-46ad-9845-fbb6b4a4c4b5/aed2e46d-25bb-4b73-81a1-bb9e8437c261/xfdSNeM Replit-Helium-Checkpoint-Created: true
This commit is contained in:
sirpiglr
parent
cbb7619552
commit
25a458d4b8
1 changed files with 275 additions and 26 deletions
|
|
@ -321,15 +321,180 @@
|
|||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.guild-selector select {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
.guild-selector-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.75rem 1rem;
|
||||
background: var(--secondary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
color: var(--foreground);
|
||||
font-size: 0.875rem;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.guild-selector-header:hover {
|
||||
background: var(--card-hover);
|
||||
border-color: var(--aethex-500);
|
||||
}
|
||||
|
||||
.guild-selector-header.open {
|
||||
border-radius: 10px 10px 0 0;
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
|
||||
.selected-guild {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.selected-guild-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 8px;
|
||||
background: var(--muted);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.selected-guild-icon img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.selected-guild-name {
|
||||
font-weight: 500;
|
||||
font-size: 0.875rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.guild-selector-arrow {
|
||||
color: var(--muted-foreground);
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.guild-selector-header.open .guild-selector-arrow {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.guild-dropdown {
|
||||
display: none;
|
||||
background: var(--secondary);
|
||||
border: 1px solid var(--border);
|
||||
border-top: none;
|
||||
border-radius: 0 0 10px 10px;
|
||||
max-height: 280px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.guild-dropdown.open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.guild-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem 1rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
border-left: 3px solid transparent;
|
||||
}
|
||||
|
||||
.guild-card:hover {
|
||||
background: var(--card-hover);
|
||||
}
|
||||
|
||||
.guild-card.active {
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
border-left-color: var(--aethex-500);
|
||||
}
|
||||
|
||||
.guild-card:last-child {
|
||||
border-radius: 0 0 8px 8px;
|
||||
}
|
||||
|
||||
.guild-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(135deg, var(--aethex-500), var(--neon-blue));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.guild-icon img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.guild-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.guild-name {
|
||||
font-weight: 500;
|
||||
font-size: 0.875rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.guild-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.7rem;
|
||||
color: var(--muted-foreground);
|
||||
margin-top: 0.125rem;
|
||||
}
|
||||
|
||||
.guild-admin-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.125rem 0.375rem;
|
||||
background: rgba(59, 130, 246, 0.15);
|
||||
border: 1px solid rgba(59, 130, 246, 0.3);
|
||||
border-radius: 4px;
|
||||
color: var(--aethex-400);
|
||||
font-size: 0.65rem;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.guild-member-count {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.guild-check {
|
||||
color: var(--aethex-500);
|
||||
opacity: 0;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
|
||||
.guild-card.active .guild-check {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.nav-section {
|
||||
|
|
@ -789,9 +954,16 @@
|
|||
</a>
|
||||
|
||||
<div class="guild-selector">
|
||||
<select id="guildSelect">
|
||||
<option value="">Select a server...</option>
|
||||
</select>
|
||||
<div class="guild-selector-header" id="guildSelectorHeader" onclick="toggleGuildDropdown()">
|
||||
<div class="selected-guild">
|
||||
<div class="selected-guild-icon" id="selectedGuildIcon">?</div>
|
||||
<span class="selected-guild-name" id="selectedGuildName">Select a server...</span>
|
||||
</div>
|
||||
<svg class="guild-selector-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M6 9l6 6 6-6"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="guild-dropdown" id="guildDropdown"></div>
|
||||
</div>
|
||||
|
||||
<nav>
|
||||
|
|
@ -1424,27 +1596,19 @@
|
|||
document.getElementById('userAvatar').src = currentUser.avatarUrl;
|
||||
document.getElementById('userName').textContent = currentUser.globalName || currentUser.username;
|
||||
|
||||
const select = document.getElementById('guildSelect');
|
||||
currentUser.guilds.forEach(g => {
|
||||
const opt = document.createElement('option');
|
||||
opt.value = g.id;
|
||||
opt.textContent = g.name;
|
||||
opt.dataset.isAdmin = g.isAdmin;
|
||||
select.appendChild(opt);
|
||||
});
|
||||
|
||||
select.addEventListener('change', () => {
|
||||
currentGuild = select.value;
|
||||
const isAdmin = select.selectedOptions[0]?.dataset.isAdmin === 'true';
|
||||
document.getElementById('adminSection').style.display = isAdmin ? 'block' : 'none';
|
||||
loadPageData();
|
||||
});
|
||||
populateGuildCards(currentUser.guilds);
|
||||
|
||||
if (currentUser.guilds.length > 0) {
|
||||
select.value = currentUser.guilds[0].id;
|
||||
select.dispatchEvent(new Event('change'));
|
||||
selectGuild(currentUser.guilds[0]);
|
||||
}
|
||||
|
||||
document.addEventListener('click', (e) => {
|
||||
const selector = document.querySelector('.guild-selector');
|
||||
if (!selector.contains(e.target)) {
|
||||
closeGuildDropdown();
|
||||
}
|
||||
});
|
||||
|
||||
document.querySelectorAll('.nav-item').forEach(item => {
|
||||
item.addEventListener('click', () => {
|
||||
document.querySelectorAll('.nav-item').forEach(i => i.classList.remove('active'));
|
||||
|
|
@ -1483,6 +1647,91 @@
|
|||
}
|
||||
}
|
||||
|
||||
function populateGuildCards(guilds) {
|
||||
const dropdown = document.getElementById('guildDropdown');
|
||||
dropdown.innerHTML = '';
|
||||
|
||||
if (guilds.length === 0) {
|
||||
dropdown.innerHTML = '<div style="padding: 1rem; text-align: center; color: var(--muted-foreground);">No servers found</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
guilds.forEach(g => {
|
||||
const card = document.createElement('div');
|
||||
card.className = 'guild-card';
|
||||
card.dataset.guildId = g.id;
|
||||
card.dataset.isAdmin = g.isAdmin;
|
||||
card.onclick = () => selectGuild(g);
|
||||
|
||||
const iconContent = g.icon
|
||||
? `<img src="${g.icon}" alt="${g.name}">`
|
||||
: g.name.charAt(0).toUpperCase();
|
||||
|
||||
let statusHtml = '';
|
||||
if (g.isAdmin) {
|
||||
statusHtml = '<span class="guild-admin-badge">Admin</span>';
|
||||
}
|
||||
if (g.memberCount) {
|
||||
statusHtml += `<span class="guild-member-count">${g.memberCount.toLocaleString()} members</span>`;
|
||||
}
|
||||
|
||||
card.innerHTML = `
|
||||
<div class="guild-icon">${iconContent}</div>
|
||||
<div class="guild-info">
|
||||
<div class="guild-name">${escapeHtml(g.name)}</div>
|
||||
<div class="guild-status">${statusHtml}</div>
|
||||
</div>
|
||||
<svg class="guild-check" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
|
||||
<path d="M20 6L9 17l-5-5"/>
|
||||
</svg>
|
||||
`;
|
||||
|
||||
dropdown.appendChild(card);
|
||||
});
|
||||
}
|
||||
|
||||
function selectGuild(guild) {
|
||||
currentGuild = guild.id;
|
||||
|
||||
document.querySelectorAll('.guild-card').forEach(c => {
|
||||
c.classList.toggle('active', c.dataset.guildId === guild.id);
|
||||
});
|
||||
|
||||
const iconEl = document.getElementById('selectedGuildIcon');
|
||||
if (guild.icon) {
|
||||
iconEl.innerHTML = `<img src="${guild.icon}" alt="${guild.name}">`;
|
||||
} else {
|
||||
iconEl.innerHTML = guild.name.charAt(0).toUpperCase();
|
||||
}
|
||||
|
||||
document.getElementById('selectedGuildName').textContent = guild.name;
|
||||
|
||||
document.getElementById('adminSection').style.display = guild.isAdmin ? 'block' : 'none';
|
||||
|
||||
closeGuildDropdown();
|
||||
loadPageData();
|
||||
}
|
||||
|
||||
function toggleGuildDropdown() {
|
||||
const header = document.getElementById('guildSelectorHeader');
|
||||
const dropdown = document.getElementById('guildDropdown');
|
||||
const isOpen = dropdown.classList.contains('open');
|
||||
|
||||
header.classList.toggle('open', !isOpen);
|
||||
dropdown.classList.toggle('open', !isOpen);
|
||||
}
|
||||
|
||||
function closeGuildDropdown() {
|
||||
document.getElementById('guildSelectorHeader').classList.remove('open');
|
||||
document.getElementById('guildDropdown').classList.remove('open');
|
||||
}
|
||||
|
||||
function escapeHtml(text) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
function showPage(page) {
|
||||
document.querySelectorAll('.page').forEach(p => p.classList.add('hidden'));
|
||||
document.getElementById('page-' + page)?.classList.remove('hidden');
|
||||
|
|
|
|||
Loading…
Reference in a new issue