cosmetics: use multi-columns for checkboxes

resources/css/style.css

@@ -203,6 +203,16 @@ main form {
     float:none !important;
 }
 
+ul.columns4 {
+    column-count: 4;
+    list-style-type: none;
+}
+
+ul.columns3 {
+    column-count: 3;
+    list-style-type: none;
+}
+
 .nocursor{
     cursor: default!important;
     opacity:0.6;

templates/web/edugain/complete_challenge.tt2.html

@@ -24,12 +24,16 @@
         </fieldset>
         <fieldset>
             <legend>[% lh.maketext("Account profiles:") %]</legend>
+            <ul class="columns4">
 [% FOREACH profile IN profiles %]
     [% template = profile _ '.tt2' %]
     [% PROCESS $template scope=account.scope() id=account.id() | trim %]
-            <input type="checkbox" id="[% profile %]" name="profiles" value="[% profile %]" checked/>
-            <label for="[% profile %]">[% profile %] <span class="fa fa-question-circle" title="[% description.${lh.language_tag()} %]"></span></label>
+                <li>
+                    <input type="checkbox" id="[% profile %]" name="profiles" value="[% profile %]" checked/>
+                    <label for="[% profile %]">[% profile %] <span class="fa fa-question-circle" title="[% description.${lh.language_tag()} %]"></span></label>
+                </li>
 [% END %]
+            </ul>
 
         </fieldset>
         <input type="hidden" name="federation" value="[% federation %]"/>

templates/web/renater/complete_challenge.tt2.html

@@ -24,12 +24,16 @@
         </fieldset>
         <fieldset>
             <legend>[% lh.maketext("Account profiles:") %]</legend>
+            <ul class="columns4">
 [% FOREACH profile IN profiles %]
     [% template = profile _ '.tt2' %]
     [% PROCESS $template scope=account.scope() id=account.id() | trim %]
-            <input type="checkbox" id="[% profile %]" name="profiles" value="[% profile %]" checked/>
-            <label for="[% profile %]">[% profile %] <span class="fa fa-question-circle" title="[% description.${lh.language_tag()} %]"></span></label>
+                <li>
+                    <input type="checkbox" id="[% profile %]" name="profiles" value="[% profile %]" checked/>
+                    <label for="[% profile %]">[% profile %] <span class="fa fa-question-circle" title="[% description.${lh.language_tag()} %]"></span></label>
+                </li>
 [% END %]
+            </ul>
 
         </fieldset>
         <input type="hidden" name="federation" value="[% federation %]"/>