tidying up the cart detail page - still nowhere near good enough

3 files changed, 14 insertions, 20 deletions

diff --git a/alphabetlearning/templates/payments/cart_detail.html b/alphabetlearning/templates/payments/cart_detail.html
index 46117d1..641c9c5 100644
--- a/alphabetlearning/templates/payments/cart_detail.html
+++ b/alphabetlearning/templates/payments/cart_detail.html
@@ -7,7 +7,7 @@
     <p class="text-body-secondary">{% lorem %}</p>
     {% if cart %}
     <div class="row">
-        <div class="col-8 my-5 bg-secondary-subtle border border-1 rounded border-dark">
+        <div class="col-8 my-4">
             <div class="my-4 bg-white rounded">
     
                 <div>
diff --git a/alphabetlearning/templates/payments/cart_lineitem.html b/alphabetlearning/templates/payments/cart_lineitem.html
index 0ef8a97..79899df 100644
--- a/alphabetlearning/templates/payments/cart_lineitem.html
+++ b/alphabetlearning/templates/payments/cart_lineitem.html
@@ -1,17 +1,19 @@
 <div class="container my-2">
     <div class="col">
-        <div class="p-2 border border-1 border-success">
-            {{ item.resource.name }}
+        <div class="p-1 bg bg-success-subtle">
+            <p class="fs-3 text fw-bold">{{ item.resource.name }}</p>
         </div>
-        <div class="p-2 border border-1 border-success">
-            {{ item.resource.card_description }} 
-        </div>
-        <div class="d-flex flex-row border border-2 border-danger p-1">
+        <div class="d-flex flex-row p-1">
             {% for tn_url in item.resource.thumbnail_urls  %}
-            <div class="flex-shrink border border-2 border-alert p-1">
-                <img class="img-fluid rounded" src="{{ tn_url }}" alt="unknown"/> 
+            <div class="flex-shrink p-1">
+                <img class="img-thumbnail rounded w-50" src="{{ tn_url }}" alt="unknown"/>
             </div>
             {% endfor %}
         </div>
+        <div class="p-2">
+            <p>{{ item.resource.card_description }}</p>
+            <p><a class="btn btn-danger btn-sm fs-6 text" href="#">Remove from basket</a></p>
+        </div>
     </div>
 </div>
+<hr>
diff --git a/alphabetlearning/templates/payments/cart_sidepanel.html b/alphabetlearning/templates/payments/cart_sidepanel.html
index b788d24..b844495 100644
--- a/alphabetlearning/templates/payments/cart_sidepanel.html
+++ b/alphabetlearning/templates/payments/cart_sidepanel.html
@@ -3,16 +3,8 @@
        <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 class="fw-bold">
+          &#163;{{ total|floatformat:2 }}
        </div>
     </div>
     <hr>
@@ -25,7 +17,7 @@
     <div class="d-grid gap-2 mx-auto col-11">
         <form action="{% url 'payments:create-checkout-session' cart.id %}" method="POST">
             {% csrf_token %}
-            <button class="btn btn-primary btn-lg">Checkout now</button>
+            <button class="btn btn-primary btn-lg w-100">Checkout now</button>
         </form>
     </div>
 </div>