a/immich
1
0
Fork 0
mirror of https://github.com/Art051/immich.git synced 2025-08-11 19:29:00 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(web+server): map improvements (#2498)

Browse Source 
* feat(web+server): map improvements

* add number format double to fix mobile
This commit is contained in:
Michel Heusschen
2023-05-21 08:26:06 +02:00
committed by GitHub
parent e028cf9002
commit a7b9adc692
34 changed files with 501 additions and 364 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
web/src/lib/components/shared-components/leaflet/asset-marker-cluster.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts" context="module">
import { createContext } from '$lib/utils/context';
import { MarkerClusterGroup, Marker, Icon, LeafletEvent } from 'leaflet';
import { Icon, LeafletEvent, Marker, MarkerClusterGroup } from 'leaflet';
const { get: getContext, set: setClusterContext } = createContext<() => MarkerClusterGroup>();
@@ -10,11 +10,11 @@
</script>
<script lang="ts">
import 'leaflet.markercluster';
import { onDestroy, onMount } from 'svelte';
import { getMapContext } from './map.svelte';
import { MapMarkerResponseDto, api } from '@api';
import { createEventDispatcher } from 'svelte';
import 'leaflet.markercluster';
import { createEventDispatcher, onDestroy, onMount } from 'svelte';
import './asset-marker-cluster.css';
import { getMapContext } from './map.svelte';
class AssetMarker extends Marker {
marker: MapMarkerResponseDto;
@@ -95,49 +95,3 @@
if (cluster) cluster.remove();
});
</script>
{#if cluster}
<slot />
{/if}
<style lang="postcss">
:global(.marker-cluster) {
background-clip: padding-box;
}
:global(.asset-marker-icon) {
@apply rounded-full;
object-fit: cover;
border: 1px solid rgb(69, 80, 169);
box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px,
rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px,
rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
}
:global(.marker-cluster div) {
width: 40px;
height: 40px;
margin-left: 5px;
margin-top: 5px;
text-align: center;
@apply rounded-full;
font-weight: bold;
background-color: rgb(236, 237, 246);
border: 1px solid rgb(69, 80, 169);
color: rgb(69, 80, 169);
box-shadow: rgba(5, 5, 122, 0.12) 0px 2px 4px 0px, rgba(4, 4, 230, 0.32) 0px 2px 16px 0px;
}
:global(.dark .marker-cluster div) {
background-color: #adcbfa;
border: 1px solid black;
color: black;
}
:global(.marker-cluster span) {
line-height: 40px;
}
</style>