Robin-van-der-Linde/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

UX: Small tweaks to walkthrough: show page number, show link underline

Browse source
This commit is contained in:
Pieter Vander Vennet 2023-11-17 01:59:41 +01:00
parent 2835f28398
commit 939dad477a
3 changed files with 33 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
Docs/Studio/Introduction.md
View file

@ -34,7 +34,7 @@ OpenStreetMap data can be reused freely, including for commercial purposes. Howe
1. Give attribution
2. Keep the data open - changes to data based on OpenStreetMap must be published under the same license.
You can read the [full copyright notice here](https://osm.org/copyright)
See the [full copyright notice](https://osm.org/copyright) for details
This also means that we are *not* allowed to copy data from other maps. Do not enter data based on Google Maps!
@ -83,7 +83,7 @@ These features are based on OpenStreetMap. If some data is not known, the user w
<img src="../../public/assets/docs/UIExample.png" class="w-1/2"/>
Data can also be loaded and visualised from external sources. No changes can be made to the data in that case.
Data can also be loaded and visualised from external sources. No changes can be made to this externally loaded data in that case.

2
src/UI/Walkthrough/Walkthrough.svelte
View file

@ -28,6 +28,8 @@
on:next={() => step(1)}
isFirst={currentPage === 0}
islast={currentPage + 1 === pages.length}
totalPages={pages.length}
pageNumber={currentPage}
>
<FromHtml src={nmd(pages[currentPage])} />
</WalkthroughStep>

26
src/UI/Walkthrough/WalkthroughStep.svelte
View file

@ -1,18 +1,27 @@
<script lang="ts">
import BackButton from "../Base/BackButton.svelte"
import NextButton from "../Base/NextButton.svelte"
import { createEventDispatcher } from "svelte"
import BackButton from "../Base/BackButton.svelte";
import NextButton from "../Base/NextButton.svelte";
import { createEventDispatcher } from "svelte";
const dispatch = createEventDispatcher<{ back; next }>()
export let islast = false
export let isFirst = false
const dispatch = createEventDispatcher<{ back; next }>();
export let islast = false;
export let isFirst = false;
export let pageNumber: number = undefined;
export let totalPages: number = undefined;
</script>
<div class="flex h-full w-full flex-col justify-between">
<div class="flex h-full w-full flex-col justify-between link-underline">
<div class="overflow-y-auto">
<slot />
</div>
<div class="flex flex-col">
{#if pageNumber !== undefined && totalPages !== undefined}
<div class="flex justify-end">
<div class="subtle">{pageNumber+1}/{totalPages}</div>
</div>
{/if}
<div class="flex w-full">
{#if !isFirst}
<BackButton clss="w-full" on:click={() => dispatch("back")}>Back</BackButton>
@ -26,5 +35,8 @@
Next
{/if}
</NextButton>
</div>
</div>
</div>