From 9b89a034e3a7515f568456026a203adde52204a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Krop=C3=A1=C4=8Dek?= <kropikuba@gmail.com>
Date: Mon, 17 Feb 2025 22:46:29 +0100
Subject: [PATCH] made invoice preview using bootstrap

---
 invoices/templates/invoices/view.html | 78 +++++++++++----------------
 1 file changed, 30 insertions(+), 48 deletions(-)

diff --git a/invoices/templates/invoices/view.html b/invoices/templates/invoices/view.html
index 6799329..755406f 100644
--- a/invoices/templates/invoices/view.html
+++ b/invoices/templates/invoices/view.html
@@ -2,62 +2,50 @@
 {% load static %}
 {% load i18n %}
 {% block title %}{% trans "Invoice" %}{% endblock %}
-{% block head %}
-    <link rel="stylesheet" href="{% static "css/invoice.css" %}">
-{% endblock %}
 {% block content %}
-    <header>
-        <h1>{% trans "Invoice" %} <span class="invoice-id">{{ invoice.custom_id }}</span></h1>
-    </header>
-    <section class="parties-section">
-        <div class="parties">
-            <h2>{% trans "Supplier" %}</h2>
-            <ul>
+    <h1>{% trans "Invoice" %} <span class="invoice-id">{{ invoice.custom_id }}</span></h1>
+    <div class="row">
+        <div class="col">
+            <h3>{% trans "Supplier" %}</h3>
+            <ul class="list-group">
                 {% with invoice.supplier_data as sd %}
-                    <li>{{ sd.name }}</li>
-                    <li>{{ sd.street }}</li>
-                    <li>{{ sd.city }} - {{ sd.city_part }}, {{ sd.zip_code }}</li>
-                    <p></p>
-                    <li>{% trans "CIN" %}: {{ invoice.supplier.id }}</li>
+                    <li class="list-group-item">{{ sd.name }}</li>
+                    <li class="list-group-item">{{ sd.street }}</li>
+                    <li class="list-group-item">{{ sd.city }} - {{ sd.city_part }}, {{ sd.zip_code }}</li>
+                    <li class="list-group-item">{% trans "CIN" %}: {{ invoice.supplier.id }}</li>
                     {% if invoice.supplier.vat_id %}
-                        <li>{% trans "VAT ID" %}: {{ invoice.supplier.vat_id }}</li>
+                        <li class="list-group-item">{% trans "VAT ID" %}: {{ invoice.supplier.vat_id }}</li>
                     {% endif %}
-                    <p></p>
-                    <li>{% trans "Bank Account" %}: TODO</li>
+                    <li class="list-group-item">{% trans "Bank Account" %}: TODO</li>
                 {% endwith %}
             </ul>
         </div>
-
-        <div class="parties">
-            <h2>{% trans "Customer" %}</h2>
-            <ul>
+        <div class="col">
+            <h3>{% trans "Customer" %}</h3>
+            <ul class="list-group">
                 {% with invoice.customer_data as cd %}
-                    <li>{{ cd.name }}</li>
-                    <li>{{ cd.street }}</li>
-                    <li>{{ cd.city }} - {{ cd.city_part }}, {{ cd.zip_code }}</li>
-                    <p></p>
-                    <li>{% trans "CIN" %}: {{ invoice.customer.id }}</li>
+                    <li class="list-group-item">{{ cd.name }}</li>
+                    <li class="list-group-item">{{ cd.street }}</li>
+                    <li class="list-group-item">{{ cd.city }} - {{ cd.city_part }}, {{ cd.zip_code }}</li>
+                    <li class="list-group-item">{% trans "CIN" %}: {{ invoice.customer.id }}</li>
                     {% if invoice.customer.vat_id %}
-                        <li>{% trans "VAT ID" %}: {{ invoice.customer.vat_id }}</li>
+                        <li class="list-group-item">{% trans "VAT ID" %}: {{ invoice.customer.vat_id }}</li>
                     {% endif %}
-                    <p></p>
-                    <li><strong>{% trans "Invoice date" %}:</strong> {{ invoice.invoice_date }}</li>
-                    <li><strong>{% trans "Due date" %}:</strong> {{ invoice.due_date }}</li>
+                    <li class="list-group-item"><strong>{% trans "Invoice date" %}:</strong> {{ invoice.invoice_date }}
+                    </li>
+                    <li class="list-group-item"><strong>{% trans "Due date" %}:</strong> {{ invoice.due_date }}</li>
                 {% endwith %}
             </ul>
         </div>
-    </section>
-
-    <section>
         <h2>{% trans "Invoice details" %}</h2>
-        <table id="invoice">
+        <table class="table">
             <thead>
             <tr>
-                <th class="small-col">{% trans "Amount" %}</th>
-                <th class="small-col">{% trans "Amount unit" %}</th>
-                <th class="big-col">{% trans "Description" %}</th>
-                <th class="medium-col right-align">{% trans "Price for amount" %}</th>
-                <th class="medium-col right-align">{% trans "Total" %}</th>
+                <th>{% trans "Amount" %}</th>
+                <th>{% trans "Amount unit" %}</th>
+                <th>{% trans "Description" %}</th>
+                <th>{% trans "Price for amount" %}</th>
+                <th>{% trans "Total" %}</th>
             </tr>
             </thead>
             <tbody>
@@ -72,14 +60,8 @@
             {% endfor %}
             </tbody>
         </table>
-
-        <div class="invoice-total">
+        <div class="text-end">
             <p><strong>{% trans "Total" %}: {{ invoice.total_price.normalize }} Kč</strong></p>
         </div>
-    </section>
-
-    <footer>
-        <p>Fyzická osoba zapsaná v živnostenském rejstříku.</p>
-        <p>Fakturu vygenerovala aplikace Facturio</p>
-    </footer>
+    </div>
 {% endblock %}