BiryaniHubflaskhema20014

Sleeping

App Files Files Community

lokesh341 commited on Apr 6

Commit

7d5d69e

verified ·

1 Parent(s): 721e03f

Update templates/search.html

Browse files

Files changed (1) hide show

templates/search.html +59 -41

templates/search.html CHANGED Viewed

@@ -32,13 +32,13 @@
         }
         .search-bar-container {
             position: absolute;
-            left: 20px;
             top: 50%;
             transform: translateY(-50%);
             display: flex;
             align-items: center;
             width: 300px;
-            max-width: 90%;
             position: relative;
         }
         .search-bar-container input {
@@ -132,62 +132,87 @@
             justify-content: center;
             padding: 0;
         }
-        /* Modal styling from menu.html */
-        .modal-fullscreen {
-            width: 100vw;
-            max-width: none;
-            height: 100%;
-            margin: 0;
-        }
-        .modal-fullscreen .modal-content {
-            height: 100%;
             border: none;
-            border-radius: 0;
-            background-color: #fdf4e3;
         }
-        .modal-body {
-            padding: 20px;
             overflow-y: auto;
         }
-        .modal-footer {
             padding: 15px;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            border-top: none;
         }
         .addon-section {
             background-color: #fff;
             border: 2px solid #ffa500;
             border-radius: 8px;
-            padding: 12px;
-            margin-bottom: 15px;
         }
         .addon-section h6 {
-            margin-bottom: 10px;
-            font-size: 1.1rem;
             font-weight: bold;
             color: #333;
         }
         .form-check {
-            margin-bottom: 8px;
         }
         .form-check-input {
-            margin-right: 10px;
         }
         .quantity-controls {
             display: flex;
             align-items: center;
-            gap: 10px;
         }
         .quantity-controls input {
-            width: 50px;
             text-align: center;
         }
     </style>
 </head>
 <body>
     <div class="fixed-top-bar">
         <div class="search-bar-container">
             <input type="text" id="searchBar" class="form-control" placeholder="Search items or sections..." autocomplete="off">
             <i class="bi bi-search search-icon"></i>
@@ -231,16 +256,16 @@
         </div>
     </div>
-    <!-- Item Modal (Exact replica from menu.html) -->
     <div class="modal fade" id="itemModal" tabindex="-1" aria-labelledby="itemModalLabel" aria-hidden="true">
-        <div class="modal-dialog modal-fullscreen">
             <div class="modal-content">
                 <div class="modal-header">
                     <h5 class="modal-title" id="itemModalLabel">Item Details</h5>
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
                 <div class="modal-body">
-                    <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 text-center"></p>
@@ -249,13 +274,13 @@
                         <strong>Nutrition:</strong> <span id="modal-nutrition"></span><br>
                         <strong>Allergens:</strong> <span id="modal-allergens"></span>
                     </div>
-                    <div id="modal-addons" class="modal-addons mt-4">
                         <h6 class="text-center">Customization Options</h6>
                         <div id="addons-list" class="addons-container">Loading customization options...</div>
                     </div>
-                    <div class="mt-4">
                         <h6 class="text-center">Custom Request</h6>
-                        <textarea id="modal-instructions" class="form-control" placeholder="Enter any special instructions here..."></textarea>
                     </div>
                     <span id="modal-section" data-section="" data-category="" data-is-menu-item="" style="display: none;"></span>
                 </div>
@@ -361,7 +386,6 @@
                 quantityInput.value = currentQuantity;
             });
-            // Item details and cart functionality (exact from menu.html)
             window.showItemDetails = function(name, price, image, description, ingredients, nutrition, allergens, section, vegNonVeg, isMenuItem) {
                 document.getElementById('modal-name').innerText = name;
                 document.getElementById('modal-price').innerText = `$${parseFloat(price).toFixed(2)}`;
@@ -379,7 +403,6 @@
                 modalSectionEl.setAttribute('data-is-menu-item', isMenuItem);
                 document.getElementById('quantityInput').value = 1;
-                // Fetch customization options from Salesforce
                 fetch(`/api/addons?item_name=${encodeURIComponent(name)}&item_section=${encodeURIComponent(section)}`)
                     .then(response => response.json())
                     .then(data => {
@@ -482,11 +505,6 @@
                         alert('Item added to cart successfully!');
                         const modal = bootstrap.Modal.getInstance(document.getElementById('itemModal'));
                         modal.hide();
-                        // Update cart UI if you have a cart badge
-                        if (data.cart) {
-                            console.log('Updated cart:', data.cart);
-                            // Add cart badge update logic here if needed
-                        }
                     } else {
                         console.error('Failed to add item to cart:', data.error);
                         alert(data.error || 'Failed to add item to cart.');

         }
         .search-bar-container {
             position: absolute;
+            left: 60px; /* Adjusted to make space for back button */
             top: 50%;
             transform: translateY(-50%);
             display: flex;
             align-items: center;
             width: 300px;
+            max-width: calc(90% - 60px); /* Adjusted for back button width */
             position: relative;
         }
         .search-bar-container input {
             justify-content: center;
             padding: 0;
         }
+        /* Back button styling */
+        .back-button {
+            position: absolute;
+            left: 15px;
+            top: 50%;
+            transform: translateY(-50%);
+            background-color: #FFA500;
+            color: white;
             border: none;
+            border-radius: 50%;
+            width: 30px;
+            height: 30px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            cursor: pointer;
+            z-index: 1001;
         }
+        /* Small modal for mobile view */
+        .modal-dialog-small {
+            max-width: 100%;
+            width: 90vw; /* 90% of viewport width */
+            margin: 0 auto;
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+        }
+        .modal-content {
+            border-radius: 15px;
+            background-color: #fdf4e3;
+            max-height: 90vh; /* 90% of viewport height */
             overflow-y: auto;
         }
+        .modal-header, .modal-footer {
+            border: none;
+            padding: 10px 15px;
+        }
+        .modal-body {
             padding: 15px;
         }
         .addon-section {
             background-color: #fff;
             border: 2px solid #ffa500;
             border-radius: 8px;
+            padding: 10px;
+            margin-bottom: 10px;
         }
         .addon-section h6 {
+            margin-bottom: 8px;
+            font-size: 1rem;
             font-weight: bold;
             color: #333;
         }
         .form-check {
+            margin-bottom: 6px;
         }
         .form-check-input {
+            margin-right: 8px;
         }
         .quantity-controls {
             display: flex;
             align-items: center;
+            gap: 8px;
         }
         .quantity-controls input {
+            width: 40px;
             text-align: center;
+            font-size: 14px;
+        }
+        .modal-footer .btn-primary {
+            width: auto;
+            padding: 8px 15px;
+            height: 35px;
         }
     </style>
 </head>
 <body>
     <div class="fixed-top-bar">
+        <button class="back-button" onclick="window.location.href='/menu'">&lt;</button>
         <div class="search-bar-container">
             <input type="text" id="searchBar" class="form-control" placeholder="Search items or sections..." autocomplete="off">
             <i class="bi bi-search search-icon"></i>
         </div>
     </div>
+    <!-- Item Modal (Small size for mobile view) -->
     <div class="modal fade" id="itemModal" tabindex="-1" aria-labelledby="itemModalLabel" aria-hidden="true">
+        <div class="modal-dialog modal-dialog-small">
             <div class="modal-content">
                 <div class="modal-header">
                     <h5 class="modal-title" id="itemModalLabel">Item Details</h5>
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
                 <div class="modal-body">
+                    <img id="modal-img" class="img-fluid rounded mb-3 d-block mx-auto" alt="Item Image" style="max-height: 150px; 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 text-center"></p>
                         <strong>Nutrition:</strong> <span id="modal-nutrition"></span><br>
                         <strong>Allergens:</strong> <span id="modal-allergens"></span>
                     </div>
+                    <div id="modal-addons" class="modal-addons mt-3">
                         <h6 class="text-center">Customization Options</h6>
                         <div id="addons-list" class="addons-container">Loading customization options...</div>
                     </div>
+                    <div class="mt-3">
                         <h6 class="text-center">Custom Request</h6>
+                        <textarea id="modal-instructions" class="form-control" placeholder="Enter any special instructions here..." rows="2"></textarea>
                     </div>
                     <span id="modal-section" data-section="" data-category="" data-is-menu-item="" style="display: none;"></span>
                 </div>
                 quantityInput.value = currentQuantity;
             });
             window.showItemDetails = function(name, price, image, description, ingredients, nutrition, allergens, section, vegNonVeg, isMenuItem) {
                 document.getElementById('modal-name').innerText = name;
                 document.getElementById('modal-price').innerText = `$${parseFloat(price).toFixed(2)}`;
                 modalSectionEl.setAttribute('data-is-menu-item', isMenuItem);
                 document.getElementById('quantityInput').value = 1;
                 fetch(`/api/addons?item_name=${encodeURIComponent(name)}&item_section=${encodeURIComponent(section)}`)
                     .then(response => response.json())
                     .then(data => {
                         alert('Item added to cart successfully!');
                         const modal = bootstrap.Modal.getInstance(document.getElementById('itemModal'));
                         modal.hide();
                     } else {
                         console.error('Failed to add item to cart:', data.error);
                         alert(data.error || 'Failed to add item to cart.');