Update templates/menu.html

templates/menu.html

@@ -350,41 +350,64 @@
             height: 40px;
             width: 40px;
         }
-        /* New Styles for Ingredients, Nutritional Info, and Allergens */
-        .modal-ingredients, .modal-nutritional-info, .modal-allergens {
-            margin-top: 15px;
+        /* Styles for Toggleable Sections in Modal */
+        .toggle-section {
+            margin-bottom: 10px;
+        }
+        .toggle-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            cursor: pointer;
+            padding: 5px 0;
         }
-        .modal-ingredients h6, .modal-nutritional-info h6, .modal-allergens h6 {
+        .toggle-header h6 {
+            margin: 0;
             font-size: 1.1rem;
             font-weight: bold;
             color: #343a40;
-            margin-bottom: 10px;
         }
-        .modal-ingredients ul {
-            list-style: none;
+        .toggle-content {
+            display: none;
+            padding: 10px;
+            background-color: #f8f9fa;
+            border-radius: 5px;
+        }
+        .toggle-content.show {
+            display: block;
+        }
+        .toggle-arrow {
+            transition: transform 0.3s ease;
+        }
+        .toggle-arrow.down {
+            transform: rotate(0deg);
+        }
+        .toggle-arrow.up {
+            transform: rotate(180deg);
+        }
+        .ingredients-list,
+        .allergens-list {
+            list-style-type: none;
             padding: 0;
-            display: flex;
-            flex-wrap: wrap;
-            gap: 5px;
         }
-        .modal-ingredients li {
+        .ingredients-list li,
+        .allergens-list li {
+            display: inline-block;
+            margin-right: 10px;
+            margin-bottom: 5px;
+            background-color: #e9ecef;
+            padding: 2px 8px;
+            border-radius: 12px;
             font-size: 0.9rem;
-            color: #6c757d;
         }
-        .modal-nutritional-info .nutritional-grid {
+        .nutritional-info {
             display: flex;
-            justify-content: space-between;
-            background-color: #f8f9fa;
-            padding: 10px;
-            border-radius: 5px;
-        }
-        .modal-nutritional-info .nutritional-item {
-            font-size: 0.9rem;
-            color: #343a40;
+            flex-wrap: wrap;
+            gap: 15px;
         }
-        .modal-allergens p {
+        .nutritional-info p {
+            margin: 0;
             font-size: 0.9rem;
-            color: #dc3545; /* Red for allergens to highlight them */
         }
         @media (max-width: 576px) {
             .modal-dialog {
@@ -398,10 +421,6 @@
                 width: 40px;
                 height: 35px;
             }
-            .modal-nutritional-info .nutritional-grid {
-                flex-direction: column;
-                gap: 5px;
-            }
         }
     </style>
 </head>
@@ -483,7 +502,7 @@
                                         <div class="d-flex flex-column align-item-center justify-content-center">
                                             <div>
                                                 <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#itemModal" 
-                                                    onclick="showItemDetails('{{ item.Name }}', '{{ item.Price__c }}', '{{ item.Image2__c }}', '{{ item.Description__c }}', '{{ item.Section__c }}', '{{ selected_category }}', {{ item.Ingredients__c | tojson }}, {{ item.NutritionalInfo__c | tojson }}, {{ item.Allergens__c | tojson }})">
+                                                    onclick="showItemDetails('{{ item.Name }}', '{{ item.Price__c }}', '{{ item.Image2__c }}', '{{ item.Description__c }}', '{{ item.Section__c }}', '{{ selected_category }}', {{ item.Ingredients__c|tojson }}, {{ item.NutritionalInfo__c|tojson }}, {{ item.Allergens__c|tojson }})">
                                                     ADD
                                                 </button>
                                             </div>
@@ -520,29 +539,39 @@
                     <img id="modal-img" class="img-fluid rounded mb-3 d-block mx-auto" alt="Item Image" style="max-height: 200px; object-fit: cover;">
                     <h5 id="modal-name" class="fw-bold text-center"></h5>
                     <p id="modal-price" class="text-muted text-center"></p>
-                    <p id="modal-description" class="text-secondary"></p>
+                    <p id="modal-description" class="text-secondary text-center"></p>
 
                     <!-- Ingredients Section -->
-                    <div class="modal-ingredients">
-                        <h6>Ingredients</h6>
-                        <ul id="modal-ingredients-list"></ul>
+                    <div class="toggle-section">
+                        <div class="toggle-header" onclick="toggleSection('ingredients')">
+                            <h6>Ingredients</h6>
+                            <i class="bi bi-chevron-down toggle-arrow" id="ingredients-arrow"></i>
+                        </div>
+                        <div class="toggle-content" id="modal-ingredients">
+                            <ul class="ingredients-list" id="modal-ingredients-list"></ul>
+                        </div>
                     </div>
 
                     <!-- Nutritional Info Section -->
-                    <div class="modal-nutritional-info">
-                        <h6>Nutritional Info</h6>
-                        <div class="nutritional-grid" id="modal-nutritional-info-grid">
-                            <div class="nutritional-item" id="modal-calories"></div>
-                            <div class="nutritional-item" id="modal-protein"></div>
-                            <div class="nutritional-item" id="modal-carbs"></div>
-                            <div class="nutritional-item" id="modal-fats"></div>
+                    <div class="toggle-section">
+                        <div class="toggle-header" onclick="toggleSection('nutritional')">
+                            <h6>Nutritional Info</h6>
+                            <i class="bi bi-chevron-down toggle-arrow" id="nutritional-arrow"></i>
+                        </div>
+                        <div class="toggle-content" id="modal-nutritional">
+                            <div class="nutritional-info" id="modal-nutritional-info"></div>
                         </div>
                     </div>
 
                     <!-- Allergens Section -->
-                    <div class="modal-allergens">
-                        <h6>Allergens</h6>
-                        <p id="modal-allergens-list"></p>
+                    <div class="toggle-section">
+                        <div class="toggle-header" onclick="toggleSection('allergens')">
+                            <h6>Allergens</h6>
+                            <i class="bi bi-chevron-down toggle-arrow" id="allergens-arrow"></i>
+                        </div>
+                        <div class="toggle-content" id="modal-allergens">
+                            <ul class="allergens-list" id="modal-allergens-list"></ul>
+                        </div>
                     </div>
 
                     <div id="first-row">
@@ -633,6 +662,21 @@
             };
         }
 
+        // Toggle Section Visibility
+        function toggleSection(section) {
+            const content = document.getElementById(`modal-${section}`);
+            const arrow = document.getElementById(`${section}-arrow`);
+            if (content.classList.contains('show')) {
+                content.classList.remove('show');
+                arrow.classList.remove('up');
+                arrow.classList.add('down');
+            } else {
+                content.classList.add('show');
+                arrow.classList.remove('down');
+                arrow.classList.add('up');
+            }
+        }
+
         function showItemDetails(name, price, image, description, section, selectedCategory, ingredients, nutritionalInfo, allergens) {
             document.getElementById('modal-name').innerText = name;
             document.getElementById('modal-price').innerText = `Starting from $${price}`;
@@ -641,7 +685,13 @@
             document.getElementById('addons-list').innerHTML = 'Loading customization options...';
             document.getElementById('modal-instructions').value = '';
 
-            // Display Ingredients
+            const modalSectionEl = document.getElementById('modal-section');
+            modalSectionEl.setAttribute('data-section', section);
+            modalSectionEl.setAttribute('data-category', selectedCategory);
+
+            document.getElementById('quantityInput').value = 1;
+
+            // Populate Ingredients
             const ingredientsList = document.getElementById('modal-ingredients-list');
             ingredientsList.innerHTML = '';
             if (ingredients && ingredients.length > 0) {
@@ -651,28 +701,43 @@
                     ingredientsList.appendChild(li);
                 });
             } else {
-                ingredientsList.innerHTML = '<li>No ingredients listed.</li>';
+                ingredientsList.innerHTML = '<li>No ingredients available.</li>';
             }
 
-            // Display Nutritional Info
-            document.getElementById('modal-calories').innerText = `Calories: ${nutritionalInfo?.Calories || 'N/A'}`;
-            document.getElementById('modal-protein').innerText = `Protein: ${nutritionalInfo?.Protein || 'N/A'}`;
-            document.getElementById('modal-carbs').innerText = `Carbs: ${nutritionalInfo?.Carbs || 'N/A'}`;
-            document.getElementById('modal-fats').innerText = `Fats: ${nutritionalInfo?.Fats || 'N/A'}`;
+            // Populate Nutritional Info
+            const nutritionalInfoDiv = document.getElementById('modal-nutritional-info');
+            nutritionalInfoDiv.innerHTML = '';
+            if (nutritionalInfo) {
+                for (const [key, value] of Object.entries(nutritionalInfo)) {
+                    const p = document.createElement('p');
+                    p.innerText = `${key}: ${value}`;
+                    nutritionalInfoDiv.appendChild(p);
+                }
+            } else {
+                nutritionalInfoDiv.innerHTML = '<p>No nutritional info available.</p>';
+            }
 
-            // Display Allergens
+            // Populate Allergens
             const allergensList = document.getElementById('modal-allergens-list');
+            allergensList.innerHTML = '';
             if (allergens && allergens.length > 0) {
-                allergensList.innerText = allergens.join(', ');
+                allergens.forEach(allergen => {
+                    const li = document.createElement('li');
+                    li.innerText = allergen;
+                    allergensList.appendChild(li);
+                });
             } else {
-                allergensList.innerText = 'None';
+                allergensList.innerHTML = '<li>No allergens.</li>';
             }
 
-            const modalSectionEl = document.getElementById('modal-section');
-            modalSectionEl.setAttribute('data-section', section);
-            modalSectionEl.setAttribute('data-category', selectedCategory);
-
-            document.getElementById('quantityInput').value = 1;
+            // Reset toggle sections to hidden
+            ['ingredients', 'nutritional', 'allergens'].forEach(section => {
+                const content = document.getElementById(`modal-${section}`);
+                const arrow = document.getElementById(`${section}-arrow`);
+                content.classList.remove('show');
+                arrow.classList.remove('up');
+                arrow.classList.add('down');
+            });
 
             const prepStyleOptions = document.getElementById('prep-style-options');
             const typeOptions = document.getElementById('type-options');