feat: improve header and add calendar button
This commit is contained in:
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
+13
-2
@@ -79,8 +79,19 @@
|
||||
<div id="user-info" class="user-info hidden">
|
||||
<div class="user-details">
|
||||
<span id="userName">Welcome, User!</span>
|
||||
<button id="settingsBtn" class="logout-btn">Settings</button>
|
||||
<button id="logoutBtn" class="logout-btn">Logout</button>
|
||||
<div class="header-buttons">
|
||||
<button id="calendarBtn" class="header-btn">📅 Calendar</button>
|
||||
<button id="settingsBtn" class="header-btn">⚙️ Settings</button>
|
||||
<button id="logoutBtn" class="header-btn logout">🚪 Logout</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Mobile menu toggle -->
|
||||
<button id="mobileMenuToggle" class="mobile-menu-toggle hidden">☰</button>
|
||||
<!-- Mobile dropdown menu -->
|
||||
<div id="mobileMenu" class="mobile-menu hidden">
|
||||
<button id="calendarBtnMobile" class="mobile-menu-item">📅 Calendar</button>
|
||||
<button id="settingsBtnMobile" class="mobile-menu-item">⚙️ Settings</button>
|
||||
<button id="logoutBtnMobile" class="mobile-menu-item logout">🚪 Logout</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+68
-3
@@ -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 => {
|
||||
|
||||
Reference in New Issue
Block a user