diff --git a/webcompat/static/css/src/label-editor.css b/webcompat/static/css/src/label-editor.css index 419a89ebf..9e5fbecda 100644 --- a/webcompat/static/css/src/label-editor.css +++ b/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; } @@ -64,14 +79,27 @@ .label-editor-list-item.focused { border-color: Highlight; border-style: solid; - border-width: 2px; + border-width: 2px 2px 2px 4px; outline: none; } /* checkbox */ .label-editor-list-item-checkbox { + clip: rect(0 0 0 0); + height: 0; margin: 0; padding: 0; + position: absolute; + visibility: hidden; + width: 0; +} + +.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 */ diff --git a/webcompat/static/js/lib/editor.js b/webcompat/static/js/lib/editor.js index 58b49803e..5996ee58c 100644 --- a/webcompat/static/js/lib/editor.js +++ b/webcompat/static/js/lib/editor.js @@ -118,7 +118,7 @@ issues.CategoryEditorView = Backbone.View.extend({ // hide the non-filter matches _.each(toHide, function(name) { $("input[name=" + escape(name) + "]") - .closest(".label-editor-list-item") + .next(".label-editor-list-item") .hide(); }); }, 100), diff --git a/webcompat/templates/web_modules/label-editor.jst b/webcompat/templates/web_modules/label-editor.jst index 70d87f6f5..6eba1a1c5 100644 --- a/webcompat/templates/web_modules/label-editor.jst +++ b/webcompat/templates/web_modules/label-editor.jst @@ -11,12 +11,13 @@