From 363727db643358784bda6059f27f4e7305f094de Mon Sep 17 00:00:00 2001 From: Ricardo Campos Date: Thu, 4 Sep 2025 13:49:01 -0300 Subject: [PATCH] feat: improve header and add calendar button --- auth.css | 155 +++++++++++++++++++++++++++++++++++++++++++++++++-- index.html | 15 ++++- src/index.ts | 71 ++++++++++++++++++++++- 3 files changed, 232 insertions(+), 9 deletions(-) diff --git a/auth.css b/auth.css index ffce53c..5061dc8 100644 --- a/auth.css +++ b/auth.css @@ -117,14 +117,108 @@ .user-details { display: flex; align-items: center; - gap: 10px; + gap: 15px; + flex-wrap: wrap; } .user-details span { font-weight: 500; font-size: 0.9rem; + white-space: nowrap; } +/* Header buttons container */ +.header-buttons { + display: flex; + align-items: center; + gap: 8px; +} + +/* Header button styles */ +.header-btn { + padding: 6px 12px; + background: rgba(255, 255, 255, 0.2); + color: white; + border: 1px solid rgba(255, 255, 255, 0.3); + border-radius: 6px; + cursor: pointer; + font-size: 0.8rem; + transition: all 0.3s ease; + backdrop-filter: blur(10px); + white-space: nowrap; + min-height: 32px; +} + +.header-btn:hover { + background: rgba(255, 255, 255, 0.3); + transform: translateY(-1px); +} + +.header-btn.logout:hover { + background: rgba(255, 107, 107, 0.3); + border-color: rgba(255, 107, 107, 0.5); +} + +/* Mobile menu toggle button */ +.mobile-menu-toggle { + display: none; + padding: 8px 12px; + background: rgba(255, 255, 255, 0.2); + color: white; + border: 1px solid rgba(255, 255, 255, 0.3); + border-radius: 6px; + cursor: pointer; + font-size: 1.2rem; + transition: all 0.3s ease; + backdrop-filter: blur(10px); +} + +.mobile-menu-toggle:hover { + background: rgba(255, 255, 255, 0.3); +} + +/* Mobile dropdown menu */ +.mobile-menu { + position: absolute; + top: 100%; + right: 0; + background: rgba(103, 126, 234, 0.95); + backdrop-filter: blur(15px); + border: 1px solid rgba(255, 255, 255, 0.2); + border-radius: 8px; + box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); + z-index: 1000; + min-width: 160px; + margin-top: 8px; +} + +.mobile-menu-item { + display: block; + width: 100%; + padding: 12px 16px; + background: transparent; + color: white; + border: none; + text-align: left; + cursor: pointer; + font-size: 0.9rem; + transition: all 0.2s ease; + border-bottom: 1px solid rgba(255, 255, 255, 0.1); +} + +.mobile-menu-item:last-child { + border-bottom: none; +} + +.mobile-menu-item:hover { + background: rgba(255, 255, 255, 0.2); +} + +.mobile-menu-item.logout:hover { + background: rgba(255, 107, 107, 0.3); +} + +/* Legacy support for existing logout-btn class */ .logout-btn { padding: 6px 12px; background: rgba(255, 255, 255, 0.2); @@ -201,11 +295,13 @@ @media (max-width: 768px) { .auth-header { padding: 10px 0; + position: relative; } .auth-container { min-height: 45px; padding: 0 12px; + position: relative; } .logo { @@ -216,13 +312,18 @@ font-size: 1.1rem; } - .auth-section, - .user-info { + .auth-section { order: 2; width: 100%; justify-content: center; } + .user-info { + order: 2; + position: relative; + width: auto; + } + .auth-form, .settings-form { min-width: 280px; @@ -230,6 +331,52 @@ } .user-details { - gap: 8px; + gap: 10px; + position: relative; + } + + .user-details span { + font-size: 0.8rem; + } + + /* Hide desktop buttons on mobile */ + .header-buttons { + display: none; + } + + /* Show mobile menu toggle */ + .mobile-menu-toggle { + display: block !important; + } + + /* Ensure mobile menu appears correctly */ + .mobile-menu { + right: 0; + width: 180px; + } +} + +/* For very small screens */ +@media (max-width: 480px) { + .auth-container { + padding: 0 8px; + flex-wrap: wrap; + justify-content: space-between; + } + + .user-details span { + font-size: 0.75rem; + max-width: 150px; + overflow: hidden; + text-overflow: ellipsis; + } + + .mobile-menu { + width: 160px; + right: -10px; + } + + .logo h2 { + font-size: 1rem; } } diff --git a/index.html b/index.html index f3d4dd3..c4f5700 100644 --- a/index.html +++ b/index.html @@ -79,8 +79,19 @@ diff --git a/src/index.ts b/src/index.ts index 749caf5..0f20a15 100644 --- a/src/index.ts +++ b/src/index.ts @@ -213,7 +213,7 @@ async function handleLogout() { } async function handleSettings() { - const showSettings = getButtonById('settingsBtn').textContent === 'Settings'; + const showSettings = getButtonById('settingsBtn').textContent === 'Settings' || getButtonById('settingsBtn').textContent === '⚙️ Settings'; if (showSettings) { showLoading(); @@ -251,7 +251,46 @@ async function handleSettings() { else { appContent?.classList.remove('hidden'); settingsContent?.classList.add('hidden'); - getButtonById('settingsBtn').textContent = 'Settings'; + getButtonById('settingsBtn').textContent = '⚙️ Settings'; + } +} + +// Handle settings for mobile (same logic but different button) +async function handleSettingsMobile() { + closeMobileMenu(); + await handleSettings(); +} + +// Handle calendar button - scroll to calendar section +function handleCalendar() { + const calendarSection = document.querySelector('.calendar-section') as HTMLElement; + if (calendarSection) { + calendarSection.scrollIntoView({ + behavior: 'smooth', + block: 'start' + }); + } +} + +// Handle calendar for mobile +function handleCalendarMobile() { + closeMobileMenu(); + handleCalendar(); +} + +// Toggle mobile menu +function toggleMobileMenu() { + const mobileMenu = document.getElementById('mobileMenu'); + if (mobileMenu) { + mobileMenu.classList.toggle('hidden'); + } +} + +// Close mobile menu +function closeMobileMenu() { + const mobileMenu = document.getElementById('mobileMenu'); + if (mobileMenu) { + mobileMenu.classList.add('hidden'); } } @@ -408,8 +447,21 @@ const setupEventListeners = () => { // Auth forms document.getElementById('loginForm')?.addEventListener('submit', handleLogin); document.getElementById('registerForm')?.addEventListener('submit', handleRegister); + + // Desktop header buttons document.getElementById('logoutBtn')?.addEventListener('click', handleLogout); document.getElementById('settingsBtn')?.addEventListener('click', handleSettings); + document.getElementById('calendarBtn')?.addEventListener('click', handleCalendar); + + // Mobile header buttons + document.getElementById('logoutBtnMobile')?.addEventListener('click', handleLogout); + document.getElementById('settingsBtnMobile')?.addEventListener('click', handleSettingsMobile); + document.getElementById('calendarBtnMobile')?.addEventListener('click', handleCalendarMobile); + + // Mobile menu toggle + document.getElementById('mobileMenuToggle')?.addEventListener('click', toggleMobileMenu); + + // Settings form document.getElementById('settingsForm')?.addEventListener('submit', handleSaveSettings); // Search functionality @@ -461,13 +513,26 @@ const setupEventListeners = () => { } }); - // Click outside to close + // Click outside to close search results document.addEventListener('click', function(e: Event) { const target = e.target as HTMLElement; if (!searchResults.contains(target) && !searchInput.contains(target)) { hideSearchResults(); } }); + + // Click outside to close mobile menu + document.addEventListener('click', function(e: Event) { + const target = e.target as HTMLElement; + const mobileMenu = document.getElementById('mobileMenu'); + const mobileMenuToggle = document.getElementById('mobileMenuToggle'); + + if (mobileMenu && mobileMenuToggle && + !mobileMenu.contains(target) && + !mobileMenuToggle.contains(target)) { + closeMobileMenu(); + } + }); } const getCleanName = (foodName: string): string => {