DGNum/Stirling-PDF
15
0
Fork 0
Code Issues 4 Pull requests 1 Projects Releases Packages 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; display: grid;
grid-template-columns: repeat(auto-fill, minmax(15rem, 3fr)); grid-template-columns: repeat(auto-fill, minmax(15rem, 3fr));
gap: 30px 30px; gap: 30px 30px;
transition: 0.5s all;
overflow: hidden; overflow: hidden;
margin: -20px; margin: -20px;
padding: 20px; padding: 20px;
} }
.feature-group-container.animated-group {
transition: 0.5s all;
}
.feature-group.collapsed>.feature-group-container { .feature-group.collapsed>.feature-group-container {
max-height: 0 !important; max-height: 0 !important;
margin: 0; margin: 0;

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

@ -24,6 +24,7 @@ function filterCards() {
function updateFavoritesSection() { function updateFavoritesSection() {
const favoritesContainer = document.getElementById("groupFavorites").querySelector(".feature-group-container"); const favoritesContainer = document.getElementById("groupFavorites").querySelector(".feature-group-container");
favoritesContainer.style.maxHeight = "none";
favoritesContainer.innerHTML = ""; favoritesContainer.innerHTML = "";
const cards = Array.from(document.querySelectorAll(".feature-card")); const cards = Array.from(document.querySelectorAll(".feature-card"));
let favoritesAmount = 0; let favoritesAmount = 0;
@ -40,6 +41,7 @@ function updateFavoritesSection() {
document.getElementById("groupFavorites").style.display = "flex"; document.getElementById("groupFavorites").style.display = "flex";
}; };
reorderCards(favoritesContainer); reorderCards(favoritesContainer);
favoritesContainer.style.maxHeight = favoritesContainer.scrollHeight + "px";
}; };
function toggleFavorite(element) { function toggleFavorite(element) {
@ -197,8 +199,6 @@ document.addEventListener("DOMContentLoaded", function () {
const container = header.parentNode.querySelector(".feature-group-container"); const container = header.parentNode.querySelector(".feature-group-container");
if (parent.id !== "groupFavorites") { if (parent.id !== "groupFavorites") {
container.style.maxHeight = container.clientHeight + "px"; container.style.maxHeight = container.clientHeight + "px";
} else {
container.style.maxHeight = "500px";
} }
header.onclick = () => { header.onclick = () => {
expandCollapseToggle(parent); expandCollapseToggle(parent);
@ -206,12 +206,24 @@ document.addEventListener("DOMContentLoaded", function () {
}) })
const collapsed = localStorage.getItem("collapsedGroups") ? JSON.parse(localStorage.getItem("collapsedGroups")) : []; 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) { if (collapsed.indexOf(group.id) !== -1) {
expandCollapseToggle(group, false); 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(); showFavoritesOnly();
}); });