From 81721ef295ab8ca09aaa40ac3e815dfd81aa8d43 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Sat, 23 Nov 2019 00:42:14 +0800
Subject: [PATCH] Change arrow direction in Categories page.

---
 assets/css/categories.scss              | 13 ++++++++++---
 assets/css/main.scss                    |  6 ------
 assets/js/_src/category-collapse.js     |  8 ++++----
 assets/js/dist/category-collapse.min.js |  2 +-
 tabs/categories.md                      |  4 ++--
 5 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/assets/css/categories.scss b/assets/css/categories.scss
index 5b02295..41d0aea 100644
--- a/assets/css/categories.scss
+++ b/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;
-}
\ No newline at end of file
+}
+
+.rotate {
+  -ms-transform: rotate(-90deg); /* IE 9 */
+  -webkit-transform: rotate(-90deg); /* Safari 3-8 */
+  transform: rotate(-90deg);
+}
diff --git a/assets/css/main.scss b/assets/css/main.scss
index 875a579..2a3dfa9 100644
--- a/assets/css/main.scss
+++ b/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;
 }
diff --git a/assets/js/_src/category-collapse.js b/assets/js/_src/category-collapse.js
index 14349fa..b11d689 100644
--- a/assets/js/_src/category-collapse.js
+++ b/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");
     }
   });
diff --git a/assets/js/dist/category-collapse.min.js b/assets/js/dist/category-collapse.min.js
index a7e9df9..228e052 100644
--- a/assets/js/dist/category-collapse.min.js
+++ b/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")}})});
\ No newline at end of file
+$(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")}})});
\ No newline at end of file
diff --git a/tabs/categories.md b/tabs/categories.md
index 1132acc..e76b9ca 100644
--- a/tabs/categories.md
+++ b/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>