elgaard/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Accessibility: add focus trapping, debug tab cycling, UI tweaks for mobile browser

Browse source
This commit is contained in:
Pieter Vander Vennet 2023-12-07 21:57:20 +01:00
parent 307549b593
commit 8ae4d810d6
19 changed files with 123 additions and 77 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/UI/Image/ImageOperations.svelte
View file

@ -12,7 +12,7 @@ import { twMerge } from "tailwind-merge";
export let image: ProvidedImage
export let clss: string = undefined
async function download() {
const response = await fetch(image.url)
const response = await fetch(image.url_hd ?? image.url )
const blob = await response.blob()
Utils.offerContentsAsDownloadableFile(blob, new URL(image.url).pathname.split("/").at(-1), {
mimetype: "image/jpg",
@ -22,11 +22,11 @@ async function download() {
</script>
<div class={twMerge("w-full h-full relative", clss)}>
<div class="absolute top-0 left-0 w-full h-full overflow-hidden">
<div class="absolute top-0 left-0 w-full h-full overflow-hidden panzoom-container focusable">
<ImagePreview image={image} />
</div>
<div class="absolute bottom-0 left-0 w-full pointer-events-none flex flex-wrap justify-between items-end">
<div class="pointer-events-auto w-fit opacity-50 hover:opacity-100 transition-colors duration-200">
<div class="pointer-events-auto w-fit opacity-50 hover:opacity-100 transition-colors duration-200 m-1">
<ImageAttribution image={image} />
</div>