diff --git a/src/css/favorities-exercise.css b/src/css/favorities-exercise.css index 70869a6..c98f739 100644 --- a/src/css/favorities-exercise.css +++ b/src/css/favorities-exercise.css @@ -88,6 +88,8 @@ } } +/* -------------- Section favorites --------------- */ + .container-section-favorites { position: relative; border-radius: 30px; @@ -97,6 +99,7 @@ width: 100%; height: 100%; background-color: var(--light-gray-background); + overflow: hidden; } /* Card */ @@ -120,10 +123,9 @@ } .scroll { - overflow-y: scroll; + /* overflow-y: hidden; */ overflow-x: hidden; height: 490px; - padding: 5px 0; } @@ -223,7 +225,6 @@ font-weight: 400; font-size: 20px; line-height: 1; - white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -257,7 +258,6 @@ display: none; } - .container-remove-favorites { width: 247px; position: absolute; diff --git a/src/js/favorities.js b/src/js/favorities.js index 8b2f578..957adda 100644 --- a/src/js/favorities.js +++ b/src/js/favorities.js @@ -28,6 +28,9 @@ function displayFavoriteCards(savedCards) { hideRemoveCards(); smoothScrollToNextGroup(); } + // + checkContainerHeight(); + } refs.galleryWindow.addEventListener('click', deleteFavorites); @@ -43,6 +46,9 @@ function deleteFavorites(e) { showRemoveCards(); } } + // // + checkContainerHeight(); + } function removeFavoriteCard(id) { @@ -65,12 +71,32 @@ function smoothScrollToNextGroup() { if (favoritesItem) { const galleryItemHeight = favoritesItem.getBoundingClientRect().height; window.scrollBy({ - top: galleryItemHeight * 1, + // top: galleryItemHeight * 1, + top: 0, behavior: "smooth", }); } } +function checkContainerHeight() { + const container = refs.favoritesCard; + const extraSpace = 200; // Додатковий простір + const content = container.querySelector(".list-favorites"); + const cardHeight = 165; // Висота однієї картки + const rowsToShow = 4; // Кількість рядків, після яких з'явиться скролбар + + if (content) { + const rowsCount = Math.ceil(content.children.length / 3); // Кількість рядків + + // Перевірка, чи кількість рядків перевищує задану кількість + if (rowsCount > rowsToShow) { + container.style.overflowY = "scroll"; + } else { + container.style.overflowY = "hidden"; + } + } +} + savedCardsStorage(); function createCardFavorites(arr) { @@ -81,6 +107,9 @@ function createCardFavorites(arr) { const dataList = results.map(result => result.data); refs.favoritesCard.insertAdjacentHTML("beforeend", createMarkup(dataList)); + // + checkContainerHeight(); + }) .catch(err => console.error(err)); }