From 3f9303d5b53a928e636bbf16335a4bebbeb19306 Mon Sep 17 00:00:00 2001
From: Glandos <bugs-github@antipoul.fr>
Date: Thu, 8 Jul 2021 14:42:05 +0200
Subject: [PATCH] badges for selectors, and payees in column

---
 ihatemoney/templates/forms.html | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/ihatemoney/templates/forms.html b/ihatemoney/templates/forms.html
index 9e2625bc..320c337e 100644
--- a/ihatemoney/templates/forms.html
+++ b/ihatemoney/templates/forms.html
@@ -127,17 +127,20 @@
 
     <div class="form-group row">
         <label class="col-3" for="payed_for">{{ _("For whom?") }}</label>
-        <div class="controls col-9">
-            <div id="payed_for" class="inputs-list">
-                <p><a href="#" id="selectall" onclick="selectCheckboxes(true)">{{ _("Everybody") }}</a> | <a href="#" id="selectnone" onclick="selectCheckboxes(false)">{{_("Nobody")}}</a></p>
-            {% for key, value, checked in form.payed_for.iter_choices() | sort(attribute='1') %}
-                <p class="form-check">
+        <div id="payed_for" class="controls col-9">
+            <p>
+                <a class="badge badge-secondary" href="#" classid="selectall" onclick="selectCheckboxes(true)">{{ _("Everybody") }}</a>
+                <a class="badge badge-secondary" href="#" id="selectnone" onclick="selectCheckboxes(false)">{{_("Nobody")}}</a>
+            </p>
+            <div  class="d-flex flex-column flex-wrap overflow-auto" style="max-height: 20em;">
+                {% for key, value, checked in form.payed_for.iter_choices() | sort(attribute='1') %}
+                <p class="form-check text-break" style="max-width: 50%;">
                    <label for="payed_for-{{key}}" class="form-check-label">
                       <input name="payed_for" type="checkbox" {% if checked %}checked{% endif %} class="form-check-input" value="{{key}}" id="payed_for-{{key}}"/>
                       <span>{{value}}</span>
                     </label>
                  </p>
-            {% endfor %}
+                {% endfor %}
             </div>
         </div>
     </div>