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

UX: fix #2484 (although a bit hacky)

Browse source
This commit is contained in:
Pieter Vander Vennet 2025-08-05 22:19:43 +02:00
parent 7f45d7487d
commit f45c348fdb
3 changed files with 14 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

8
public/css/index-tailwind-output.css
View file

@ -1351,10 +1351,6 @@ input[type="range"].range-lg::-moz-range-thumb {
float: left;
}
.-m-4 {
margin: -1rem;
}
.m-0 {
margin: 0px;
}
@ -2348,6 +2344,10 @@ input[type="range"].range-lg::-moz-range-thumb {
flex-grow: 1;
}
.grow-0 {
flex-grow: 0;
}
.border-collapse {
border-collapse: collapse;
}

1
src/UI/BigComponents/VisualFeedbackPanel.svelte
View file

@ -1,6 +1,7 @@
<script lang="ts">
/**
* The visual feedback panel gives visual (and auditive) feedback on the main map view
* This is an accessibility feature for people with screen readers
*/
import Translations from "../i18n/Translations"

12
src/UI/ThemeViewGUI.svelte
View file

@ -78,6 +78,8 @@
let viewport: UIEventSource<HTMLDivElement> = new UIEventSource<HTMLDivElement>(undefined)
let mapproperties: MapProperties = state.mapProperties
let searchOpened = state.searchState.showSearchDrawer
let isOnline = IsOnline.isOnline
let searchIsOpened = state.guistate.pageStates.search
let metatags = state.userRelatedState.preferencesAsTags
Orientation.singleton.startMeasurements()
@ -183,7 +185,6 @@
mapIsDragged.ping()
}
let isOnline = IsOnline.isOnline
</script>
<main>
@ -330,12 +331,14 @@
<InsetSpacer height={AndroidPolyfill.getInsetSizes().bottom}/>
</div>
<!-- Search results -->
<DrawerRight shown={state.searchState.showSearchDrawer}>
<SearchResults {state} />
</DrawerRight>
<!-- Top components -->
<div class="z-4 pointer-events-none absolute left-0 top-0 w-full">
<!-- Grayed out top bar with menu button, theme intro and search bar (+ search button -->
<div
id="top-bar"
class="bg-black-light-transparent pointer-events-auto flex flex-wrap items-center justify-between px-4 py-1"
@ -399,6 +402,7 @@
</If>
</div>
<!-- Panel for screenreader users -->
<div class="pointer-events-auto float-right mt-1 flex flex-col px-1 max-[480px]:w-full sm:m-2">
<If condition={state.visualFeedback}>
{#if $selectedElement === undefined}
@ -409,8 +413,8 @@
</If>
</div>
<div class="float-left m-1 flex flex-col sm:mt-2">
<!-- Current view tools -->
<!-- Current view tools: compass, uploading images counter, extra link, pending changes, ... -->
<div class="float-left m-1 flex flex-col sm:mt-2 sm:block" style="transition: color" class:hidden={$searchIsOpened}>
{#if currentViewLayer?.tagRenderings && currentViewLayer.hasDefaultIcon()}
<MapControlButton
on:click={() => {
@ -446,6 +450,7 @@
{/if}
</div>
<!-- 'Data is loading' panel -->
<div class="flex w-full flex-col items-center justify-center">
<!-- Flex and w-full are needed for the positioning -->
<!-- Centermessage -->
@ -454,6 +459,7 @@
</div>
</div>
<!-- Menu drawer -->
<div class="h-full overflow-hidden">
<DrawerLeft shown={state.guistate.pageStates.menu}>
<div class="h-screen overflow-y-auto">