Fabio/gpx.studio
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

layer control with responsive height

Browse source
This commit is contained in:
vcoppe 2024-04-15 11:25:31 +02:00
parent 2cd07688c9
commit 8a81c30cf1
2 changed files with 56 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
website/src/lib/components/Map.svelte
View file

@ -116,5 +116,10 @@
div :global(.mapboxgl-ctrl-top-right) {
@apply z-10;
@apply flex;
@apply flex-col;
@apply items-end;
@apply h-full;
@apply overflow-hidden;
}
</style>

8
website/src/lib/components/layer-control/LayerControl.svelte
View file

@ -26,18 +26,17 @@
}
</script>
<CustomControl {map} class="group min-w-[29px] min-h-[29px]">
<CustomControl {map} class="group min-w-[29px] min-h-[29px] overflow-hidden">
<div
class="flex flex-row justify-center items-center w-[29px] h-[29px] delay-100 transition-[opacity height] duration-0 group-hover:opacity-0 group-hover:h-0 group-hover:delay-0"
>
<Layers size="20" />
</div>
<div
class="transition-[grid-template-rows grid-template-cols] grid grid-rows-[0fr] grid-cols-[0fr] duration-150 group-hover:grid-rows-[1fr] group-hover:grid-cols-[1fr]"
class="transition-[grid-template-rows grid-template-cols] grid grid-rows-[0fr] grid-cols-[0fr] duration-150 group-hover:grid-rows-[1fr] group-hover:grid-cols-[1fr] h-full"
>
<div class="overflow-hidden">
<ScrollArea>
<div class="h-fit max-h-[50vh]">
<div class="h-fit">
<div class="p-2">
<LayerTree
layerTree={basemapTree}
@ -87,5 +86,4 @@
</div>
</ScrollArea>
</div>
</div>
</CustomControl>