Collapse category headers on load for mobile only.

3 files changed, 21 insertions, 2 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");
diff --git a/pydis_site/templates/resources/resources.html b/pydis_site/templates/resources/resources.html
index 80577c2b..a7b25f5c 100644
--- a/pydis_site/templates/resources/resources.html
+++ b/pydis_site/templates/resources/resources.html
@@ -104,7 +104,7 @@
                             {% if filter_data.hidden %}
                                 <div class="collapsible-content">
                             {% else %}
-                                <div class="collapsible-content" style="max-height: 480px;">
+                                <div class="collapsible-content" style="max-height: fit-content;">
                             {% endif %}
                         <div class="card-content">
                             {% for filter_item in filter_data.filters %}