From 092b4cc5cbae153fbf21fa7160a76bb284c17327 Mon Sep 17 00:00:00 2001
From: FiratUsta <67150276+FiratUsta@users.noreply.github.com>
Date: Mon, 30 Sep 2024 14:00:30 +0300
Subject: [PATCH] [Bug Fix] New Home Page Bug Fixes (#1973)

* Fix favorites section being cut off if it has too many items.

* Fix the group collapse transition animation playing on page load.
---
 src/main/resources/static/css/home.css   |  5 ++++-
 src/main/resources/static/js/homecard.js | 18 +++++++++++++++---
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/main/resources/static/css/home.css b/src/main/resources/static/css/home.css
index 12b69d94..8faa9163 100644
--- a/src/main/resources/static/css/home.css
+++ b/src/main/resources/static/css/home.css
@@ -62,12 +62,15 @@
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(15rem, 3fr));
   gap: 30px 30px;
-  transition: 0.5s all;
   overflow: hidden;
   margin: -20px;
   padding: 20px;
 }
 
+.feature-group-container.animated-group {
+  transition: 0.5s all;
+}
+
 .feature-group.collapsed>.feature-group-container {
   max-height: 0 !important;
   margin: 0;
diff --git a/src/main/resources/static/js/homecard.js b/src/main/resources/static/js/homecard.js
index 4cdecdb7..d4dfd7ea 100644
--- a/src/main/resources/static/js/homecard.js
+++ b/src/main/resources/static/js/homecard.js
@@ -24,6 +24,7 @@ function filterCards() {
 
 function updateFavoritesSection() {
   const favoritesContainer = document.getElementById("groupFavorites").querySelector(".feature-group-container");
+  favoritesContainer.style.maxHeight = "none";
   favoritesContainer.innerHTML = "";
   const cards = Array.from(document.querySelectorAll(".feature-card"));
   let favoritesAmount = 0;
@@ -40,6 +41,7 @@ function updateFavoritesSection() {
     document.getElementById("groupFavorites").style.display = "flex";
   };
   reorderCards(favoritesContainer);
+  favoritesContainer.style.maxHeight = favoritesContainer.scrollHeight + "px";
 };
 
 function toggleFavorite(element) {
@@ -197,8 +199,6 @@ document.addEventListener("DOMContentLoaded", function () {
     const container = header.parentNode.querySelector(".feature-group-container");
     if (parent.id !== "groupFavorites") {
       container.style.maxHeight = container.clientHeight + "px";
-    } else {
-      container.style.maxHeight = "500px";
     }
     header.onclick = () => {
       expandCollapseToggle(parent);
@@ -206,12 +206,24 @@ document.addEventListener("DOMContentLoaded", function () {
   })
 
   const collapsed = localStorage.getItem("collapsedGroups") ? JSON.parse(localStorage.getItem("collapsedGroups")) : [];
+  const groupsArray = Array.from(document.querySelectorAll(".feature-group"));
 
-  Array.from(document.querySelectorAll(".feature-group")).forEach(group => {
+  groupsArray.forEach(group => {
     if (collapsed.indexOf(group.id) !== -1) {
       expandCollapseToggle(group, false);
     }
   })
 
+  // Necessary in order to not fire the transition animation on page load, which looks wrong.
+  // The timeout isn't doing anything visible to the user, so it's not making the page load look slower.
+  setTimeout(() => {
+    groupsArray.forEach(group => {
+      const container = group.querySelector(".feature-group-container");
+      container.classList.add("animated-group");
+    })
+  }, 500);
+
+
+
   showFavoritesOnly();
 });