From 7dfeb3e44e2ed4d4b38ee16768e64207aac6eb91 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javier=20S=C3=A1nchez=20Parra?= <jsanchez@soleta.eu>
Date: Tue, 8 Mar 2022 17:22:48 +0100
Subject: [PATCH] Set pills width

Set the same width to all pills.
---
 ogcp/static/css/soleta.css | 4 ++++
 ogcp/static/js/ogcp.js     | 2 +-
 ogcp/templates/macros.html | 2 +-
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/ogcp/static/css/soleta.css b/ogcp/static/css/soleta.css
index 6871cf8..2dc0c3e 100644
--- a/ogcp/static/css/soleta.css
+++ b/ogcp/static/css/soleta.css
@@ -35,3 +35,7 @@ html, body {
   color: white !important;
   background-color: #99791a !important;
 }
+
+.og-pill {
+  width: 11em;
+}
diff --git a/ogcp/static/js/ogcp.js b/ogcp/static/js/ogcp.js
index 00b451c..0f3a648 100644
--- a/ogcp/static/js/ogcp.js
+++ b/ogcp/static/js/ogcp.js
@@ -8,7 +8,7 @@ function showSelectedClient(client_checkbox) {
 
     if (client_checkbox.checked) {
         if (!($('#' + pill_id).length))
-            $(container).append('<div class="badge badge-pill badge-light" ' +
+            $(container).append('<div class="badge badge-pill og-pill badge-light" ' +
                                 'id="'+ pill_id + '">' + client_checkbox.name +
                                 '<br>' + client_checkbox.value + '</div>');
         return;
diff --git a/ogcp/templates/macros.html b/ogcp/templates/macros.html
index 5cfeba7..19ec8c7 100644
--- a/ogcp/templates/macros.html
+++ b/ogcp/templates/macros.html
@@ -58,7 +58,7 @@
 <div class="d-flex flex-wrap justify-content-center">
     {% set max_clients = 50 %}
     {% for name_id, ip in selected_clients[:max_clients] %}
-    <div id="pill-{{ name_id|replace(".", "_") }}" class="badge badge-pill badge-light">
+    <div id="pill-{{ name_id|replace(".", "_") }}" class="badge badge-pill og-pill badge-light">
         {{ name_id }}<br>{{ ip }}
     </div>
     {% if loop.last and (selected_clients|length > max_clients) %}