templates: fix ip card list spacing

Remove unwanted witespace caused by tabs and spaces.
Add margin to the ip card style to define an explicit spacing.

5 files changed, 14 insertions, 22 deletions

diff --git a/ogcp/templates/actions/cache.html b/ogcp/templates/actions/cache.html
index d64aebe..17d8cb4 100644
--- a/ogcp/templates/actions/cache.html
+++ b/ogcp/templates/actions/cache.html
@@ -42,9 +42,7 @@
                             <div>∘︎ Checksum: {{images_data[image.selected.label.text]['checksum']}}</div>
                         </td>
                         <td>
-                          {% for ip in images_data[image.selected.label.text]['clients'] %}
-                          <div class="card d-inline-block" style="padding: 5px;">{{ ip }}</div>
-                          {% endfor %}
+                          {% for ip in images_data[image.selected.label.text]['clients'] %}<div class="card d-inline-block" style="padding: 5px; margin: 3px;">{{ ip }}</div>{% endfor %}
                         </td>
                     </tr>
                 {% endfor %}
diff --git a/ogcp/templates/actions/oglive.html b/ogcp/templates/actions/oglive.html
index 82bd957..dfffd04 100644
--- a/ogcp/templates/actions/oglive.html
+++ b/ogcp/templates/actions/oglive.html
@@ -22,21 +22,19 @@
 
     <table class="table table-hover">
     <thead class="thead-light">
-	<tr>
-	    <th>ogLive</th>
-	    <th>Clients</th>
-	</tr>
+  <tr>
+      <th>ogLive</th>
+      <th>Clients</th>
+  </tr>
     </thead>
     <tbody class="text-left">
     {% for oglive, clients in oglives_set.items() %}
-	<tr>
-	    <th>{{oglive}}</th>
-	    <td>
-	    {% for ip in clients %}
-      <div class="card d-inline-block" style="padding: 5px;">{{ ip }}</div>
-	    {% endfor %}
-	    </td>
-	</tr>
+  <tr>
+      <th>{{oglive}}</th>
+      <td>
+      {% for ip in clients %}<div class="card d-inline-block" style="padding: 5px; margin: 3px;">{{ ip }}</div>{% endfor %}
+      </td>
+  </tr>
     {% endfor %}
     </tbody>
     </table>
diff --git a/ogcp/templates/actions/select_client.html b/ogcp/templates/actions/select_client.html
index a44c551..92c6ecb 100644
--- a/ogcp/templates/actions/select_client.html
+++ b/ogcp/templates/actions/select_client.html
@@ -44,9 +44,7 @@
                   {% endif %}
                 </td>
                 <td>
-                  {% for ip in ips %}
-                      <div class="card d-inline-block" style="padding: 5px;">{{ ip }}</div>
-                  {% endfor %}
+                  {% for ip in ips %}<div class="card d-inline-block" style="padding: 5px; margin: 3px;">{{ ip }}</div>{% endfor %}
                 </td>
               </tr>
             {% endfor %}
diff --git a/ogcp/templates/actions/session.html b/ogcp/templates/actions/session.html
index 421226d..bcca791 100644
--- a/ogcp/templates/actions/session.html
+++ b/ogcp/templates/actions/session.html
@@ -40,9 +40,7 @@ The selected clients have different installed OS:
                             <b>{{ os_choice.label.text }}</b>
                         </td>
                         <td>
-                            {% for ip in os_groups[os_choice.data] %}
-                            <div class="card d-inline-block" style="padding: 5px;">{{ ip }}</div>
-                            {% endfor %}
+                            {% for ip in os_groups[os_choice.data] %}<div class="card d-inline-block" style="padding: 5px; margin: 3px;">{{ ip }}</div>{% endfor %}
                         </td>
                     </tr>
                 {% endfor %}
diff --git a/ogcp/templates/disk_inspector.html b/ogcp/templates/disk_inspector.html
index 0b9ab4f..2f19ad2 100644
--- a/ogcp/templates/disk_inspector.html
+++ b/ogcp/templates/disk_inspector.html
@@ -308,7 +308,7 @@
             missingClientsText = "<p>{{ _('Clients missing the target disk:') }}</p>";
         }
         for (const c of excludedClientDisks[selectedDisk]) {
-            missingClientsText += '<div class="card d-inline-block" style="padding: 5px;">' + c + '</div>';
+            missingClientsText += '<div class="card d-inline-block" style="padding: 5px; margin: 3px;">' + c + '</div>';
         }
         $('#clientWarningMsg').html(missingClientsText);
 {% endif %}