Change arrow direction in Categories page.

cotes2020 · cotes2020 · commit 91caad977043 · 2019-11-23T00:51:55.000+08:00
diff --git 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;
-}
+}
+
+.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
@@ -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
@@ -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
diff --git 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>
 

Original file line number	Diff line number	Diff line change
`@@ -784,12 +784,6 @@ table tbody td {`
`784`	`784`	`top: -3rem !important; /* same as topbar height. */`
`785`	`785`	`}`
`786`	`786`
`787`		`-.flip {`
`788`		`- -ms-transform: rotate(180deg); /* IE 9 */`
`789`		`- -webkit-transform: rotate(180deg); /* Safari 3-8 */`
`790`		`- transform: rotate(180deg);`
`791`		`-}`
`792`		`-`
`793`	`787`	`.no-text-decoration {`
`794`	`788`	`text-decoration: none;`
`795`	`789`	`}`