diff --git a/web/admin.css b/web/admin.css index 6c2ac3a..3cf9271 100644 --- a/web/admin.css +++ b/web/admin.css @@ -16,22 +16,95 @@ body { color: white; padding: 0.5rem 2rem; display: flex; - justify-content: space-between; + justify-content: center; align-items: center; + gap: 2rem; box-shadow: 0 2px 10px rgba(0,0,0,0.1); position: relative; z-index: 100; } +.title { + order: 2; + flex: 1; + text-align: center; +} + .title h1 { margin: 0; font-size: 1.5rem; } .menu-buttons { + order: 1; display: flex; gap: 1rem; align-items: center; + flex-wrap: wrap; +} + +.top-bar .user-info { + order: 3; + font-size: 0.9rem; + opacity: 0.9; + display: flex; + align-items: center; + gap: 0.3rem; +} +.dropdown { + position: relative; + display: inline-block; +} + +.dropdown-toggle { + white-space: nowrap; +} + +.dropdown-menu { + display: none; + position: absolute; + background-color: white; + min-width: 200px; + box-shadow: 0 8px 16px rgba(0,0,0,0.2); + border-radius: 5px; + z-index: 1000; + top: 100%; + left: 0; + margin-top: 0.5rem; + padding: 0; +} + +.dropdown-menu a { + color: #333; + padding: 0.75rem 1.5rem; + text-decoration: none; + display: flex; + justify-content: space-between; + align-items: center; + transition: background-color 0.2s ease; + white-space: nowrap; +} + +.shortcut { + font-size: 0.8rem; + color: #999; + margin-left: 1rem; +} + +.dropdown-menu a:hover { + background-color: #f5f5f5; +} + +.dropdown-menu a:first-child { + border-radius: 5px 5px 0 0; +} + +.dropdown-menu a:last-child { + border-radius: 0 0 5px 5px; +} + +.dropdown-menu.active { + display: block; } .top-bar .user-info { diff --git a/web/admin.html b/web/admin.html index a175286..34e9ece 100644 --- a/web/admin.html +++ b/web/admin.html @@ -13,27 +13,26 @@

✈️ Swansea Tower

Logged in as: Loading... | @@ -1399,6 +1398,40 @@ }); } + // Dropdown menu handlers + document.addEventListener('click', function(e) { + const actionsBtn = document.getElementById('actionsDropdownBtn'); + const actionsMenu = document.getElementById('actionsDropdownMenu'); + const adminBtn = document.getElementById('adminDropdownBtn'); + const adminMenu = document.getElementById('adminDropdownMenu'); + + // Handle Actions dropdown + if (e.target === actionsBtn) { + e.preventDefault(); + actionsMenu.classList.toggle('active'); + adminMenu.classList.remove('active'); + } else if (!actionsMenu.contains(e.target)) { + actionsMenu.classList.remove('active'); + } + + // Handle Admin dropdown + if (e.target === adminBtn) { + e.preventDefault(); + adminMenu.classList.toggle('active'); + actionsMenu.classList.remove('active'); + } else if (!adminMenu.contains(e.target)) { + adminMenu.classList.remove('active'); + } + }); + + function closeActionsDropdown() { + document.getElementById('actionsDropdownMenu').classList.remove('active'); + } + + function closeAdminDropdown() { + document.getElementById('adminDropdownMenu').classList.remove('active'); + } + function showLogin() { document.getElementById('loginModal').style.display = 'block'; document.getElementById('login-username').focus(); @@ -3335,20 +3368,20 @@ currentUserRole = userData.role; console.log('User role from API:', currentUserRole); // Debug log - // Show user management button only for administrators - const userManagementBtn = document.getElementById('user-management-btn'); + // Show user management in dropdown only for administrators + const userManagementDropdown = document.getElementById('user-management-dropdown'); if (currentUserRole && currentUserRole.toUpperCase() === 'ADMINISTRATOR') { - userManagementBtn.style.display = 'inline-block'; - console.log('Showing user management button'); // Debug log + userManagementDropdown.style.display = 'block'; + console.log('Showing user management in dropdown'); // Debug log } else { - userManagementBtn.style.display = 'none'; - console.log('Hiding user management button, current role:', currentUserRole); // Debug log + userManagementDropdown.style.display = 'none'; + console.log('Hiding user management, current role:', currentUserRole); // Debug log } } } catch (error) { console.error('Error updating user role:', error); // Hide user management by default on error - document.getElementById('user-management-btn').style.display = 'none'; + document.getElementById('user-management-dropdown').style.display = 'none'; } } diff --git a/web/reports.html b/web/reports.html index e26dcf1..e62779d 100644 --- a/web/reports.html +++ b/web/reports.html @@ -22,23 +22,32 @@ color: white; padding: 0.5rem 2rem; display: flex; - justify-content: space-between; + justify-content: center; align-items: center; + gap: 2rem; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } + .title { + order: 2; + flex: 1; + text-align: center; + } + .title h1 { margin: 0; font-size: 1.5rem; } .menu-buttons { + order: 1; display: flex; gap: 1rem; align-items: center; } .top-bar .user-info { + order: 3; font-size: 0.9rem; opacity: 0.9; display: flex; @@ -352,14 +361,14 @@
-
-

📊 PPR Reports

-
+
+

📊 PPR Reports

+