shni/amayo
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Cambiar las imágenes de avatar e íconos a formato WebP y ajustar el menú de usuario en el panel de control

Browse Source
This commit is contained in:
Shni
2025-10-15 02:50:47 -05:00
parent 1307f7326a
commit f3d69ed3c8
2 changed files with 27 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/server/views/pages/dashboard.ejs
View File

@@ -20,7 +20,7 @@
<div class="ml-3 relative">
<button id="cardUserBtn" class="flex items-center gap-2 px-3 py-1 rounded-md hover:bg-white/5 focus:outline-none" aria-expanded="false">
<% if (user && user.id && user.avatar) { %>
<img src="https://cdn.discordapp.com/avatars/<%= user.id %>/<%= user.avatar %>.png" class="w-8 h-8 rounded-full" alt="avatar">
<img src="https://cdn.discordapp.com/avatars/<%= user.id %>/<%= user.avatar %>.webp" class="w-8 h-8 rounded-full" alt="avatar">
<% } else { %>
<img src="/assets/images/snap1.svg" class="w-8 h-8 rounded-full" alt="avatar">
<% } %>
@@ -40,7 +40,7 @@
<div class="p-3 cursor-pointer hover:bg-white/5 flex items-center justify-between text-white" data-id="<%= g.id %>">
<div class="flex items-center gap-3">
<% if (g.icon) { %>
<img src="https://cdn.discordapp.com/icons/<%= g.id %>/<%= g.icon %>.png" class="w-8 h-8 rounded-full" alt="icon">
<img src="https://cdn.discordapp.com/icons/<%= g.id %>/<%= g.icon %>.webp" class="w-8 h-8 rounded-full" alt="icon">
<% } else { %>
<div class="w-8 h-8 rounded-full bg-white/8 flex items-center justify-center text-xs text-white">S</div>
<% } %>
@@ -320,9 +320,30 @@
}
drawerToggle?.addEventListener('click', openDrawer);
drawerBackdrop?.addEventListener('click', closeDrawer);
// support close button inside the drawer
const drawerClose = document.getElementById('drawerClose');
drawerClose?.addEventListener('click', closeDrawer);
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') closeDrawer();
});
</script>
<!-- Mobile drawer & backdrop (used by hamburger) -->
<div id="drawerBackdrop" class="fixed inset-0 bg-black/60 hidden z-40"></div>
<nav id="mobileDrawer" class="fixed top-0 left-0 bottom-0 w-72 max-w-xs bg-[#0f1720] -translate-x-full transform transition-transform duration-200 z-50">
<div class="p-4 border-b border-white/6 flex items-center justify-between">
<div class="flex items-center gap-3">
<% if (user && user.id && user.avatar) { %>
<img src="https://cdn.discordapp.com/avatars/<%= user.id %>/<%= user.avatar %>.webp" class="w-8 h-8 rounded-full" alt="avatar">
<% } %>
<div class="text-white font-medium"><%= user?.username || '' %></div>
</div>
<button id="drawerClose" class="text-white/70">Cerrar</button>
</div>
<div class="p-4 space-y-2">
<a href="/dashboard/select-guild" class="block py-2 text-white">Servers</a>
<a href="/auth/logout" class="block py-2 text-rose-300">Log out</a>
</div>
</nav>

8
src/server/views/partials/dashboard_nav.ejs
View File

@@ -26,7 +26,7 @@
<% guilds.forEach(g => { %>
<div class="p-1 rounded-md hover:bg-white/5 cursor-pointer text-white guild-item flex items-center gap-3" data-id="<%= g.id %>">
<% if (g.icon) { %>
<img src="https://cdn.discordapp.com/icons/<%= g.id %>/<%= g.icon %>.png" class="w-5 h-5 rounded-full" alt="icon">
<img src="https://cdn.discordapp.com/icons/<%= g.id %>/<%= g.icon %>.webp" class="w-5 h-5 rounded-full" alt="icon">
<% } else { %>
<div class="w-5 h-5 rounded-full bg-white/8 flex items-center justify-center text-xs text-white">S</div>
<% } %>
@@ -50,7 +50,7 @@
<% } %>
<svg class="w-3 h-3 text-white/80 ml-1" viewBox="0 0 20 20" fill="none"><path d="M6 8l4 4 4-4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
</button>
<div id="userMenu" class="origin-top-right absolute right-0 mt-2 w-36 bg-white/80 backdrop-blur-md rounded-md p-2 hidden z-50" style="background-color: rgba(12,15,18,0.9);">
<div id="userMenu" class="origin-top-right absolute right-0 mt-2 w-36 bg-white/80 backdrop-blur-md rounded-md p-2 hidden md:block z-50" style="background-color: rgba(12,15,18,0.9);">
<a href="/auth/logout" class="block px-3 py-2 text-sm text-rose-300 hover:bg-white/5 rounded">Log out</a>
</div>
</div>
@@ -143,7 +143,7 @@
<% guilds.forEach(g => { %>
<div class="flex items-center gap-3 p-2 rounded-md hover:bg-white/5 cursor-pointer" data-id="<%= g.id %>">
<% if (g.icon) { %>
<img src="https://cdn.discordapp.com/icons/<%= g.id %>/<%= g.icon %>.png" class="w-8 h-8 rounded-full" alt="icon">
<img src="https://cdn.discordapp.com/icons/<%= g.id %>/<%= g.icon %>.webp" class="w-8 h-8 rounded-full" alt="icon">
<% } else { %>
<div class="w-8 h-8 rounded-full bg-white/8"></div>
<% } %>
@@ -161,7 +161,7 @@
<div class="absolute bottom-0 left-0 right-0 bg-[#1f2933] rounded-t-xl p-4">
<h3 class="text-white font-medium mb-3">User settings</h3>
<a href="/dashboard/select-guild" class="block py-2 text-white">Servers</a>
<!-- Log out is available in the user card/menu so we avoid duplicating it here -->
<a href="/auth/logout" class="block py-2 text-rose-300">Log out</a>
<div class="text-right mt-2"><button id="mobileUserClose" class="text-white/70">Cerrar</button></div>
</div>
</div>