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

feat: Mejorar la accesibilidad y el estilo de los modales móviles en el panel de control

Browse Source
This commit is contained in:
Shni
2025-10-15 02:56:27 -05:00
parent f3d69ed3c8
commit 8f22f749ff
3 changed files with 32 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/server/views/layouts/layout.ejs
View File

@@ -19,7 +19,7 @@
<%= head %> <%= head %>
<% } %> <% } %>
</head> </head>
<body class="min-h-screen pixel-grid-bg pt-14" style="background-image: url('/assets/images/background.svg'); backdrop-filter: blur(8px); background-size: cover; background-position: center; background-attachment: fixed; background-repeat: no-repeat;"> <body class="min-h-screen pixel-grid-bg pt-14" style="background-image: url('/assets/images/background.svg'); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(10px); background-size: cover; background-position: center; background-attachment: fixed; background-repeat: no-repeat;">
<% if (useDashboardNav) { %> <% if (useDashboardNav) { %>
<%# If the server pre-rendered the dashboard nav it will be available as dashboardNav (string) %> <%# If the server pre-rendered the dashboard nav it will be available as dashboardNav (string) %>

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

@@ -113,33 +113,9 @@
<main class="flex-1"> <main class="flex-1">
<div class="mb-6"> <div class="mb-6">
<h1 class="text-4xl font-bold text-white">Welcome <span class="text-blue-400"><%= user?.username || 'Admin' %></span>,</h1> <h1 class="text-4xl font-bold text-white">Welcome <span class="text-blue-400"><%= user?.username || 'Admin' %></span>,</h1>
<p class="text-slate-300 mt-2">find commonly used dashboard pages below.</p>
</div> </div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="bg-white/4 rounded-xl p-6">
<h4 class="text-white font-semibold">Custom messages</h4>
<p class="text-slate-300 text-sm mt-2">Create fully customized messages called templates and pack them with your very own embeds, buttons and select menus.</p>
<div class="mt-4"><a href="#" class="inline-block px-3 py-2 rounded bg-slate-700 text-white">Create template</a></div>
</div>
<div class="bg-white/4 rounded-xl p-6">
<h4 class="text-white font-semibold">Moderation cases</h4>
<p class="text-slate-300 text-sm mt-2">View and edit all moderation cases using the dashboard.</p>
<div class="mt-4"><a href="#" class="inline-block px-3 py-2 rounded bg-slate-700 text-white">View cases</a></div>
</div>
<div class="bg-white/4 rounded-xl p-6">
<h4 class="text-white font-semibold">User reports</h4>
<p class="text-slate-300 text-sm mt-2">Allow users to report others and fully customize how to handle them.</p>
<div class="mt-4"><a href="#" class="inline-block px-3 py-2 rounded bg-slate-700 text-white">Configure reports</a></div>
</div>
<div class="bg-white/4 rounded-xl p-6">
<h4 class="text-white font-semibold">Role greetings</h4>
<p class="text-slate-300 text-sm mt-2">Welcome users to their new role by using role assignment messages.</p>
<div class="mt-4"><a href="#" class="inline-block px-3 py-2 rounded bg-slate-700 text-white">Show role messages</a></div>
</div>
</div> </div>
</main> </main>
@@ -306,25 +282,33 @@
<script> <script>
// Drawer toggle logic // Drawer toggle logic - attach after DOM is loaded so elements exist
const drawerToggle = document.getElementById('drawerToggle'); document.addEventListener('DOMContentLoaded', function () {
const mobileDrawer = document.getElementById('mobileDrawer'); const drawerToggle = document.getElementById('drawerToggle');
const drawerBackdrop = document.getElementById('drawerBackdrop'); const mobileDrawer = document.getElementById('mobileDrawer');
function openDrawer() { const drawerBackdrop = document.getElementById('drawerBackdrop');
mobileDrawer.classList.remove('-translate-x-full'); function openDrawer() {
drawerBackdrop.classList.remove('hidden'); if (!mobileDrawer || !drawerBackdrop) return;
} mobileDrawer.classList.remove('-translate-x-full');
function closeDrawer() { drawerBackdrop.classList.remove('hidden');
mobileDrawer.classList.add('-translate-x-full'); // move focus to drawer for accessibility
drawerBackdrop.classList.add('hidden'); mobileDrawer.setAttribute('tabindex', '-1');
} mobileDrawer.focus();
drawerToggle?.addEventListener('click', openDrawer); }
drawerBackdrop?.addEventListener('click', closeDrawer); function closeDrawer() {
// support close button inside the drawer if (!mobileDrawer || !drawerBackdrop) return;
const drawerClose = document.getElementById('drawerClose'); mobileDrawer.classList.add('-translate-x-full');
drawerClose?.addEventListener('click', closeDrawer); drawerBackdrop.classList.add('hidden');
document.addEventListener('keydown', (e) => { drawerToggle?.focus();
if (e.key === 'Escape') closeDrawer(); }
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> </script>

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

@@ -132,8 +132,8 @@
</script> </script>
<!-- Mobile modals --> <!-- Mobile modals -->
<div id="mobileGuildModal" class="fixed inset-0 bg-black/60 hidden z-50"> <div id="mobileGuildModal" class="fixed inset-0 bg-black/60 hidden z-50" style="display:block;">
<div class="absolute bottom-0 left-0 right-0 bg-[#1f2933] rounded-t-xl p-4 max-h-[80vh] overflow-auto"> <div class="fixed inset-x-0 bottom-0 bg-[#1f2933] rounded-t-xl p-4 max-h-[80vh] overflow-auto" style="margin:0;">
<div class="flex items-center justify-between mb-3"> <div class="flex items-center justify-between mb-3">
<h3 class="text-white font-medium">Servers</h3> <h3 class="text-white font-medium">Servers</h3>
<button id="mobileGuildClose" class="text-white/70">Cerrar</button> <button id="mobileGuildClose" class="text-white/70">Cerrar</button>
@@ -155,10 +155,11 @@
<% } %> <% } %>
</div> </div>
</div> </div>
</div>
</div> </div>
<div id="mobileUserSheet" class="fixed inset-0 bg-black/60 hidden z-50"> <div id="mobileUserSheet" class="fixed inset-0 bg-black/60 hidden z-50">
<div class="absolute bottom-0 left-0 right-0 bg-[#1f2933] rounded-t-xl p-4"> <div class="fixed inset-x-0 bottom-0 bg-[#1f2933] rounded-t-xl p-4 max-h-[80vh] overflow-auto">
<h3 class="text-white font-medium mb-3">User settings</h3> <h3 class="text-white font-medium mb-3">User settings</h3>
<a href="/dashboard/select-guild" class="block py-2 text-white">Servers</a> <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> <a href="/auth/logout" class="block py-2 text-rose-300">Log out</a>