From 2ecb95bb94e45cb9c9af76dd41280500d23ecedc Mon Sep 17 00:00:00 2001
From: Sangelo <contact@sangelo.space>
Date: Wed, 12 Jun 2024 10:12:23 +0200
Subject: [PATCH] [c] finish initial modcards

---
 src/app.scss                    |  8 +++++
 src/lib/modules/ModCards.svelte | 57 +++++++++++++++++++++++++--------
 svelte.config.js                |  5 ++-
 3 files changed, 56 insertions(+), 14 deletions(-)

diff --git a/src/app.scss b/src/app.scss
index ea53e23..60fd4e6 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -60,3 +60,11 @@ button.transparent,
     color: white;
   }
 }
+
+.overflowing::after {
+  background: linear-gradient(to top, $zinc-100, #00000000);
+}
+
+[data-theme="dark"] .overflowing::after {
+  background: linear-gradient(to top, $slate-800, #00000000);
+}
diff --git a/src/lib/modules/ModCards.svelte b/src/lib/modules/ModCards.svelte
index b75c7c9..0cb8f0c 100644
--- a/src/lib/modules/ModCards.svelte
+++ b/src/lib/modules/ModCards.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { onMount } from "svelte";
+  import { afterUpdate, onMount } from "svelte";
   import IconChevronDown from 'svelte-material-icons/ChevronDown.svelte';
   import IconClose from 'svelte-material-icons/Close.svelte';
 
@@ -17,18 +17,19 @@
   function checkOverflow() {
     const modCards = document.querySelectorAll('.mod-card');
     modCards.forEach((modCard) => {
-      modCard.addEventListener('mouseover', () => {
-        if (modCard.scrollHeight > modCard.offsetHeight) {
-          modCard.style.backgroundColor = 'red';
-        }
-      });
-
-      modCard.addEventListener('mouseout', () => {
-        modCard.style.backgroundColor = '';
-      });
+      if (modCard.scrollHeight > modCard.offsetHeight) {
+        modCard.classList.add('overflowing');
+      }
     });
   }
 
+  function removeOverflow() {
+    const modCards = document.querySelectorAll('.mod-card');
+    modCards.forEach(
+      (modCard) => modCard.classList.remove('overflowing')
+    );
+  }
+
   async function fetchData(file) {
     const response = await fetch(`/assets/json/${file}`);
     const data = await response.json();
@@ -40,7 +41,7 @@
     const data = await response.json();
     fileList = data;
     await fetchData(selectedFile);
-    checkOverflow(); // Run checkOverflow once the component has mounted
+    checkOverflow();
   });
 
   function fuzzySearch(query, mods) {
@@ -60,6 +61,11 @@
     selectedFile = event.target.value;
     fetchData(selectedFile);
   }
+
+  afterUpdate(() => {
+    removeOverflow();
+    checkOverflow();
+  })
 </script>
 
 <div class="search-container" role="group">
@@ -162,7 +168,7 @@
     justify-content: center;
     // align-items: center;
     padding: 0.5em 1em 0.5em 1em;
-    height: 6em;
+    max-height: 6em;
     overflow: hidden;
 
     img.mod-card-logo {
@@ -172,6 +178,7 @@
       border-radius: 8px;
       cursor: pointer;
       align-self: center;
+      z-index: 2;
     }
 
     .mod-card-text-ct {
@@ -188,5 +195,29 @@
       }
     }
   }
-</style>
 
+  :global(.overflowing) {
+    transition: max-height 0.5s ease-in-out;
+    max-height: 6em;
+    position: relative;
+    
+    &::after {
+      content: '';
+      opacity: 1;
+      position: absolute;
+      width: 100%;
+      height: 3em;
+      bottom: 0em;
+      right: 0em;
+      z-index: 1;
+      transition: opacity 0.25s ease-in-out;
+    }
+
+    &:hover {
+      max-height: 100em !important;
+      &::after {
+        opacity: 0;
+      }
+    }
+  }
+</style>
diff --git a/svelte.config.js b/svelte.config.js
index c03819a..f703517 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -12,7 +12,10 @@ const config = {
 			fallback: undefined,
 			precompress: false,
 			strict: true
-		})
+		}),
+    prerender: {
+      handleMissingId: 'warn'
+    },
   },
 
   preprocess: [