From 1314f8e2d278aab6b3896d6748672ebbb5a497e0 Mon Sep 17 00:00:00 2001
From: Coleman Watts <coleman@civicrm.org>
Date: Thu, 6 Jun 2019 09:19:24 -0400
Subject: [PATCH] Use crm-checkbox-list styling in display prefs tpl

---
 css/civicrm.css                               |  1 +
 .../CRM/Admin/Form/Preferences/Display.tpl    | 30 +++++++------------
 2 files changed, 12 insertions(+), 19 deletions(-)

diff --git a/css/civicrm.css b/css/civicrm.css
index fe2864a6eb..128a8812e1 100644
--- a/css/civicrm.css
+++ b/css/civicrm.css
@@ -3237,6 +3237,7 @@ span.crm-select-item-color {
   background-color: white;
   border: 1px solid #a5a5a5;
   width: 300px;
+  max-width: 100%;
   max-height: 300px;
   overflow-y: auto;
 }
diff --git a/templates/CRM/Admin/Form/Preferences/Display.tpl b/templates/CRM/Admin/Form/Preferences/Display.tpl
index 9a7cb227aa..0aa794a4a4 100644
--- a/templates/CRM/Admin/Form/Preferences/Display.tpl
+++ b/templates/CRM/Admin/Form/Preferences/Display.tpl
@@ -60,35 +60,30 @@
           <tr>
             <td style="width:30%">
               <span class="label"><strong>{ts}Individual Name Fields{/ts}</strong></span>
-              <ul id="contactEditNameFields">
+              <ul id="contactEditNameFields" class="crm-checkbox-list">
                 {foreach from=$nameFields item="title" key="opId"}
-                  <li id="preference-{$opId}-contactedit" class="ui-state-default ui-corner-all"
-                      style="padding-left:1px;">
-                    <span>{$form.contact_edit_options.$opId.html}</span>
+                  <li id="preference-{$opId}-contactedit">
+                    {$form.contact_edit_options.$opId.html}
                   </li>
                 {/foreach}
               </ul>
             </td>
             <td style="width:30%">
               <span class="label"><strong>{ts}Contact Details{/ts}</strong></span>
-              <ul id="contactEditBlocks">
+              <ul id="contactEditBlocks" class="crm-checkbox-list crm-sortable-list">
                 {foreach from=$contactBlocks item="title" key="opId"}
-                  <li id="preference-{$opId}-contactedit" class="ui-state-default ui-corner-all"
-                      style="padding-left:1px;">
-                    <i class='crm-i fa-arrows crm-grip' style="float:left;"></i>
-                    <span>{$form.contact_edit_options.$opId.html}</span>
+                  <li id="preference-{$opId}-contactedit">
+                    {$form.contact_edit_options.$opId.html}
                   </li>
                 {/foreach}
               </ul>
             </td>
-            <td>
+            <td style="width:30%">
               <span class="label"><strong>{ts}Other Panes{/ts}</strong></span>
-              <ul id="contactEditOptions">
+              <ul id="contactEditOptions"  class="crm-checkbox-list crm-sortable-list">
                 {foreach from=$editOptions item="title" key="opId"}
-                  <li id="preference-{$opId}-contactedit" class="ui-state-default ui-corner-all"
-                      style="padding-left:1px;">
-                    <i class='crm-i fa-arrows crm-grip' style="float:left;"></i>
-                    <span>{$form.contact_edit_options.$opId.html}</span>
+                  <li id="preference-{$opId}-contactedit">
+                    {$form.contact_edit_options.$opId.html}
                   </li>
                 {/foreach}
               </ul>
@@ -267,10 +262,7 @@
           $('#user_dashboard_options_' + invoicesKey).attr("disabled", true);
         }
 
-        $("#contactEditBlocks, #contactEditOptions").sortable({
-          placeholder: 'ui-state-highlight',
-          update: getSorting
-        });
+        $("#contactEditBlocks, #contactEditOptions").on('sortupdate', getSorting);
 
         function showCKEditorConfig() {
           $('.crm-preferences-display-form-block-editor_id .crm-button').toggle($(this).val() == 'CKEditor');
-- 
2.25.1