[c] finish initial modcards

This commit is contained in:
Sangelo 2024-06-12 10:12:23 +02:00
parent 77d866f3c9
commit 2ecb95bb94
3 changed files with 56 additions and 14 deletions

View file

@ -60,3 +60,11 @@ button.transparent,
color: white; 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);
}

View file

@ -1,5 +1,5 @@
<script> <script>
import { onMount } from "svelte"; import { afterUpdate, onMount } from "svelte";
import IconChevronDown from 'svelte-material-icons/ChevronDown.svelte'; import IconChevronDown from 'svelte-material-icons/ChevronDown.svelte';
import IconClose from 'svelte-material-icons/Close.svelte'; import IconClose from 'svelte-material-icons/Close.svelte';
@ -17,16 +17,17 @@
function checkOverflow() { function checkOverflow() {
const modCards = document.querySelectorAll('.mod-card'); const modCards = document.querySelectorAll('.mod-card');
modCards.forEach((modCard) => { modCards.forEach((modCard) => {
modCard.addEventListener('mouseover', () => {
if (modCard.scrollHeight > modCard.offsetHeight) { if (modCard.scrollHeight > modCard.offsetHeight) {
modCard.style.backgroundColor = 'red'; modCard.classList.add('overflowing');
} }
}); });
}
modCard.addEventListener('mouseout', () => { function removeOverflow() {
modCard.style.backgroundColor = ''; const modCards = document.querySelectorAll('.mod-card');
}); modCards.forEach(
}); (modCard) => modCard.classList.remove('overflowing')
);
} }
async function fetchData(file) { async function fetchData(file) {
@ -40,7 +41,7 @@
const data = await response.json(); const data = await response.json();
fileList = data; fileList = data;
await fetchData(selectedFile); await fetchData(selectedFile);
checkOverflow(); // Run checkOverflow once the component has mounted checkOverflow();
}); });
function fuzzySearch(query, mods) { function fuzzySearch(query, mods) {
@ -60,6 +61,11 @@
selectedFile = event.target.value; selectedFile = event.target.value;
fetchData(selectedFile); fetchData(selectedFile);
} }
afterUpdate(() => {
removeOverflow();
checkOverflow();
})
</script> </script>
<div class="search-container" role="group"> <div class="search-container" role="group">
@ -162,7 +168,7 @@
justify-content: center; justify-content: center;
// align-items: center; // align-items: center;
padding: 0.5em 1em 0.5em 1em; padding: 0.5em 1em 0.5em 1em;
height: 6em; max-height: 6em;
overflow: hidden; overflow: hidden;
img.mod-card-logo { img.mod-card-logo {
@ -172,6 +178,7 @@
border-radius: 8px; border-radius: 8px;
cursor: pointer; cursor: pointer;
align-self: center; align-self: center;
z-index: 2;
} }
.mod-card-text-ct { .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>

View file

@ -12,7 +12,10 @@ const config = {
fallback: undefined, fallback: undefined,
precompress: false, precompress: false,
strict: true strict: true
}) }),
prerender: {
handleMissingId: 'warn'
},
}, },
preprocess: [ preprocess: [