Update templates/reward_status.html

templates/reward_status.html

@@ -11,69 +11,92 @@
             margin: 0;
             padding: 0;
         }
+
         .container {
             width: 90%;
             margin: auto;
             padding-top: 20px;
         }
+
         .order-confirmed {
             background-color: #fff;
             padding: 20px;
             border-radius: 10px;
             box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
             text-align: center;
+            margin-bottom: 20px;
         }
+
         .order-confirmed h1 {
             font-size: 2em;
             color: #ff6f00;
         }
+
         .reward-status {
-            margin-top: 30px;
+            display: flex;
+            justify-content: space-between;
+            flex-wrap: wrap; /* This allows the layout to adjust on smaller screens */
             background-color: #fff;
             padding: 20px;
             border-radius: 10px;
             box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-            display: flex;
-            justify-content: space-between;
-            height: 800px;
+            height: auto;
+            max-height: 800px; /* Control the maximum height */
+            overflow: hidden; /* Prevents overflow if content gets too large */
         }
+
         .item-section {
-            width: 50%;
-            height: 100%;
+            width: 100%; /* Default to 100% width for smaller screens */
+            height: auto;
             display: flex;
             flex-direction: column;
             justify-content: space-between;
             padding: 10px;
         }
+
+        @media (min-width: 768px) {
+            .item-section {
+                width: 48%; /* When on larger screens, use 48% to create side-by-side layout */
+            }
+        }
+
         .item-image {
             width: 100%;
-            height: 200px;
+            height: 250px;
             object-fit: cover;
             border-radius: 8px;
         }
+
         .item-info {
             text-align: center;
         }
+
         .item-info h3 {
             font-size: 1.5em;
             margin-top: 10px;
         }
+
         .ingredient-card {
             display: flex;
             justify-content: space-between;
             padding-top: 10px;
+            flex-wrap: wrap; /* Ensures proper alignment in small screens */
         }
+
         .ingredient {
             width: 48%;
             text-align: center;
             cursor: pointer;
+            margin-top: 10px;
         }
+
         .ingredient img {
             width: 100%;
             height: 100px;
             object-fit: cover;
             border-radius: 8px;
         }
+
         /* Modal Styling */
         .modal {
             display: none;
@@ -117,24 +140,25 @@
     </div>
 
     <div class="reward-status">
+        <!-- First section: Item info -->
+        <div class="item-section">
+            <img class="item-image" src="{{ item.image_url }}" alt="{{ item.name }}" onerror="this.src='/static/placeholder.jpg';">
+            <div class="item-info">
+                <h3>{{ item.name }}</h3>
+                <p>Price: ${{ "%.2f"|format(item.price) }}</p>
+            </div>
+        </div>
+
+        <!-- Second section: Ingredients -->
         <div class="item-section">
-            {% for item in order_items %}
-                <img class="item-image" src="{{ item.image_url }}" alt="{{ item.name }}" onerror="this.src='/static/placeholder.jpg';">
-                <div class="item-info">
-                    <h3>{{ item.name }}</h3>
-                    <p>Price: ${{ "%.2f"|format(item.price) }}</p>
-                </div>
-
-                <!-- Ingredients -->
-                <div class="ingredient-card">
-                    {% for ingredient in item.ingredients %}
-                        <div class="ingredient" onclick="showIngredientDetails('{{ ingredient.name }}', '{{ ingredient.image }}', '{{ ingredient.health_benefits }}', '{{ ingredient.fun_facts }}')">
-                            <img src="{{ ingredient.image }}" alt="{{ ingredient.name }}" onerror="this.src='/static/placeholder.jpg';">
-                            <p>{{ ingredient.name }}</p>
-                        </div>
-                    {% endfor %}
-                </div>
-            {% endfor %}
+            <div class="ingredient-card">
+                {% for ingredient in item.ingredients %}
+                    <div class="ingredient" onclick="showIngredientDetails('{{ ingredient.name }}', '{{ ingredient.image }}', '{{ ingredient.health_benefits }}', '{{ ingredient.fun_facts }}')">
+                        <img src="{{ ingredient.image }}" alt="{{ ingredient.name }}" onerror="this.src='/static/placeholder.jpg';">
+                        <p>{{ ingredient.name }}</p>
+                    </div>
+                {% endfor %}
+            </div>
         </div>
     </div>
 </div>
@@ -157,7 +181,6 @@
 </div>
 
 <script>
-    // JavaScript for showing ingredient details in modal
     function showIngredientDetails(name, image, healthBenefits, funFacts) {
         const healthBenefitsList = healthBenefits.split(',');
         const funFactsList = funFacts.split(',');