diff --git a/main.css b/main.css index bbc7cda..e99d66e 100644 --- a/main.css +++ b/main.css @@ -61,7 +61,7 @@ body { display: flex; align-items: center; justify-content: space-between; - padding: 0.5rem 1rem; + padding: 0.5rem 0.75rem; color: #e2e2e2; } @@ -139,8 +139,8 @@ body { /* Banners */ .banner { - margin-top: 1rem; - padding: 0.5rem 1rem; + margin-top: 0.75rem; + padding: 0.35rem 0.75rem; border-radius: 10px; color: hsl(223deg, 75%, 75%); } @@ -153,7 +153,7 @@ body { .banner__content { position: relative; - padding: 0.5rem; + padding: 0.35rem; text-align: center; } @@ -234,7 +234,7 @@ body { --scrollbar-thumb-color: #363636; width: 100%; flex-direction: row; - align-items: center; + align-items: flex-start; font-size: 1.25em; padding: 0; @@ -263,6 +263,12 @@ body { --accent-hue: var(--hue-lunch); --accent: var(--lunch-accent); } + + +#L .menu-category__header { + flex-shrink: 0; + min-height: 3rem; +} #S, #S + .share_toolbar { --accent-hue: var(--hue-snacks); --accent: var(--snacks-accent); @@ -276,7 +282,7 @@ body { font-size: 1.2em; color: var(--accent); background-color: inherit; - padding-top: 1em; + padding-top: 1em; } @media (min-width: 720px) { @@ -286,7 +292,8 @@ body { width: 50%; flex: 0 0 auto; - padding: 0.5em 0; + padding: 0.5em 0; + align-self: flex-start; } } @@ -301,16 +308,27 @@ body { background-color: inherit; border: 1px solid var(--accent); border-radius: 0.5em; - margin: 0 0.5rem; + margin: 0 0.5rem; } .menu-category-inner > * { - padding: 0.5rem; + padding: 0.35rem; +} + +.menu__items { + overflow-y: visible; } @media (min-width: 720px) { .menu-category-inner { height: 100%; + display: flex; + flex-direction: column; + } + + .menu__items { + flex: 1; + overflow-y: visible; } } @@ -318,17 +336,24 @@ body { text-transform: uppercase; color: var(--accent); - display: grid; - grid-auto-flow: row; - grid-template-rows: auto; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; text-align: center; border-bottom: 1px solid var(--accent); + padding: 0.5rem 0.25rem 0.35rem 0.25rem; + min-height: 3rem; + gap: 0.25rem; } .meal-name { font-weight: 700; - letter-spacing: 0.3em; + letter-spacing: 0.2em; + font-size: 0.9em; + word-break: break-word; + hyphens: auto; } .meal-timing { @@ -337,6 +362,7 @@ body { display: inline-block; font-weight: 300; font-size: 0.5em; + margin-bottom: 0.15rem; } .menu__item { diff --git a/main.js b/main.js index 41bc949..c217b67 100644 --- a/main.js +++ b/main.js @@ -136,6 +136,15 @@ async function loadMenu() { const hiddenInput = document.querySelector("#input--date"); hiddenInput.showPicker(); }; + + // Add window resize listener for desktop height adjustments + window.addEventListener('resize', () => { + // Debounce resize events + clearTimeout(window.resizeTimeout); + window.resizeTimeout = setTimeout(() => { + adjustMealHeightsForDesktop(); + }, 100); + }); })(); /** @@ -161,6 +170,9 @@ function initializeMenuUI(date) { ...everydayItems.map(everydayItemHTML), ].join(""); } + + // Adjust meal heights for desktop screens + adjustMealHeightsForDesktop(); } function variableItemHTML(item_name) { @@ -272,3 +284,79 @@ function addDays(date, numDays) { const oneDayMs = 1000 * 60 * 60 * 24; return new Date(date.getTime() + oneDayMs * numDays); } + +/** + * Adjust meal heights for desktop screens to ensure all items fit within meal outlines. + * Only applies to screens 720px and wider. + */ +function adjustMealHeightsForDesktop() { + // Only apply on desktop screens (720px and wider) + if (window.innerWidth < 720) { + // On mobile screens, ensure scrolling is always enabled + document.querySelector('#page').style.overflow = 'auto'; + document.querySelector('#actual-menu').style.overflow = 'auto'; + return; + } + + const mealCategories = ['B', 'L', 'S', 'D']; + const menuContainer = document.querySelector('#actual-menu'); + const dayPicker = document.querySelector('.day-picker'); + + // Calculate available height (total viewport height minus day picker) + const availableHeight = window.innerHeight - dayPicker.offsetHeight; + + // Reset heights to auto to measure natural content height + mealCategories.forEach(mealId => { + const mealElement = document.getElementById(mealId); + const mealInner = mealElement.querySelector('.menu-category-inner'); + mealElement.style.height = 'auto'; + mealInner.style.height = 'auto'; + }); + + // Find the maximum content height needed + let maxContentHeight = 0; + mealCategories.forEach(mealId => { + const mealElement = document.getElementById(mealId); + const contentHeight = mealElement.scrollHeight; + maxContentHeight = Math.max(maxContentHeight, contentHeight); + }); + + // Add a small tolerance buffer to account for padding/margins/spacing + const toleranceBuffer = 20; // 20px tolerance for minor spacing differences + const adjustedAvailableHeight = availableHeight + toleranceBuffer; + + // If content exceeds available height, adjust all meals equally + if (maxContentHeight > adjustedAvailableHeight) { + // Add bottom spacing buffer only when we need to extend meal boxes + const bottomSpacingBuffer = 2; // 2rem buffer for bottom spacing + maxContentHeight += bottomSpacingBuffer; + const adjustedHeight = Math.max(availableHeight, maxContentHeight); + + mealCategories.forEach(mealId => { + const mealElement = document.getElementById(mealId); + const mealInner = mealElement.querySelector('.menu-category-inner'); + + mealElement.style.height = adjustedHeight + 'px'; + mealElement.style.alignSelf = 'flex-start'; // Ensure top alignment + mealInner.style.height = '100%'; + }); + + // Enable main scrollbar when content overflows + document.querySelector('#page').style.overflow = 'auto'; + document.querySelector('#actual-menu').style.overflow = 'auto'; + } else { + // Reset to default behavior if no adjustment needed + mealCategories.forEach(mealId => { + const mealElement = document.getElementById(mealId); + const mealInner = mealElement.querySelector('.menu-category-inner'); + + mealElement.style.height = ''; + mealElement.style.alignSelf = ''; + mealInner.style.height = ''; + }); + + // On desktop, disable main scrollbar when content fits + document.querySelector('#page').style.overflow = 'hidden'; + document.querySelector('#actual-menu').style.overflow = 'hidden'; + } +} \ No newline at end of file diff --git a/menu.json b/menu.json index a9d734e..eaf614a 100644 --- a/menu.json +++ b/menu.json @@ -1,12 +1,12 @@ { - "start": "09/29/2025", - "end": "12/29/2025", + "start": "09/28/2025", + "end": "11/01/2025", "menu": { "rotation": { "D1": { "B": ["Idli", "Sambhar + Chutney"], "L": [ - "Parwal Dry", + "Aloo Capsicum", "Veg Kolhapuri", "Dal Makhni", "Rasam", @@ -48,7 +48,7 @@ "S": ["Kachori"], "D": [ "Soya Keema Masala", - "Chhole Kulche", + "Chole Kulche", "Dal Tadka", "Plain Rice", "Chapati", @@ -61,7 +61,7 @@ "B": ["Aloo Paratha", "Curd"], "L": [ "Bhindi Masala Dry", - "Kadhi Pakode", + "Kadi Pakode", "Dal Tadka", "Rasam", "Chapati", @@ -73,9 +73,9 @@ ], "S": ["Dabeli"], "D": [ - "Paneer Biriyani", - "Chicken Biriyani", "Aloo Beans Dry", + "Paneer Biriyani", + "Chicken Biryani", "Dal Fry", "Curd Rice", "Chapati", @@ -127,9 +127,9 @@ ], "S": ["Masala Maggi"], "D": [ + "Baigan Bharta", "Paneer Butter Masala", - "Chicken / Egg Curry", - "Baingan Bharta", + "Chicken/Egg Curry", "Dal Tadka", "Jeera Rice", "Chapati + Paratha", @@ -156,8 +156,8 @@ "S": ["Samosa"], "D": [ "Onion & Tomato Uttapam", - "Methi Malai Matar", - "Dal Lasooni", + "Methi Malai Mutter", + "Dal Lahsuni", "Masala Khichdi", "Chapati", "Rasam",