Change arrow direction in Categories page.

assets/css/categories.scss

@@ -50,8 +50,15 @@
   }
 }
 
-.category-trigger>i.fas.fa-angle-up {
+.category-trigger>i.fas {
   position: relative;
-  bottom: 8%;
+  height: .7rem;
+  width: 1rem;
   transition: 300ms ease all;
-}
+}
+
+.rotate {
+  -ms-transform: rotate(-90deg); /* IE 9 */
+  -webkit-transform: rotate(-90deg); /* Safari 3-8 */
+  transform: rotate(-90deg);
+}

assets/css/main.scss

@@ -784,12 +784,6 @@ table tbody td {
   top: -3rem !important; /* same as topbar height. */
 }
 
-.flip {
-  -ms-transform: rotate(180deg); /* IE 9 */
-  -webkit-transform: rotate(180deg); /* Safari 3-8 */
-  transform: rotate(180deg);
-}
-
 .no-text-decoration {
   text-decoration: none;
 }

assets/js/_src/category-collapse.js

@@ -8,22 +8,22 @@ $(function() {
   var child_prefix = "l_";
   var parent_prefix = "h_";
 
-  // close up Top
+  // close up top-category
   $(".collapse").on("hide.bs.collapse", function() { // Bootstrap collapse events.
     var parent_id = parent_prefix + $(this).attr('id').substring(child_prefix.length);
     if (parent_id) {
       $("#" + parent_id + " .far.fa-folder-open").attr("class", "far fa-folder fa-fw");
-      $("#" + parent_id + " i.fas.fa-angle-up").addClass("flip");
+      $("#" + parent_id + " i.fas").addClass("rotate");
       $("#" + parent_id).removeClass("hide-border-bottom");
     }
   });
 
-  // expand Top Category
+  // expand the top category
   $(".collapse").on("show.bs.collapse", function() {
     var parent_id = parent_prefix + $(this).attr('id').substring(child_prefix.length);
     if (parent_id) {
       $("#" + parent_id + " .far.fa-folder").attr("class", "far fa-folder-open fa-fw");
-      $("#" + parent_id + " i.fas.fa-angle-up").removeClass("flip");
+      $("#" + parent_id + " i.fas").removeClass("rotate");
       $("#" + parent_id).addClass("hide-border-bottom");
     }
   });

assets/js/dist/category-collapse.min.js

@@ -1 +1 @@
-$(function(){var b="l_";var a="h_";$(".collapse").on("hide.bs.collapse",function(){var c=a+$(this).attr("id").substring(b.length);if(c){$("#"+c+" .far.fa-folder-open").attr("class","far fa-folder fa-fw");$("#"+c+" i.fas.fa-angle-up").addClass("flip");$("#"+c).removeClass("hide-border-bottom")}});$(".collapse").on("show.bs.collapse",function(){var c=a+$(this).attr("id").substring(b.length);if(c){$("#"+c+" .far.fa-folder").attr("class","far fa-folder-open fa-fw");$("#"+c+" i.fas.fa-angle-up").removeClass("flip");$("#"+c).addClass("hide-border-bottom")}})});
+$(function(){var b="l_";var a="h_";$(".collapse").on("hide.bs.collapse",function(){var c=a+$(this).attr("id").substring(b.length);if(c){$("#"+c+" .far.fa-folder-open").attr("class","far fa-folder fa-fw");$("#"+c+" i.fas").addClass("rotate");$("#"+c).removeClass("hide-border-bottom")}});$(".collapse").on("show.bs.collapse",function(){var c=a+$(this).attr("id").substring(b.length);if(c){$("#"+c+" .far.fa-folder").attr("class","far fa-folder-open fa-fw");$("#"+c+" i.fas").removeClass("rotate");$("#"+c).addClass("hide-border-bottom")}})});

tabs/categories.md

@@ -49,9 +49,9 @@ title: Categories
       <!-- arrow -->
       <a href="#l_{{ category_name }}" data-toggle="collapse" aria-expanded="true" class="category-trigger hide-border-bottom">
         {% if sub_categories_size > 0%}
-        <i class="fas fa-angle-up"></i>
+        <i class="fas fa-fw fa-angle-down"></i>
         {% else %}
-        <i class="fas fa-angle-down disabled"></i>
+        <i class="fas fa-fw fa-angle-right disabled"></i>
         {% endif %}
       </a>