diff --git a/public/css/index-tailwind-output.css b/public/css/index-tailwind-output.css index 790502ded..560839295 100644 --- a/public/css/index-tailwind-output.css +++ b/public/css/index-tailwind-output.css @@ -1462,10 +1462,6 @@ input[type="range"].range-lg::-moz-range-thumb { margin-right: 4rem; } -.mb-4 { - margin-bottom: 1rem; -} - .mt-4 { margin-top: 1rem; } @@ -1482,6 +1478,10 @@ input[type="range"].range-lg::-moz-range-thumb { margin-bottom: 4rem; } +.mb-4 { + margin-bottom: 1rem; +} + .ml-1 { margin-left: 0.25rem; } @@ -1698,14 +1698,14 @@ input[type="range"].range-lg::-moz-range-thumb { height: 6rem; } -.h-screen { - height: 100vh; -} - .h-full { height: 100%; } +.h-screen { + height: 100vh; +} + .h-fit { height: -webkit-fit-content; height: -moz-fit-content; @@ -2536,6 +2536,10 @@ input[type="range"].range-lg::-moz-range-thumb { row-gap: 2rem; } +.gap-x-8 { + column-gap: 2rem; +} + .space-y-4 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); diff --git a/src/UI/Image/NearbyImages.svelte b/src/UI/Image/NearbyImages.svelte index ca9f3ceb8..59e5a5041 100644 --- a/src/UI/Image/NearbyImages.svelte +++ b/src/UI/Image/NearbyImages.svelte @@ -23,6 +23,7 @@ import type { LayerConfigJson } from "../../Models/ThemeConfig/Json/LayerConfigJson" import { onDestroy } from "svelte" import { BBox } from "../../Logic/BBox" + import PanoramaxLink from "../BigComponents/PanoramaxLink.svelte" export let tags: UIEventSource @@ -37,7 +38,7 @@ let imagesProvider = state.nearbyImageSearcher let loadedImages = AllImageProviders.LoadImagesFor(tags).mapD( - (loaded) => new Set(loaded.map((img) => img.url)) + (loaded) => new Set(loaded.map((img) => img.url)), ) let imageState = imagesProvider.getImagesAround(lon, lat) let result: Store = imageState.images.mapD( @@ -46,22 +47,22 @@ .filter( (p: P4CPicture) => !loadedImages.data.has(p.pictureUrl) && // We don't show any image which is already linked - !p.details.isSpherical + !p.details.isSpherical, ) .slice(0, 25), - [loadedImages] + [loadedImages], ) let asFeatures = result.map(p4cs => p4cs.map(p4c => (>{ type: "Feature", geometry: { type: "Point", - coordinates: [p4c.coordinates.lng, p4c.coordinates.lat] + coordinates: [p4c.coordinates.lng, p4c.coordinates.lat], }, properties: { id: p4c.pictureUrl, - rotation: p4c.direction - } + rotation: p4c.direction, + }, }))) let selected = new UIEventSource(undefined) @@ -70,28 +71,28 @@ type: "Feature", geometry: { type: "Point", - coordinates: [s.coordinates.lng, s.coordinates.lat] + coordinates: [s.coordinates.lng, s.coordinates.lat], }, properties: { id: s.pictureUrl, selected: "yes", - rotation: s.direction - } + rotation: s.direction, + }, }] }) let someLoading = imageState.state.mapD((stateRecord) => - Object.values(stateRecord).some((v) => v === "loading") + Object.values(stateRecord).some((v) => v === "loading"), ) let errors = imageState.state.mapD((stateRecord) => - Object.keys(stateRecord).filter((k) => stateRecord[k] === "error") + Object.keys(stateRecord).filter((k) => stateRecord[k] === "error"), ) let highlighted = new UIEventSource(undefined) onDestroy(highlighted.addCallbackD(hl => { const p4c = result.data?.find(i => i.pictureUrl === hl) selected.set(p4c) - } + }, )) let map: UIEventSource = new UIEventSource(undefined) @@ -111,28 +112,27 @@ zoomToFeatures: true, onClick: (feature) => { highlighted.set(feature.properties.id) - } + }, }) ShowDataLayer.showMultipleLayers( map, new StaticFeatureSource([feature]), - state.layout.layers + state.layout.layers, ) onDestroy( - asFeatures.addCallbackAndRunD(features => { - if(features.length == 0){ - return - } - let bbox = BBox.get(features[0]) - for (const f of features) { - bbox = bbox.unionWith(BBox.get(f)) - } - mapProperties.maxbounds.set(bbox.pad(4)) - }) - + asFeatures.addCallbackAndRunD(features => { + if (features.length == 0) { + return + } + let bbox = BBox.get(features[0]) + for (const f of features) { + bbox = bbox.unionWith(BBox.get(f)) + } + mapProperties.maxbounds.set(bbox.pad(4)) + }), ) new ShowDataLayer(map, { @@ -140,12 +140,10 @@ layer: geocodedImageLayer, onClick: (feature) => { highlighted.set(feature.properties.id) - } + }, }) - -
@@ -169,13 +167,16 @@ {/each}
{/if} - - - - +
+ + +