-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: switched to infinite scrolling and game version filter
Co-authored-by: fero <hi@evan.graphics> Co-authored-by: ChecksumDev <me@checksum.space>
- Loading branch information
3 people
committed
Aug 18, 2023
1 parent
298baad
commit 4962b50
Showing
4 changed files
with
220 additions
and
275 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| <script lang='ts'> | ||
| import { onMount } from 'svelte'; | ||
| export let once = false; | ||
| export let top = 0; | ||
| export let bottom = 0; | ||
| export let left = 0; | ||
| export let right = 0; | ||
| let intersecting = false; | ||
| let container: any; | ||
| onMount(() => { | ||
| if (typeof IntersectionObserver !== 'undefined') { | ||
| const rootMargin = `${bottom}px ${left}px ${top}px ${right}px`; | ||
| const observer = new IntersectionObserver(entries => { | ||
| intersecting = entries[0].isIntersecting; | ||
| if (intersecting && once) { | ||
| observer.unobserve(container); | ||
| } | ||
| }, { | ||
| rootMargin | ||
| }); | ||
| observer.observe(container); | ||
| return () => observer.unobserve(container); | ||
| } | ||
| function handler() { | ||
| const bcr = container.getBoundingClientRect(); | ||
| intersecting = ( | ||
| (bcr.bottom + bottom) > 0 && | ||
| (bcr.right + right) > 0 && | ||
| (bcr.top - top) < window.innerHeight && | ||
| (bcr.left - left) < window.innerWidth | ||
| ); | ||
| if (intersecting && once) { | ||
| window.removeEventListener('scroll', handler); | ||
| } | ||
| } | ||
| window.addEventListener('scroll', handler); | ||
| return () => window.removeEventListener('scroll', handler); | ||
| }); | ||
| </script> | ||
|
|
||
| <div class={$$props.class} bind:this={container}> | ||
| <slot {intersecting}></slot> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,69 +1,57 @@ | ||
| <script lang="ts"> | ||
| import Sugar from 'sugar'; | ||
| import { CalendarIcon, DownloadIcon, LogoIcon, NotVerifiedIcon, VerifiedIcon, CogIcon, CubeIcon, ChevronDownIcon, CategoryIcon } from 'ui/icons'; | ||
| import { Button } from 'ui/button'; | ||
| import { Pill } from 'ui/pill'; | ||
| import { Link } from 'ui/link'; | ||
| import { slide, fly } from 'svelte/transition'; | ||
| import { quintOut } from 'svelte/easing'; | ||
| import { DownloadIcon } from 'ui/icons'; | ||
| export let name: string; | ||
| export let slug: string; | ||
| export let slug: string; | ||
| export let author: { | ||
| username: string; | ||
| }; | ||
| export let description: string; | ||
| export let category: string; | ||
| export let downloads: any; | ||
| export let updatedAt: number | ||
| export let icon: string; | ||
| let updatedAtProper: string; | ||
| try { | ||
| updatedAtProper = Sugar.Date.relative(new Date(updatedAt * 1000)) | ||
| } catch (e) { | ||
| // @ts-ignore | ||
| updatedAtProper = Sugar.Date.relative(new Date(Date.parse(updatedAt * 1000))) | ||
| } | ||
| </script> | ||
|
|
||
| <a href={`/mod/${slug}`}> | ||
| <div | ||
| class="beatforge-discover-list-item flex flex-row gap-2 md:gap-4 w-full bg-primary-800 hover:bg-primary-850 border-b-[1px] border-primary-850 items-center p-2 md:p-4 min-w-0 transition hover:duration-[0ms] duration-[120ms] my-2 md:my-0 rounded-lg md:rounded-none"> | ||
| <div | ||
| class="beatforge-discover-list-item-image h-12 w-12 md:h-16 md:w-16 bg-primary-600 flex flex-shrink-0 overflow-hidden rounded-md mr-2" | ||
| > | ||
| <img | ||
| alt={`Listing for mod ${name}, created by ${author}`} | ||
| src={icon ? icon : '/images/unknown.svg'} | ||
| class="w-full h-full object-fill" | ||
| /> | ||
| </div> | ||
| <div class="beatforge-discover-list-item-info w-full flex flex-col gap-1 md:gap-1 min-w-0 truncate"> | ||
| <div class="beatforge-discover-list-item-info-title flex items-center gap-2"> | ||
| <h2 class="font-black text-md md:text-xl">{name}</h2> | ||
| <p class="text-xs text-primary-200">by {author}</p> | ||
| </div> | ||
| <div class="beatforge-discover-list-item-description flex min-w-0"> | ||
| <p class="text-xs text-primary-200 truncate min-w-0 font-medium"> | ||
| {description} | ||
| </p> | ||
| </div> | ||
| </div> | ||
| <div class="beatforge-discover-list-item-pills flex flex-col gap-1 bg-primary-850 p-1 rounded-md overflow-x-auto min-w-[130px] whitespace-nowrap"> | ||
| <!-- <div class="flex flex-row gap-1 items-center text-xs text-primary-200"> | ||
| <div | ||
| class="beatforge-discover-list-item bg-primary-800 hover:bg-primary-850 border-primary-850 my-2 flex w-full min-w-0 flex-row items-center gap-2 rounded-lg border-b-[1px] p-2 transition duration-[120ms] hover:duration-[0ms] md:my-0 md:gap-4 md:rounded-none md:p-4" | ||
| > | ||
| <div | ||
| class="flex flex-shrink-0 w-12 h-12 mr-2 overflow-hidden rounded-md beatforge-discover-list-item-image bg-primary-600 md:h-16 md:w-16" | ||
| > | ||
| <img | ||
| alt={`Listing for mod ${name}, created by ${author}`} | ||
| src={icon ? icon : '/images/unknown.svg'} | ||
| class="object-cover w-full h-full" | ||
| /> | ||
| </div> | ||
| <div | ||
| class="flex flex-col w-full min-w-0 gap-1 truncate beatforge-discover-list-item-info md:gap-1" | ||
| > | ||
| <div class="flex items-center gap-2 beatforge-discover-list-item-info-title"> | ||
| <h2 class="font-black text-md md:text-xl">{name}</h2> | ||
| <p class="text-xs text-primary-200">by {author}</p> | ||
| </div> | ||
| <div class="flex min-w-0 beatforge-discover-list-item-description"> | ||
| <p class="min-w-0 text-xs font-medium truncate text-primary-200"> | ||
| {description} | ||
| </p> | ||
| </div> | ||
| </div> | ||
| <div | ||
| class="beatforge-discover-list-item-pills bg-primary-850 flex min-w-[130px] flex-col gap-1 overflow-x-auto whitespace-nowrap rounded-md p-1" | ||
| > | ||
| <!-- <div class="flex flex-row items-center gap-1 text-xs text-primary-200"> | ||
| <CategoryIcon customClasses="w-4 h-4" /> | ||
| {category} | ||
| </div> --> | ||
| <div class="flex flex-row gap-1 items-center text-xs text-primary-200"> | ||
| <DownloadIcon customClasses="flex-shrink-0 w-4 h-4" /> | ||
| {downloads} Downloads | ||
| </div> | ||
| <div class="flex flex-row gap-1 items-center text-xs text-primary-200"> | ||
| <CalendarIcon customClasses="flex-shrink-0 w-4 h-4" /> | ||
| {updatedAtProper} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="flex flex-row items-center gap-1 text-xs text-primary-200"> | ||
| <DownloadIcon customClasses="flex-shrink-0 w-4 h-4" /> | ||
| {downloads} Downloads | ||
| </div> | ||
| <div class="flex flex-row items-center gap-1 text-xs text-primary-200"> | ||
| {category} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </a> |
Oops, something went wrong.