Improve layout and UI/UX for categories overlay in entry editor.

References #222

templates/2k11/admin/entries.tpl

@@ -129,7 +129,7 @@
                 {foreach from=$entry_vars.category_options item="entry_cat"}
                     <div class="form_check">
                         <input type="hidden" name="serendipity[had_categories]" value="1">
-                        {$entry_cat.depth_pad}
+                        {* {$entry_cat.depth_pad} *}
                         <input id="serendipity_category_{$entry_cat.categoryid}" name="serendipity[categories][]" type="checkbox" value="{$entry_cat.categoryid}"{if $entry_cat.is_selected} checked="checked"{/if}>
 
                         <label for="serendipity_category_{$entry_cat.categoryid}">{$entry_cat.category_name}</label>

templates/2k11/admin/serendipity_editor.js.tpl

@@ -963,7 +963,13 @@ $(function() {
                 type: "inline",
                 closeMarkup: '<button title="%title%" class="mfp-close" type="button">'+ btnText +'</button>',
                 callbacks: {
+                    open: function() {
+                        // Accessibility helper
+                        $('#edit_entry_category .form_check input[type="checkbox"]').attr('aria-hidden', 'true');
+                    },
                     afterClose: function() {
+                        // Accessibility helper
+                        $('#edit_entry_category .form_check input[type="checkbox"]').attr('aria-hidden', 'false');
                         serendipity.categoryList();
                     }
                 }
@@ -1011,6 +1017,17 @@ $(function() {
         serendipity.liveFilters($(this), '#edit_entry_category .form_check', 'label');
     });
 
+    // Oldie helper for selecting categories
+    $('#edit_entry_category .form_check input').change(function(e) {
+        var $el = $(this);
+
+        if($el.is(":checked")) {
+            $el.siblings('label').addClass('selected');
+        } else {
+            $el.siblings('label').removeClass('selected');
+        }
+    });
+
     // Plugins live filter
     $('#pluginfilter').keyup(function() {
         serendipity.liveFilters($(this), '.plugins_installable > li', '.plugin_features');

templates/2k11/admin/style.css

@@ -1652,21 +1652,61 @@ form > .button_link:first-of-type,
     border: 1px solid #aaa;
 }
 
-.mfp-content #s9y_links,
 .mfp-content #edit_entry_category,
 .mfp-content #edit_entry_freetags {
     background: #fcfcfc;
     margin: 0 auto;
-    max-width: 600px;
     padding: 0 2em;
     position: relative;
     width: auto;
 }
 
+.mfp-content #s9y_links {
+    max-width: 34em;
+}
+
+.mfp-content #edit_entry_category,
+.mfp-content #edit_entry_freetags {
+    max-width: 60em;
+}
+
 .mfp-content #edit_entry_category {
     padding-bottom: 2em;
 }
 
+.mfp-content #edit_entry_category .form_check {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    float: left;
+    margin: 0 0 .5em;
+    width: 50%;
+}
+
+.mfp-content #edit_entry_category .form_check label {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    border: 1px solid #fcfcfc;
+    border-radius: 2px;
+    cursor: pointer;
+    display: block !important;
+    overflow: hidden;
+    padding: .25em;
+    width: 95%;
+}
+
+.mfp-content #edit_entry_category .form_check input[type="checkbox"] {
+    display: none !important;
+    visibility: hidden;
+}
+
+.mfp-content #edit_entry_category .form_check input[type="checkbox"]:checked + label,
+.lt-ie9 .mfp-content #edit_entry_category .form_check .selected {
+    background-color: #eee;
+    border-color: #aaa;
+}
+
 .mfp-content #edit_entry_freetags {
     padding: 2em 2em 3em;
 }
@@ -2861,6 +2901,10 @@ img.mfp-img {
         margin: 0 0 0 .4em;
     }
 
+    .mfp-content #edit_entry_category .form_check {
+        width: 25%;
+    }
+
     #meta_data > div,
     #template_options fieldset legend,
     #template_options fieldset > .grouped,
@@ -3207,6 +3251,10 @@ img.mfp-img {
         width: 73%;
     }
 
+    .mfp-content #edit_entry_category .form_check {
+        width: 20%;
+    }
+
     .installer #content {
         float: none;
         margin: 0 auto 2em;