From cd666fa1ff0046f0128ce52f02429a6d1cabea9a Mon Sep 17 00:00:00 2001
From: sergio_gimenez <sergio.gimenez@i2cat.net>
Date: Tue, 29 Oct 2024 08:29:13 +0100
Subject: [PATCH] Add consistent margin and add translations

---
 device/templates/details.html | 250 +++++++++++++---------------------
 1 file changed, 94 insertions(+), 156 deletions(-)

diff --git a/device/templates/details.html b/device/templates/details.html
index d51960f..5723477 100644
--- a/device/templates/details.html
+++ b/device/templates/details.html
@@ -2,189 +2,127 @@
 {% load i18n %}
 
 {% block content %}
-<div class="row">
-  <div class="col">
-    <h3>{{ object.shortid }}</h3>
+  <div class="row">
+    <div class="col">
+      <h3>{{ object.shortid }}</h3>
+    </div>
   </div>
-</div>
 
-<div class="row">
-  <div class="col">
-    <ul class="nav nav-tabs nav-tabs-bordered">
+  <div class="row">
+    <div class="col">
+      <ul class="nav nav-tabs nav-tabs-bordered">
         <li class="nav-item">
           <a href="#details" class="nav-link active" data-bs-toggle="tab" data-bs-target="#details">{% trans 'General details' %}</a>
-      </li>
+        </li>
         <li class="nav-item">
           <a href="#annotations" class="nav-link" data-bs-toggle="tab" data-bs-target="#annotations">{% trans 'User annotations' %}</a>
-      </li>
+        </li>
         <li class="nav-item">
           <a href="#documents" class="nav-link" data-bs-toggle="tab" data-bs-target="#documents">{% trans 'Documents' %}</a>
-      </li>
+        </li>
         <li class="nav-item">
           <a href="#lots" class="nav-link" data-bs-toggle="tab" data-bs-target="#lots">{% trans 'Lots' %}</a>
-      </li>
+        </li>
         <li class="nav-item">
           <a href="#components" class="nav-link" data-bs-toggle="tab" data-bs-target="#components">{% trans 'Components' %}</a>
-      </li>
+        </li>
         <li class="nav-item">
           <a href="#evidences" class="nav-link" data-bs-toggle="tab" data-bs-target="#evidences">{% trans 'Evidences' %}</a>
-      </li>
+        </li>
         <li class="nav-item">
           <a class="nav-link" href="{% url 'device:device_web' object.id %}">Web</a>
-      </li>
-    </ul>
-  </div>
-</div>
-<div class="tab-content pt-2">
-
-  <div class="tab-pane fade show active" id="details">
-    <h5 class="card-title">{% trans "Details" %}</h5>
-    <div class="row mb-3">
-      <div class="col-lg-3 col-md-4 label ">Phid</div>
-      <div class="col-lg-9 col-md-8">{{ object.id }}</div>
+        </li>
+      </ul>
     </div>
-
-    {% if object.is_eraseserver %}
-    <div class="row mb-3">
-      <div class="col-lg-3 col-md-4 label">{% trans "Is a erase server" %}</div>
-      <div class="col-lg-9 col-md-8"></div>
-    </div>
-    {% endif %}
-
-    <div class="row">
-      <div class="col-lg-3 col-md-4 label ">{% trans "Type" %}</div>
-      <div class="col-lg-9 col-md-8">{{ object.type }}</div>
-    </div>
-
-    {% if object.is_websnapshot %}
-    {% for k, v in object.last_user_evidence %}
-    <div class="row">
-      <div class="col-lg-3 col-md-4 label">{{ k }}</div>
-      <div class="col-lg-9 col-md-8">{{ v|default:"" }}</div>
-    </div>
-    {% endfor %}
-    {% else %}
-    <div class="row">
-      <div class="col-lg-3 col-md-4 label">Manufacturer</div>
-      <div class="col-lg-9 col-md-8">{{ object.manufacturer|default:"" }}</div>
-    </div>
-
-    <div class="row">
-      <div class="col-lg-3 col-md-4 label">Model</div>
-      <div class="col-lg-9 col-md-8">{{ object.model|default:"" }}</div>
-    </div>
-
-    <div class="row">
-      <div class="col-lg-3 col-md-4 label">Serial Number</div>
-      <div class="col-lg-9 col-md-8">{{ object.last_evidence.doc.device.serialNumber|default:"" }}</div>
-    </div>
-    {% endif %}
-    <div class="row">
-      <div class="col-lg-3 col-md-4 label">Identifiers</div>
-    </div>
-    {% for chid in object.hids %}
-    <div class="row">
-      <div class="col">{{ chid |default:"" }}</div>
-    </div>
-    {% endfor %}
   </div>
 
-  <div class="tab-pane fade profile-overview" id="annotations">
-    <div class="btn-group dropdown ml-1 mt-1" uib-dropdown="">
-      <a href="{% url 'device:add_annotation' object.pk %}" class="btn btn-primary">
-        <i class="bi bi-plus"></i>
-        {% trans "Add new annotation" %}
-        <span class="caret"></span>
-      </a>
-    </div>
-
-    <h5 class="card-title mt-2">{% trans "Annotations" %}</h5>
-    <table class="table table-striped">
-      <thead>
-        <tr>
-          <th scope="col">Key</th>
-          <th scope="col">Value</th>
-          <th scope="col" data-type="date" data-format="YYYY-MM-DD hh:mm">Created on</th>
-          <th></th>
-          <th></th>
-        </tr>
-      </thead>
-      <tbody>
-      {% for a in object.get_user_annotations %}
-      <tr>
-        <td>{{ a.key }}</td>
-        <td>{{ a.value }}</td>
-        <td>{{ a.created }}</td>
-        <td></td>
-        <td></td>
-      </tr>
-      {% endfor %}
-        
-      </tbody>
-    </table>
-  </div>
   <div class="tab-content pt-2">
     <div class="tab-pane fade show active" id="details">
-      <h5 class="card-title">Details</h5>
+      <h5 class="card-title">{% trans 'Details' %}</h5>
       <div class="row mb-3">
-        <div class="col-lg-3 col-md-4 label">Phid</div>
+      <div class="col-lg-3 col-md-4 label ">Phid</div>
         <div class="col-lg-9 col-md-8">{{ object.id }}</div>
       </div>
 
-      <div class="row">
-        <div class="col-lg-3 col-md-4 label">Type</div>
+      {% if object.is_eraseserver %}
+        <div class="row mb-3">
+          <div class="col-lg-3 col-md-4 label">
+            {% trans 'Is a erase server' %}
+          </div>
+          <div class="col-lg-9 col-md-8"></div>
+        </div>
+      {% endif %}
+
+      <div class="row mb-3">
+        <div class="col-lg-3 col-md-4 label">Phid</div>
+        <div class="col-lg-9 col-md-8">{{ object.id }}</div>
+        </div>
         <div class="col-lg-9 col-md-8">{{ object.type }}</div>
       </div>
 
       {% if object.is_websnapshot %}
         {% for k, v in object.last_user_evidence %}
-          <div class="row">
+          <div class="row mb-3">
             <div class="col-lg-3 col-md-4 label">{{ k }}</div>
             <div class="col-lg-9 col-md-8">{{ v|default:'' }}</div>
           </div>
         {% endfor %}
       {% else %}
-        <div class="row">
-          <div class="col-lg-3 col-md-4 label">Manufacturer</div>
+        <div class="row mb-3">
+          <div class="col-lg-3 col-md-4 label">
+            {% trans 'Manufacturer' %}
+          </div>
           <div class="col-lg-9 col-md-8">{{ object.manufacturer|default:'' }}</div>
         </div>
 
-        <div class="row">
-          <div class="col-lg-3 col-md-4 label">Model</div>
+        <div class="row mb-3">
+          <div class="col-lg-3 col-md-4 label">
+            {% trans 'Model' %}
+          </div>
           <div class="col-lg-9 col-md-8">{{ object.model|default:'' }}</div>
         </div>
 
-        <div class="row">
-          <div class="col-lg-3 col-md-4 label">Serial Number</div>
+        <div class="row mb-3">
+          <div class="col-lg-3 col-md-4 label">
+            {% trans 'Serial Number' %}
+          </div>
           <div class="col-lg-9 col-md-8">{{ object.last_evidence.doc.device.serialNumber|default:'' }}</div>
         </div>
       {% endif %}
-      <div class="row">
-        <div class="col-lg-3 col-md-4 label">Identifiers</div>
+
+      <div class="row mb-3">
+        <div class="col-lg-3 col-md-4 label">
+          {% trans 'Identifiers' %}
+        </div>
       </div>
       {% for chid in object.hids %}
-        <div class="row">
+        <div class="row mb-3">
           <div class="col">{{ chid|default:'' }}</div>
         </div>
       {% endfor %}
     </div>
 
-    <div class="tab-pane fade profile-overview" id="annotations">
-      <div class="btn-group dropdown ml-1 mt-1" uib-dropdown="">
+    <div class="tab-pane fade" id="annotations">
+      <div class="btn-group mt-1 mb-3">
         <a href="{% url 'device:add_annotation' object.pk %}" class="btn btn-primary">
           <i class="bi bi-plus"></i>
-          Add new annotation
-          <span class="caret"></span>
+          {% trans 'Add new annotation' %}
         </a>
       </div>
 
-      <h5 class="card-title mt-2">Annotations</h5>
+      <h5 class="card-title">{% trans 'Annotations' %}</h5>
       <table class="table table-striped">
         <thead>
           <tr>
-            <th scope="col">Key</th>
-            <th scope="col">Value</th>
-            <th scope="col" data-type="date" data-format="YYYY-MM-DD hh:mm">Created on</th>
+            <th scope="col">
+              {% trans 'Key' %}
+            </th>
+            <th scope="col">
+              {% trans 'Value' %}
+            </th>
+            <th scope="col" data-type="date" data-format="YYYY-MM-DD HH:mm">
+              {% trans 'Created on' %}
+            </th>
             <th></th>
             <th></th>
           </tr>
@@ -203,38 +141,27 @@
       </table>
     </div>
 
-    <div class="tab-pane fade profile-overview" id="lots">
-      {% for tag in lot_tags %}
-        <h5 class="card-title">{{ tag }}</h5>
-
-        {% for lot in object.lots %}
-          {% if lot.type == tag %}
-            <div class="row">
-              <div class="col">
-                <a href="{% url 'dashboard:lot' lot.id %}">{{ lot.name }}</a>
-              </div>
-            </div>
-          {% endif %}
-        {% endfor %}
-      {% endfor %}
-    </div>
-
-    <div class="tab-pane fade profile-overview" id="documents">
-      <div class="btn-group dropdown ml-1 mt-1" uib-dropdown="">
+    <div class="tab-pane fade" id="documents">
+      <div class="btn-group mt-1 mb-3">
         <a href="{% url 'device:add_document' object.pk %}" class="btn btn-primary">
           <i class="bi bi-plus"></i>
-          Add new document
-          <span class="caret"></span>
+          {% trans 'Add new document' %}
         </a>
       </div>
 
-      <h5 class="card-title mt-2">Documents</h5>
+      <h5 class="card-title">{% trans 'Documents' %}</h5>
       <table class="table table-striped">
         <thead>
           <tr>
-            <th scope="col">Key</th>
-            <th scope="col">Value</th>
-            <th scope="col" data-type="date" data-format="YYYY-MM-DD hh:mm">Created on</th>
+            <th scope="col">
+              {% trans 'Key' %}
+            </th>
+            <th scope="col">
+              {% trans 'Value' %}
+            </th>
+            <th scope="col" data-type="date" data-format="YYYY-MM-DD HH:mm">
+              {% trans 'Created on' %}
+            </th>
             <th></th>
             <th></th>
           </tr>
@@ -253,8 +180,23 @@
       </table>
     </div>
 
-    <div class="tab-pane fade profile-overview" id="components">
-      <h5 class="card-title">Components last evidence</h5>
+    <div class="tab-pane fade" id="lots">
+      {% for tag in lot_tags %}
+        <h5 class="card-title">{{ tag }}</h5>
+        {% for lot in object.lots %}
+          {% if lot.type == tag %}
+            <div class="row mb-3">
+              <div class="col">
+                <a href="{% url 'dashboard:lot' lot.id %}">{{ lot.name }}</a>
+              </div>
+            </div>
+          {% endif %}
+        {% endfor %}
+      {% endfor %}
+    </div>
+
+    <div class="tab-pane fade" id="components">
+      <h5 class="card-title">{% trans 'Components last evidence' %}</h5>
       <div class="list-group col-6">
         {% for c in object.components %}
           <div class="list-group-item">
@@ -268,27 +210,23 @@
                   {{ k }}: {{ v }}<br />
                 {% endif %}
               {% endfor %}
-              <br />
             </p>
-            <small class="text-muted"></small>
           </div>
         {% endfor %}
       </div>
     </div>
 
-    <div class="tab-pane fade profile-overview" id="evidences">
-      <h5 class="card-title">List of evidences</h5>
+    <div class="tab-pane fade" id="evidences">
+      <h5 class="card-title">{% trans 'List of evidences' %}</h5>
       <div class="list-group col-6">
         {% for snap in object.evidences %}
           <div class="list-group-item">
             <div class="d-flex w-100 justify-content-between">
-              <h5 class="mb-1"></h5>
               <small class="text-muted">{{ snap.created }}</small>
             </div>
             <p class="mb-1">
               <a href="{% url 'evidence:details' snap.uuid %}">{{ snap.uuid }}</a>
             </p>
-            <small class="text-muted"></small>
           </div>
         {% endfor %}
       </div>