Use cross-browser masonry layout solution

Fixes issue with existing fallback in browsers other than Firefox.

Author: stormwarning

pnpm-lock.yaml

@@ -14,6 +14,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@egjs/svelte-grid": "1.16.0",
     "@floating-ui/dom": "1.5.3",
     "@sanity/client": "6.10.0",
     "@sanity/image-url": "1.0.2",

www/package.json

@@ -1,13 +1,16 @@
 <script>
+import { MasonryGrid } from '@egjs/svelte-grid'
+
 import GalleryCarousel from '$lib/components/gallery-carousel.svelte'
 import GalleryThumbnail from '$lib/components/gallery-thumbnail.svelte'
 import FadeUp from '$lib/components/helpers/fade-up.svelte'
-import MasonryGrid from '$lib/components/masonry-grid.svelte'
 import PageIntro from '$lib/components/page-intro.svelte'
 import PageSection from '$lib/components/page-section.svelte'
 import PortableText from '$lib/components/portable-text.svelte'
 import TextLede from '$lib/components/text-lede.svelte'
 
+import { media } from '../../stores/media-queries.js'
+
 /** @type {'screen-shots' | undefined} */
 export let collection = undefined
 
@@ -47,6 +50,14 @@ function handleCloseCarousel() {
 	isCarouselOpen = false
 	initialIndex = 0
 }
+
+let gridGap = 16
+
+$: if ($media.xl) {
+	gridGap = 64
+} else if ($media.md) {
+	gridGap = 32
+}
 </script>
 
 <svelte:head>
@@ -111,7 +122,7 @@ function handleCloseCarousel() {
 	</PageIntro>
 	<PageSection>
 		<div class="grid gap-[9vh] md:gap-[11vh]">
-			<MasonryGrid items={images} gapClass="gap-4 md:gap-8 xl:gap-16">
+			<MasonryGrid align="stretch" column={2} gap={gridGap}>
 				{#each images as image, index}
 					<GalleryThumbnail
 						{image}

www/src/routes/photos/item.svelte

@@ -0,0 +1,50 @@
+import { writable } from 'svelte/store'
+
+/**
+ * @param {Record<string, MediaQueryList>} mqls
+ */
+function calculateMedia(mqls) {
+	let media = { classNames: '' }
+	let mediaClasses = []
+
+	for (let name of Object.keys(mqls)) {
+		media[name] = mqls[name].matches
+		if (media[name]) {
+			mediaClasses.push(`media-${name}`)
+		}
+	}
+
+	media.classNames = mediaClasses.join(' ')
+
+	return media
+}
+
+function watchMedia(mediaqueries) {
+	return writable({ classNames: '' }, (set) => {
+		if (typeof window === 'undefined') return
+
+		let mqls = {}
+		let updateMedia = () => set(calculateMedia(mqls))
+
+		for (let key of Object.keys(mediaqueries)) {
+			let foo = window.matchMedia(mediaqueries[key])
+			mqls[key] = foo
+			mqls[key].addListener(updateMedia)
+		}
+
+		updateMedia()
+
+		return () => {
+			for (let key of Object.keys(mqls)) {
+				mqls[key].removeListener(updateMedia)
+			}
+		}
+	})
+}
+
+export const media = watchMedia({
+	sm: '(max-width: 767px)',
+	md: '(min-width: 768px)',
+	lg: '(min-width: 1024px)',
+	xl: '(min-width: 1280px)',
+})