update device and computer details to bootstrap4

computers/templates/computers/computer_details.html

@@ -1,7 +1,7 @@
 {% extends "core/base.html" %}
 {% block section_title %}{{ device }}{% endblock %}
 {% block content %}
-<div class="row">
+<div class="row row-cols-3">
     <div class="col">
     {% block device_details %}
         {% include "devices/device_details_block.html" %}
@@ -19,11 +19,11 @@
         {% include "devices/ip_block.html" %}
     {% endblock %}
     </div>
-</div>
 
-<div class="row">
     {% if device.os or software_relations or backup_relations or license_list or device.host %}
     <div class="col">
+        <div class="card">
+            <div class="card-body">
                 {% if device.host %}
                 <h2>Host</h2>
                 <ul>
@@ -31,7 +31,6 @@
                 </ul>
                 {% endif %}
 
-
                 {% if device.os %}
                 <h2>Operating System</h2>
                 <ul>
@@ -63,14 +62,17 @@
                 </ul>
                 {% endif %}
             </div>
+        </div>
+    </div>
     {% endif %}
 
     {% if cpu_relations or ram_relations or disks_relations or raid_disk_pairs %}
     <div class="col">
+        <div class="card">
+            <h2 class="card-header">Hardware</h2>
+            <div class="card-body">
                 {% if cpu_relations or ram_relations or disks_relations or device.host %}
-    <h2>Hardware</h2>
                 <table class="table table-bordered">
-
                     {% if cpu_relations %}
                     <tr>
                         <td><b>CPUs:</b></td>
@@ -107,7 +109,7 @@
                 {% endif %}
 
                 {% if raid_disk_pairs %}
-    <h2>RAID</h2>
+                <h3>RAID</h3>
                 {% for raid, disks in raid_disk_pairs.items %}
                 <table class="table table-bordered">
                     <tr>
@@ -133,9 +135,9 @@
                 </table>
                 {% endfor %}
                 {% endif %}
-
+            </div>
+        </div>
     {% endif %}
     </div>
-
 </div>
 {% endblock %}

devices/templates/devices/device_details_block.html

@@ -1,5 +1,7 @@
-    <h2>Description</h2>
-    <div class="description"><p>{{ device.description }}</p></div>
+<div class="card">
+    <div class="card-body">
+        <h4>Description</h4>
+        <div class="card-text"><p>{{ device.description }}</p></div>
         <table class="table table-bordered">
             <tr>
                 <td><b>Serial Number:</b></td>
@@ -35,3 +37,5 @@
                 <td>{{ device.installation_date }}</td>
             </tr>
         </table>
+    </div>
+</div>

devices/templates/devices/ip_block.html

@@ -1,6 +1,7 @@
 {% if device.nets %}
-    <div class="col">
-    <h2>IPs</h2>
+<div class="card">
+    <h2 class="card-header">IPs</h2>
+    <div class="card-body">
         <table class="table table-bordered">
             {% regroup device.nets by name as nets_list %}
             {% for net in nets_list %}
@@ -15,5 +16,6 @@
             {% endfor %}
         </table>
     </div>
+</div>
 {% endif %}
 

devices/templates/devices/warranty_block.html

@@ -1,6 +1,7 @@
-    {% if warranty_relations %}
-    <div class="col">
-    <h2>Warranty</h2>
+{% if warranty_relations %}
+<div class="card">
+    <h2 class="card-header">Warranty</h2>
+    <div class="card-body">
         {% for warranty in warranty_relations %}
         <table class="table table-bordered">
             <tr>
@@ -8,16 +9,19 @@
             <td>
                 {{ warranty.valid_from }}<br>
             </td>
+            </tr>
             <tr>
             <td><b>Valid Until:</b></td>
             <td>
                 {{ warranty.valid_until }}<br>
             </td>
+            </tr>
             <tr>
             <td><b>Duration:</b></td>
             <td>
                 {{ warranty.duration_in_years }}<br>
             </td>
+            </tr>
             <tr>
             <td><b>Type:</b></td>
             <td>
@@ -27,4 +31,5 @@
         </table>
         {% endfor %}
     </div>
-    {% endif %}
+</div>
+{% endif %}

licenses/templates/licenses/license_block.html

@@ -1,9 +1,9 @@
 <h2>Licenses</h2>
 <table class="table table-bordered">
-{% for license in license_list %}
-<tr>
+    {% for license in license_list %}
+    <tr>
         <td>{{ license.license.software }}</td>
         <td><code>{{ license.license.key }}</code></td>
-</tr>
-{% endfor %}
+    </tr>
+    {% endfor %}
 </table>