wip: shopping basket slowly coming on

3 files changed, 40 insertions, 33 deletions

diff --git a/pyblackbird_cc/templates/payments/cart_detail.html b/pyblackbird_cc/templates/payments/cart_detail.html
index e38e2ae..8c6c01b 100644
--- a/pyblackbird_cc/templates/payments/cart_detail.html
+++ b/pyblackbird_cc/templates/payments/cart_detail.html
@@ -6,45 +6,24 @@
     <h1 class="mb-4">My basket</h1>
     <p class="text-body-secondary">{% lorem %}</p>
     {% if cart %}
-    <div class="row justify-content-md-center">
+    <div class="row">
         <div class="col-8 my-5 bg-secondary-subtle border border-1 rounded border-dark">
             <div class="my-4 bg-white rounded">
     
-                <div class="d-flex">
+                <div>
+                    {% for item in cart.items.all %}
+                    <div class="my-3">
+                        {% include "payments/cart_lineitem.html" with item=item %}
+                    </div>
+                    {% endfor %}
                 </div>
-
-
-                <table class="table">
-                    <thead>
-                        <tr>
-                            <th>Product</th>
-                            <th>Price</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        {% for item in cart.items.all %}
-                        <tr>
-                            <td>
-                                {% include "payments/cart_lineitem.html" with item=item %}
-                            </td>
-                            <td>&#163;{{ item.product.price }}</td>
-                        </tr>
-                        {% endfor %}
-                    </tbody>
-                    <tfoot>
-                        <tr>
-                            <th class="text-end">Total:</th>
-                            <th>&#163;{{ cart_total }}</th>
-                        </tr>
-                    </tfoot>
-                </table>
-
             </div>
         </div>
 
-    </div>
-    <div class="d-flex justify-content-end">
-        <a href="#" class="btn btn-primary">Checkout</a>
+        <div class="col-4 my-5">
+            {% include "payments/cart_sidepanel.html" with cart=cart %} 
+        </div>
+
     </div>
     {% else %}
     <p>Your cart is empty.</p>
diff --git a/pyblackbird_cc/templates/payments/cart_lineitem.html b/pyblackbird_cc/templates/payments/cart_lineitem.html
index b639a7f..0ef8a97 100644
--- a/pyblackbird_cc/templates/payments/cart_lineitem.html
+++ b/pyblackbird_cc/templates/payments/cart_lineitem.html
@@ -1,5 +1,5 @@
 <div class="container my-2">
-    <div class="col-10">
+    <div class="col">
         <div class="p-2 border border-1 border-success">
             {{ item.resource.name }}
         </div>
diff --git a/pyblackbird_cc/templates/payments/cart_sidepanel.html b/pyblackbird_cc/templates/payments/cart_sidepanel.html
new file mode 100644
index 0000000..7742c9a
--- /dev/null
+++ b/pyblackbird_cc/templates/payments/cart_sidepanel.html
@@ -0,0 +1,28 @@
+<div class="p-2 border border-2 rounded rounded-2 border-light-subtle">
+    <div class="p-1 d-flex justify-content-between">
+       <div>
+           <strong>Subtotal:</strong>
+       </div> 
+       <div>
+          &#163;{{ cart_total }} 10.24
+       </div>
+    </div>
+    <div class="p-1 d-flex justify-content-between">
+       <div>
+           <strong>Shipping and handling:</strong>
+       </div> 
+       <div>
+           <p class="text-end">There is nothing to say here</p>
+       </div>
+    </div>
+    <hr>
+    <div class="my-1">
+        <p class="p-1 text-secondary">After payment, links to your download will be generated.
+        <a class="p-1 text-sm" href="#">Help</a>
+        </p>
+        
+    </div>
+    <div class="d-grid gap-2 mx-auto col-11">
+        <button class="btn btn-primary btn-lg">Checkout now</button>
+    </div>
+</div>