Mirrors/Stirling-PDF
Mirrors/Stirling-PDF
1
0
Fork 0
mirror of https://github.com/Frooodle/Stirling-PDF.git synced 2025-11-01 01:21:18 +01:00
Code Issues Packages Projects Releases Wiki Activity

[Bug Fix] New Home Page Bug Fixes (#1973)

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

* Fix the group collapse transition animation playing on page load.
This commit is contained in:
FiratUsta 2024-09-30 14:00:30 +03:00 committed by GitHub
parent 86bb37aa7a
commit 092b4cc5cb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 19 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/main/resources/static/css/home.css
View File

@ -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;

18
src/main/resources/static/js/homecard.js
View File

@ -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();
});