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>

2
src/UI/Image/ImagePreview.svelte
View file

@ -25,4 +25,4 @@
</script>
<img bind:this={panzoomEl} src={image.url_hd ?? image.url} class="w-full h-auto"/>
<img bind:this={panzoomEl} src={image.url_hd ?? image.url} class="w-fit h-fit panzoom-image"/>

7
src/UI/Image/UploadingImageCounter.svelte
View file

@ -13,8 +13,11 @@
import Loading from "../Base/Loading.svelte"
export let state: SpecialVisualizationState
export let tags: Store<OsmTags>
export let featureId = tags.data.id
export let tags: Store<OsmTags> = undefined
export let featureId = tags?.data?.id
if(featureId === undefined){
throw "No tags or featureID given"
}
export let showThankYou: boolean = true
const { uploadStarted, uploadFinished, retried, failed } =
state.imageUploadManager.getCountsFor(featureId)