From 27177d06d09acabdfac055a19c9813cd4df521b6 Mon Sep 17 00:00:00 2001
From: Thomas Rusiecki <rusieckithomas@gmail.com>
Date: Fri, 14 Feb 2025 18:13:49 -0300
Subject: [PATCH] more bootstrap formatting

---
 admin/templates/delete_user.html           |  22 ++-
 device/templates/new_device.html           |  35 ++--
 device/templates/tabs/user_properties.html | 199 +++++++++------------
 lot/templates/properties.html              |  21 +--
 4 files changed, 129 insertions(+), 148 deletions(-)

diff --git a/admin/templates/delete_user.html b/admin/templates/delete_user.html
index 5aa402d..452b61a 100644
--- a/admin/templates/delete_user.html
+++ b/admin/templates/delete_user.html
@@ -1,19 +1,24 @@
 {% extends "base.html" %}
 {% load i18n %}
 
+{% load django_bootstrap5 %}
+
 {% block content %}
 <div class="row">
   <div class="col">
     <h3>{{ subtitle }}</h3>
   </div>
 </div>
-
-{% load django_bootstrap5 %}
-<div class="row mb-3">
-  <div class="col">
-    Are you sure than want remove the lot {{ object.name }} with {{ object.devices.count }} devices.
+  <div class="row mb-4">
+    <div class="col">
+      <div class="alert alert-warning" role="alert">
+        <i class="bi bi-exclamation-triangle-fill me-2"></i>
+        {% blocktranslate %}
+          Are you sure you want to remove the lot <strong>{{ object.name }}</strong> with <strong>{{ object.devices.count }}</strong> devices?
+        {% endblocktranslate %}
+      </div>
+    </div>
   </div>
-</div>
 
 <form role="form" method="post">
 {% csrf_token %}
@@ -31,7 +36,10 @@
 {% bootstrap_form form %}
 <div class="form-actions-no-box">
   <a class="btn btn-grey" href="{% url 'admin:users' %}">{% translate "Cancel" %}</a>
-  <input class="btn btn-green-admin" type="submit" name="submit" value="{% translate 'Delete' %}" />
+  <button type="submit" class="btn btn-danger">
+    <i class="bi bi-trash me-1"></i>
+    {% translate "Delete" %}
+  </button>
 </div>
 
 </form>
diff --git a/device/templates/new_device.html b/device/templates/new_device.html
index 320790d..0ab67f7 100644
--- a/device/templates/new_device.html
+++ b/device/templates/new_device.html
@@ -28,33 +28,30 @@
 <form role="form" method="post">
   {% csrf_token %}
   {% if form.errors %}
-  <div class="alert alert-danger alert-icon alert-icon-border alert-dismissible" role="alert">
-    <div class="icon"><span class="mdi mdi-close-circle-o"></span></div>
-    <div class="message">
-      {% for field, error in form.errors.items %}
-        {{ error }}<br />
-      {% endfor %}
-      <button class="btn-close" type="button" data-dismiss="alert" aria-label="Close"></button>
+    <div class="alert alert-danger alert-dismissible fade show" role="alert">
+      <div class="d-flex align-items-center">
+        <i class="bi bi-exclamation-circle me-2"></i>
+        <div>
+          {% for field, error in form.errors.items %}
+            {{ error }}<br />
+          {% endfor %}
+        </div>
+      </div>
+      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
     </div>
-  </div>
   {% endif %}
   {{ form.management_form }}
   <div class="container" id="formset-container">
-    <div class="row mb-2">
-      <div class="col">
+    <div class="row mb-3">
+      <div class="col-md-4">
         {% bootstrap_field form.0.type %}
       </div>
-    </div>
-    <div class="row mb-2">
-      <div class="col">
-        {% bootstrap_field form.0.amount %}
-      </div>
-    </div>
-    <div class="row mb-2">
-      <div class="col">
+      <div class="col-md-4">
         {% bootstrap_field form.0.custom_id %}
       </div>
-    </div>
+      <div class="col-md-4">
+        {% bootstrap_field form.0.amount %}
+      </div>    </div>
     <div class="row mb-2">
       <div class="col-10">
         <span class="fw-bold">{% trans 'Component details' %}</span>
diff --git a/device/templates/tabs/user_properties.html b/device/templates/tabs/user_properties.html
index 4a9ffbc..3b72eb1 100644
--- a/device/templates/tabs/user_properties.html
+++ b/device/templates/tabs/user_properties.html
@@ -2,130 +2,109 @@
 {% load i18n %}
 
 <div class="tab-pane fade" id="user_properties">
-    <div class="d-flex justify-content-end mt-1 mb-3">
-      <a href="{% url 'device:add_user_property' object.pk %}"
-        class="btn btn-green-admin d-flex align-items-center">
-        <i class="bi bi-plus me-1"></i>
-        {% trans 'New user property' %}
-      </a>
+    <div class="d-flex justify-content-end mt-3 mb-4">
+        <a href="{% url 'device:add_user_property' object.pk %}"
+           class="btn btn-green-user d-flex align-items-center">
+            <i class="bi bi-plus me-2"></i>
+            {% trans 'New user property' %}
+        </a>
     </div>
+    <h5 class="card-title mb-4">{% trans 'User properties' %}</h5>
 
-      <h5 class="card-title">{% trans 'User properties' %}</h5>
-
-      <table class="table table-hover table-bordered table-responsive align-middle">
-        <thead class="table-light">
-          <tr>
-            <th scope="col">{% trans 'Key' %}</th>
-            <th scope="col">{% trans 'Value' %}</th>
-            <th scope="col" data-type="date" class="text-end" data-format="YYYY-MM-DD HH:mm">{% trans 'Created on' %}</th>
-            <th scope="col" width="5%" class="text-end" title="{% trans 'Actions' %}"></th>
-         </tr>
-        </thead>
-        <tbody>
-          {% for a in object.get_user_properties %}
-            <tr>
-                <td>{{ a.key }}
-                </td>
-                <td>{{ a.value }}
-                </td>
-                <td class="text-end">{{ a.created }}
-                </td>
-              <td>
-                <div class="btn-group ">
-                  <button
-                    type="button"
-                    class="btn btn-sm btn-outline-info d-flex align-items-center" data-bs-toggle="modal"
-                    data-bs-target="#editModal{{ a.id }}" >
-                    <i class="bi bi-pencil me-1"></i>
-                    {% trans 'Edit' %}
-                  </button>
-                  <button
-                    type="button"
-                    class="btn btn-sm btn-outline-danger d-flex align-items-center"
-                    data-bs-toggle="modal" data-bs-target="#deleteModal{{ a.id }}">
-                    <i class="bi bi-trash me-1"></i>
-                    {% trans 'Delete' %}
-                  </button>
-                </div>
-              </td>
-            </tr>
-          {% endfor %}
-        </tbody>
-      </table>
+    <div class="table-responsive">
+        <table class="table table-hover table-bordered align-middle">
+            <thead class="table-light">
+                <tr>
+                    <th scope="col">{% trans 'Key' %}</th>
+                    <th scope="col">{% trans 'Value' %}</th>
+                    <th scope="col" data-type="date" class="text-end" data-format="YYYY-MM-DD HH:mm">{% trans 'Created on' %}</th>
+                    <th scope="col" width="10%" class="text-end">{% trans 'Actions' %}</th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for a in object.get_user_properties %}
+                    <tr>
+                        <td>{{ a.key }}</td>
+                        <td>{{ a.value }}</td>
+                        <td class="text-end">{{ a.created }}</td>
+                        <td class="text-end">
+                            <div class="btn-group">
+                                <button type="button"
+                                        class="btn btn-sm btn-outline-primary d-flex align-items-center me-2"
+                                        data-bs-toggle="modal"
+                                        data-bs-target="#editModal{{ a.id }}">
+                                    <i class="bi bi-pencil me-1"></i>
+                                    {% trans 'Edit' %}
+                                </button>
+                                <button type="button"
+                                        class="btn btn-sm btn-outline-danger d-flex align-items-center"
+                                        data-bs-toggle="modal"
+                                        data-bs-target="#deleteModal{{ a.id }}">
+                                    <i class="bi bi-trash me-1"></i>
+                                    {% trans 'Delete' %}
+                                </button>
+                            </div>
+                        </td>
+                    </tr>
+                {% endfor %}
+            </tbody>
+        </table>
     </div>
+</div>
 
 <!-- pop up modal for delete confirmation -->
 {% for a in object.get_user_properties %}
 <div class="modal fade" id="deleteModal{{ a.id }}" tabindex="-1" aria-labelledby="deleteModalLabel{{ a.id }}" aria-hidden="true">
-  <div class="modal-dialog modal-dialog-centered">
-    <div class="modal-content">
-      <div class="modal-header">
-          <h5 class="modal-title" id="deleteModalLabel{{ a.id }}">{% trans "Confirm Deletion" %}
-          </h5>
-          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
-          </button>
-      </div>
-      <div class="modal-body">
-          <p>
-              <strong>{% trans "Key:" %}
-              </strong> {{ a.key }}
-          </p>
-          <p>
-              <strong>{% trans "Value:" %}
-              </strong> {{ a.value }}
-          </p>
-          <p>
-              <strong>{% trans "Created on:" %}
-              </strong> {{ a.created }}
-          </p>
-      </div>
-      <div class="modal-footer justify-content-center">
-          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Cancel" %}
-          </button>
-        <form method="post" action="{% url 'device:delete_user_property' object.id a.id %}">
-          {% csrf_token %}
-            <button type="submit" class="btn btn-danger">{% trans "Delete" %}
-            </button>
-        </form>
-      </div>
+    <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+            <div class="modal-header bg-light">
+                <h5 class="modal-title" id="deleteModalLabel{{ a.id }}">{% trans "Confirm Deletion" %}</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <p><strong>{% trans "Key:" %}</strong> {{ a.key }}</p>
+                <p><strong>{% trans "Value:" %}</strong> {{ a.value }}</p>
+                <p><strong>{% trans "Created on:" %}</strong> {{ a.created }}</p>
+            </div>
+            <div class="modal-footer justify-content-center">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Cancel" %}</button>
+                <form method="post" action="{% url 'device:delete_user_property' object.id a.id %}">
+                    {% csrf_token %}
+                    <button type="submit" class="btn btn-danger">{% trans "Delete" %}</button>
+                </form>
+            </div>
+        </div>
     </div>
-  </div>
 </div>
 {% endfor %}
 
 <!-- popup modals for edit button -->
 {% for a in object.get_user_properties %}
 <div class="modal fade" id="editModal{{ a.id }}" tabindex="-1" aria-labelledby="editModalLabel{{ a.id }}" aria-hidden="true">
-  <div class="modal-dialog modal-dialog-centered">
-    <div class="modal-content">
-      <div class="modal-header">
-          <h5 class="modal-title" id="editModalLabel{{ a.id }}">{% trans "Edit User Property" %}
-          </h5>
-          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
-          </button>
-      </div>
-      <div class="modal-body">
-        <form id="editForm{{ a.id }}" method="post" action="{% url 'device:update_user_property' object.id a.id %}">
-          {% csrf_token %}
-          <div class="mb-3">
-              <label for="key" class="form-label">{% trans "Key" %}
-              </label>
-            <input type="text" class="form-control" id="key" name="key" value="{{ a.key }}">
-          </div>
-          <div class="mb-3">
-              <label for="value" class="form-label">{% trans "Value" %}
-              </label>
-            <input type="text" class="form-control" id="value" name="value" value="{{ a.value }}">
-          </div>
-          <div class="modal-footer justify-content-center">
-              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Cancel" %}
-              </button>
-              <button type="submit" class="btn btn-primary">{% trans "Save changes" %}
-              </button>
-          </div>
-        </form>
-      </div>
+    <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+            <div class="modal-header bg-light">
+                <h5 class="modal-title" id="editModalLabel{{ a.id }}">{% trans "Edit User Property" %}</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <form id="editForm{{ a.id }}" method="post" action="{% url 'device:update_user_property' object.id a.id %}">
+                    {% csrf_token %}
+                    <div class="mb-3">
+                        <label for="key" class="form-label">{% trans "Key" %}</label>
+                        <input type="text" class="form-control" id="key" name="key" value="{{ a.key }}">
+                    </div>
+                    <div class="mb-3">
+                        <label for="value" class="form-label">{% trans "Value" %}</label>
+                        <input type="text" class="form-control" id="value" name="value" value="{{ a.value }}">
+                    </div>
+                    <div class="modal-footer justify-content-center">
+                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Cancel" %}</button>
+                        <button type="submit" class="btn btn-primary">{% trans "Save changes" %}</button>
+                    </div>
+                </form>
+            </div>
+        </div>
     </div>
-  </div>
 </div>
 {% endfor %}
diff --git a/lot/templates/properties.html b/lot/templates/properties.html
index e989255..289e775 100644
--- a/lot/templates/properties.html
+++ b/lot/templates/properties.html
@@ -1,25 +1,22 @@
 {% extends "base.html" %}
 {% load i18n %}
 
+{% block actions %}
+  <a href="{% url 'lot:add_property' lot.pk %}" class="btn btn-green-admin d-flex align-items-center">
+    <i class="bi bi-plus pe-2"></i>
+    Add Property
+    <span class="caret"></span>
+  </a>
+{% endblock %}
+
 {% block content %}
-<div class="row">
-  <div class="col">
-    <h3>Lot {{ lot.name }}</h3>
-  </div>
-</div>
+<h3>Lot {{ lot.name }}</h3>
 
 <div class="row">
   <div class="tab-pane fade show active" id="details">
     <div class="d-flex justify-content-end mt-1 mb-3">
-      <a href="{% url 'lot:add_property' lot.pk %}" class="btn btn-green-admin d-flex align-items-center">
-
-        <i class="bi bi-plus"></i>
-        Add new lot Property
-        <span class="caret"></span>
-      </a>
     </div>
 
-    <h5 class="card-title mt-2">Properties</h5>
     <table class="table table-hover table-bordered table-responsive align-middle">
       <thead class="table-light">
         <tr>