Issue #2505 - Custom checkbox & flexbox order to move checked labels up

Author: Christian Stuff

webcompat/static/css/src/label-editor.css

@@ -33,6 +33,8 @@
 
 /* list category */
 .label-editor-list {
+  display: flex;
+  flex-direction: column;
   max-height: 18.75em;
   -webkit-overflow-scrolling: touch;
   overflow-x: hidden;
@@ -52,9 +54,22 @@
   cursor: pointer;
   display: block;
   margin: 0;
+  order: 2;
   padding: calc(var(--unit-space) * .75) calc(var(--unit-space) * .5);
 }
 
+.label-editor-list-item .small {
+  vertical-align: middle;
+}
+
+.label-editor-list-item::before {
+  content: "☐";
+  display: inline-block;
+  font-size: 1.5em;
+  margin-top: -4px;
+  vertical-align: middle;
+}
+
 .label-editor-list-item:last-child {
   border-bottom: 1px solid #ddd;
 }
@@ -70,8 +85,15 @@
 
 /* checkbox */
 .label-editor-list-item-checkbox {
-  margin: 0;
-  padding: 0;
+  display: none;
+}
+
+.label-editor-list-item-checkbox:checked + .label-editor-list-item::before {
+  content: "︎☑︎";
+}
+
+.label-editor-list-item-checkbox:checked + .label-editor-list-item {
+  order: 1;
 }
 
 /* Launch Category Editor */

webcompat/templates/web_modules/label-editor.jst

@@ -11,12 +11,13 @@
   </div>
   <div class="label-editor-list" tabindex="-1">
     <% _.each(labels, function(label) { %>
-      <label class="label-editor-list-item label-<%= label.remoteName %>" tabindex="0">
-        <input class="label-editor-list-item-checkbox"
-               type="checkbox" name="<%= label.name %>"
-               data-color="<%=label.color%>"
-               data-remotename="<%= label.remoteName %>"
-               tabindex="-1">
+      <input class="label-editor-list-item-checkbox"
+              type="checkbox" name="<%= label.name %>"
+              id="label-<%= label.remoteName %>"
+              data-color="<%=label.color%>"
+              data-remotename="<%= label.remoteName %>"
+              tabindex="-1">
+      <label class="label-editor-list-item label-<%= label.remoteName %>" for="label-<%= label.remoteName %>" tabindex="0">
         <span class="small"><%= label.name %></span>
       </label>
     <% }); %>