BiryaniHubflaskMenu

Sleeping

App Files Files Community

DSatishchandra commited on 28 days ago

Commit

82770c8

verified ·

1 Parent(s): 97c9072

Update templates/menu.html

Browse files

Files changed (1) hide show

templates/menu.html +58 -56

templates/menu.html CHANGED Viewed

@@ -313,68 +313,69 @@ form.text-center.mb-4 {
     font-size: 16px;
     margin-left: 8px; /* Space between the radio button and the label */
 }
-.modal-footer .d-flex {
-    display: flex; /* Use flexbox */
-    align-items: center; /* Vertically align the items */
-    justify-content: flex-start; /* Align at the start */
-    width: 100%;
-    padding-left: 0;
-}
-.modal-footer .form-control {
-    margin-right: 10px; /* Add a little space between the quantity input and the buttons */
-    align-items:top;
-}
 .cart-container {
     display: flex;
     align-items: center;
     gap: 10px;
 }
-.quantity-box {
     display: flex;
     align-items: center;
-    justify-content: space-between; /* Space between buttons and input */
-    border: 1px solid #ccc;
-    border-radius: 20px; /* Rounded corners */
-    overflow: hidden;
-    height: 40px;
-    width: 120px; /* Set width of the entire quantity box */
 }
-.quantity-box button {
-    background: #f0f0f0;
-    border: none;
-    padding: 5px 10px;
-    cursor: pointer;
-    height: 100%;
-    font-size: 18px;
 }
-.quantity-box input {
-    width: 40px;
-    text-align: center;
-    border: none;
-    font-size: 18px;
-    height: 100%;
-    background-color: #fff;
-    color: #333;
 }
-.add-to-cart-btn {
-    background: green;
-    color: white;
-    padding: 10px 15px;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-    font-size: 16px;
-    height: 40px;
     display: flex;
-    align-items: center;
     justify-content: center;
-    white-space: nowrap;
-    margin-left: 10px; /* Space between quantity box and button */
-    align-self: flex-start; /* Align the button at the top */
 }
 </style>
 </head>
 <body>
@@ -469,8 +470,6 @@ form.text-center.mb-4 {
         </a>
     </div>
   <!-- Modal for Item Details -->
     <div class="modal fade" id="itemModal" tabindex="-1" aria-labelledby="itemModalLabel" aria-hidden="true">
         <div class="modal-dialog modal-dialog-centered">
@@ -502,16 +501,19 @@ form.text-center.mb-4 {
                     <span id="modal-section" data-section="" data-category="" style="display: none;"></span>
                 </div>
-                <div class="modal-footer">
-                    <div class="d-flex align-items-center">
-    <button type="button" class="btn btn-outline-secondary" id="decreaseQuantity">-</button>
-    <input type="text" class="form-control text-center" id="quantityInput" value="1" readonly style="width: 50px;"/>
-    <button type="button" class="btn btn-outline-secondary" id="increaseQuantity">+</button>
 </div>
-                    <div class="modal-footer">
-                    <button type="button" class="btn btn-primary" onclick="addToCartFromModal()">Add to Cart</button>
-                </div>
                 </div>
             </div>

     font-size: 16px;
     margin-left: 8px; /* Space between the radio button and the label */
 }
 .cart-container {
     display: flex;
     align-items: center;
     gap: 10px;
 }
+.modal-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between; /* Space between quantity and Add to Cart button */
+    padding: 10px;
+}
+.modal-footer .d-flex {
     display: flex;
     align-items: center;
+    gap: 10px; /* Space between quantity buttons */
 }
+.modal-footer .btn {
+    height: 40px; /* Set consistent button height */
+    padding: 0 15px; /* Adjust padding to fit inside the buttons */
 }
+.modal-footer .form-control {
+    width: 50px; /* Fixed width for quantity input */
+    height: 40px; /* Match the height of buttons */
+    text-align: center; /* Center the value inside the input */
 }
+.modal-footer .btn-primary {
+    background-color: #0FAA39; /* Green background for Add to Cart button */
+    border-color: #0FAA39; /* Border color to match button background */
+    font-weight: bold; /* Bold text */
+    padding: 10px 20px; /* Adjust padding to make the button look better */
+    height: 40px; /* Match the height with quantity buttons */
     display: flex;
     justify-content: center;
+    align-items: center;
+    width: auto; /* Auto width to adjust to button text */
+}
+.modal-footer .btn-outline-secondary {
+    height: 40px; /* Ensure quantity buttons are the same size */
+    width: 40px; /* Make sure the buttons are square */
+}
+@media (max-width: 576px) {
+    /* Responsive adjustments for smaller screens */
+    .modal-dialog {
+        max-width: 90%; /* Adjust modal width for smaller screens */
+    }
+    .modal-footer .btn {
+        height: 35px; /* Smaller buttons for small screens */
+    }
+    .modal-footer .form-control {
+        width: 40px; /* Adjust input size for smaller screens */
+        height: 35px;
+    }
 }
 </style>
 </head>
 <body>
         </a>
     </div>
   <!-- Modal for Item Details -->
     <div class="modal fade" id="itemModal" tabindex="-1" aria-labelledby="itemModalLabel" aria-hidden="true">
         <div class="modal-dialog modal-dialog-centered">
                     <span id="modal-section" data-section="" data-category="" style="display: none;"></span>
                 </div>
+                <!-- Quantity Controls and Add to Cart Button -->
+<div class="modal-footer d-flex align-items-center justify-content-between">
+    <!-- Quantity Controls -->
+    <div class="d-flex align-items-center gap-2">
+        <button type="button" class="btn btn-outline-secondary" id="decreaseQuantity">-</button>
+        <input type="text" class="form-control text-center" id="quantityInput" value="1" readonly style="width: 50px;"/>
+        <button type="button" class="btn btn-outline-secondary" id="increaseQuantity">+</button>
+    </div>
+    <!-- Add to Cart Button -->
+    <button type="button" class="btn btn-primary" onclick="addToCartFromModal()">Add to Cart</button>
 </div>
                 </div>
             </div>