Visual enhancement for custom JS tree widget

* adds proper css behaviour for collapsed icon
* adds minor js comments

konova/static/css/konova.css

@@ -263,3 +263,12 @@ Similar to bootstraps 'shadow-lg'
 }
 
  */
+.collapse-icn > i{
+    transition: all 0.3s ease;
+}
+.collapsed .collapse-icn > i{
+    transform: rotate(-90deg);
+}
+.tree-label.badge{
+    font-size: 90%;
+}

konova/templates/konova/widgets/checkbox-tree-select-content.html

@@ -2,11 +2,13 @@
 
 {% for code in codes %}
 <div class="ml-4 tree-element">
-    <label class="tree-label" role="{% if not code.is_leaf%}button{% endif %}" for="input_{{code.pk|unlocalize}}" id="{{code.pk|unlocalize}}" data-toggle="collapse" data-target="#children_{{code.pk|unlocalize}}" aria-expanded="true" aria-controls="children_{{code.pk|unlocalize}}">
+    <label class="tree-label collapsed" role="{% if not code.is_leaf%}button{% endif %}" for="input_{{code.pk|unlocalize}}" id="{{code.pk|unlocalize}}" data-toggle="collapse" data-target="#children_{{code.pk|unlocalize}}" aria-expanded="true" aria-controls="children_{{code.pk|unlocalize}}">
         {% if code.is_leaf%}
         <input class="tree-input" id="input_{{code.pk|unlocalize}}" name="{{ widget.name }}" type="checkbox" value="{{code.pk|unlocalize}}" {% if code.pk|unlocalize in widget.value %}checked{% endif %}/>
         {% else %}
-        {% fa5_icon 'angle-right' %}
+        <span class="collapse-icn">
+            {% fa5_icon 'angle-down' %}
+        </span>
         {% endif %}
         {{code.long_name}}
     </label>

konova/templates/konova/widgets/checkbox-tree-select.html

@@ -47,9 +47,12 @@
             }
         );
         if(val.length > 0){
+            // Hide everything
             allTreeElements.hide()
+            // Now show again everything matching the query
             allTreeElementsContain.show()
         }else{
+            // Show everything if no query exists
             allTreeElements.show()
         }
     }