Collapse category headers on load for mobile only.

2 files changed, 20 insertions, 1 deletions

diff --git a/pydis_site/static/css/resources/resources.css b/pydis_site/static/css/resources/resources.css
index 59f8b78e..b24fcb5b 100644
--- a/pydis_site/static/css/resources/resources.css
+++ b/pydis_site/static/css/resources/resources.css
@@ -198,4 +198,12 @@ span.resource-tag.active.has-background-info-light {
         padding-top: 4px;
         padding-bottom: 4px;
     }
+}
+
+/* Disable transitions */
+.no-transition {
+  -webkit-transition: none !important;
+  -moz-transition: none !important;
+  -o-transition: none !important;
+  transition: none !important;
 }
\ No newline at end of file
diff --git a/pydis_site/static/js/resources/resources.js b/pydis_site/static/js/resources/resources.js
index 718e1e88..44d4db5c 100644
--- a/pydis_site/static/js/resources/resources.js
+++ b/pydis_site/static/js/resources/resources.js
@@ -178,7 +178,7 @@ document.addEventListener("DOMContentLoaded", function () {
     updateUI();
 
     // If you collapse or uncollapse a filter group, swap the icon.
-    $('button.collapsible').click(function() {
+    $('button.collapsible').on("click", function() {
         let icon = $(this).find(".card-header-icon i");
 
         if ($(icon).hasClass("fa-window-minimize")) {
@@ -190,6 +190,17 @@ document.addEventListener("DOMContentLoaded", function () {
         }
     });
 
+    // If this is a mobile device, collapse the categories to win back some screen real estate.
+    if (screen.width < 480) {
+        let categoryHeaders = $(".filter-category-header .collapsible-content");
+        let icons = $('.filter-category-header button .card-header-icon i');
+        categoryHeaders.addClass("no-transition");
+        categoryHeaders.css("max-height", 0);
+        icons.removeClass(["far", "fa-window-minimize"]);
+        icons.addClass(["fas", "fa-angle-down"]);
+        categoryHeaders.removeClass("no-transition");
+    }
+
     // If you click on the div surrounding the filter checkbox, it clicks the corresponding checkbox.
     $('.filter-panel').click(function() {
         let checkbox = $(this).find(".filter-checkbox");