Globally improve display

src/common/templates/common/base.html

@@ -7,6 +7,15 @@
         <title>Checkout</title>
         <link href="{% static "vendor/bootstrap-5.1.3-dist/css/bootstrap.min.css" %}"
             rel="stylesheet">
+        <style>
+            body {
+                margin-bottom: 2em;
+            }
+        </style>
+        <script defer src="{% static "vendor/fontawesome-6.1.1-free/brands.min.js" %}"></script>
+        <script defer src="{% static "vendor/fontawesome-6.1.1-free/solid.min.js" %}"></script>
+        <script defer src="{% static "vendor/fontawesome-6.1.1-free/fontawesome.min.js" %}"></script>
+
         {% block extrahead %}
         {% endblock %}
     </head>

src/purchase/forms.py

@@ -19,7 +19,7 @@ class BasketForm(forms.ModelForm):
     def __init__(self, *args, **kwargs):
         super().__init__(*args, **kwargs)
         self.helper = FormHelper()
-        self.helper.add_input(Submit("submit", "Submit"))
+        self.helper.add_input(Submit("submit", "Save"))
         self.helper.layout = Layout()
         products = {}
         basket = kwargs.get("instance")

src/purchase/templates/purchase/basket_form.html

@@ -2,19 +2,18 @@
 {% load crispy_forms_tags purchase %}
 {% block content %}
     {% if object %}
+        <h1>{{ object }} <span class="badge bg-secondary">{{ object.price|currency }}</span></h1>
+        <p class="metadata">
+            {{ object.created_at }}
+        </p>
         {% if not object.payment_method %}
-            <div class="alert alert-warning" role="alert">Missing payment method.</div>
+            <div class="alert alert-danger" role="alert">Missing payment method.</div>
         {% endif %}
-        <h1>{{ object }}</h1>
-        <p>{{ object.created_at }}</p>
     {% else %}
         <h1>New basket</h1>
     {% endif %}
     {% crispy form %}
     {% if object %}
-        <div>
-            Price: {{ object.price|currency }}
-        </div>
         <a href="{% url "purchase:new" %}" class="btn btn-secondary">New</a>
     {% endif %}
 {% endblock %}

src/purchase/templates/purchase/basket_list.html

@@ -11,14 +11,16 @@
                         <p class="card-text">
                             {{ basket.items.count }} items<br>
                             {{ basket.price|currency }}<br>
-                            {{ basket.payment_method }}
+                            {{ basket.payment_method|default:"-" }}
                         </p>
-                        {% if perms.purchase.change_basket %}
-                            <a href="{% url "purchase:update" basket.id %}" class="btn btn-sm btn-primary">Edit</a>
-                        {% endif %}
-                        {% if perms.purchase.delete_basket %}
-                            <a href="{% url "purchase:delete" basket.id %}" class="btn btn-sm btn-danger">Delete</a>
-                        {% endif %}
+                        <div class="btn-group btn-group-sm">
+                            {% if perms.purchase.change_basket %}
+                                <a href="{% url "purchase:update" basket.id %}" class="btn btn-primary"><i class="fa-solid fa-pen-to-square"></i></a>
+                            {% endif %}
+                            {% if perms.purchase.delete_basket %}
+                                <a href="{% url "purchase:delete" basket.id %}" class="btn btn-danger"><i class="fa-solid fa-trash"></i></a>
+                            {% endif %}
+                        </div>
                     </div>
                 </div>
             </div>

src/purchase/templates/purchase/snippets/basket_item.html

@@ -1,15 +1,15 @@
 {% load crispy_forms_field %}
 <div class="col">
-    <div class="card h-100">
-        <div class="card-header {% if field.value %}bg-success text-white{% endif %}">{{ product.name }}</div>
+    <div class="card h-100 {% if field.value %}bg-success text-white{% endif %}">
         {% if product.image %}
             <img src="{{ product.image.url }}" class="card-img">
         {% endif %}
         <div class="card-body">
+            <h4 class="card-title">{{ product.name }}</h4>
             <div class="input-group">
-                <button class="btn btn-danger" type="button" onclick="decrementValue('{{ field.id_for_label }}')">-</button>
+                <button class="btn btn-danger" type="button" onclick="decrementValue('{{ field.id_for_label }}')"><i class="fa-solid fa-minus"></i></button>
                 {% crispy_field field 'class' 'form-control' %}
-                <button class="btn btn-success" type="button" onclick="incrementValue('{{ field.id_for_label }}')">+</button>
+                <button class="btn btn-success {% if field.value %}border-white{% endif %}" type="button" onclick="incrementValue('{{ field.id_for_label }}')"><i class="fa-solid fa-plus"></i></button>
             </div>
         </div>
     </div>

src/purchase/templates/purchase/snippets/report_products.html

@@ -3,7 +3,7 @@
 <table class="table table-hover table-sm">
     <thead><tr>
         <th scope="col">Product</th>
-        <th scope="col">Sold</th>
+        <th scope="col"># sold</th>
         <th scope="col">Turnover</th>
     </tr></thead>
     <tbody>