Merge pull request #16 from KristinaHranovska/favorites

Favorites
KristinaHranovska · Feb 14, 2024 · c030a5e · c030a5e
2 parents 7745e7a + 95a7ade
commit c030a5e
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 5 deletions.
diff --git 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
@@ -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));
 }