LukeParke/website
1
0
Fork 0
mirror of https://github.com/LukeHagar/website.git synced 2025-12-09 21:07:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Jesse Winton
2025-04-14 19:59:35 -04:00
parent cc109f6dbc
commit 30a483b004
2 changed files with 9 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/components/appwrite-network/map-nav.svelte
View File

@@ -36,7 +36,7 @@
class="flex flex-col items-center justify-center gap-12" class="flex flex-col items-center justify-center gap-12"
> >
<Tabs.List <Tabs.List
class="border-smooth animate-fade-in bg-card relative grid w-full max-w-xl grid-cols-1 place-content-center gap-3 p-1 px-8 drop-shadow-md md:grid-cols-3 md:rounded-full md:border md:px-0" class="border-smooth animate-fade-in bg-card relative grid w-full max-w-xl grid-cols-1 place-content-center gap-3 p-1 px-8 drop-shadow-md md:grid-cols-3 md:rounded-full md:border md:px-1"
> >
{#each navItems as { label, icon, value }, index} {#each navItems as { label, icon, value }, index}
<Tabs.Trigger <Tabs.Trigger

14
src/lib/components/appwrite-network/map.svelte
View File

@@ -1,7 +1,7 @@
<script lang="ts" module> <script lang="ts" module>
export const MAP_BOUNDS = $state({ export const MAP_BOUNDS = $state({
west: -132, west: -132,
east: 200, east: 185,
north: 65, north: 65,
south: -65 south: -65
}); });
@@ -18,8 +18,10 @@
import { pins, type PinSegment } from './data/pins'; import { pins, type PinSegment } from './data/pins';
import { latLongToSvgPosition } from './utils/projections'; import { latLongToSvgPosition } from './utils/projections';
let height: number = $state(0); let dimensions = $state({
let width: number = $state(0); width: 0,
height: 0
});
let activeRegion = $state<string | null>(null); let activeRegion = $state<string | null>(null);
let activeMarker: HTMLElement | null = null; let activeMarker: HTMLElement | null = null;
@@ -96,8 +98,8 @@
> >
<div <div
class="map relative w-full origin-bottom overflow-scroll transition-all [scrollbar-width:none]" class="map relative w-full origin-bottom overflow-scroll transition-all [scrollbar-width:none]"
bind:clientWidth={width} bind:clientWidth={dimensions.width}
bind:clientHeight={height} bind:clientHeight={dimensions.height}
> >
<div <div
class="absolute inset-0 mask-[image:url('/images/regions/map.svg')] mask-contain mask-no-repeat" class="absolute inset-0 mask-[image:url('/images/regions/map.svg')] mask-contain mask-no-repeat"
@@ -121,7 +123,7 @@
/> />
<Tooltip.Provider delayDuration={0} skipDelayDuration={500} disableCloseOnTriggerClick> <Tooltip.Provider delayDuration={0} skipDelayDuration={500} disableCloseOnTriggerClick>
{#each pins[activeSegment as PinSegment].map( (pin) => ({ ...pin, isOpen: activeRegion === slugify(pin.city), position: latLongToSvgPosition( { latitude: pin.lat, longitude: pin.lng, width, height } ) }) ) as pin, index} {#each pins[activeSegment as PinSegment].map( (pin) => ({ ...pin, isOpen: activeRegion === slugify(pin.city), position: latLongToSvgPosition( { latitude: pin.lat, longitude: pin.lng, ...dimensions } ) }) ) as pin, index}
<MapMarker <MapMarker
{...pin} {...pin}
position={pin.position} position={pin.position}