midgard/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 1. Give attribution
2. Keep the data open - changes to data based on OpenStreetMap must be published under the same license. 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! 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"/> <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)} on:next={() => step(1)}
isFirst={currentPage === 0} isFirst={currentPage === 0}
islast={currentPage + 1 === pages.length} islast={currentPage + 1 === pages.length}
totalPages={pages.length}
pageNumber={currentPage}
> >
<FromHtml src={nmd(pages[currentPage])} /> <FromHtml src={nmd(pages[currentPage])} />
</WalkthroughStep> </WalkthroughStep>

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

@ -1,30 +1,42 @@
<script lang="ts"> <script lang="ts">
import BackButton from "../Base/BackButton.svelte" import BackButton from "../Base/BackButton.svelte";
import NextButton from "../Base/NextButton.svelte" import NextButton from "../Base/NextButton.svelte";
import { createEventDispatcher } from "svelte" import { createEventDispatcher } from "svelte";
const dispatch = createEventDispatcher<{ back; next }>() const dispatch = createEventDispatcher<{ back; next }>();
export let islast = false export let islast = false;
export let isFirst = false export let isFirst = false;
export let pageNumber: number = undefined;
export let totalPages: number = undefined;
</script> </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"> <div class="overflow-y-auto">
<slot /> <slot />
</div> </div>
<div class="flex w-full"> <div class="flex flex-col">
{#if !isFirst}
<BackButton clss="w-full" on:click={() => dispatch("back")}>Back</BackButton> {#if pageNumber !== undefined && totalPages !== undefined}
{:else} <div class="flex justify-end">
<div class="w-full" /> <div class="subtle">{pageNumber+1}/{totalPages}</div>
</div>
{/if} {/if}
<NextButton clss="primary w-full" on:click={() => dispatch("next")}> <div class="flex w-full">
{#if islast} {#if !isFirst}
Finish <BackButton clss="w-full" on:click={() => dispatch("back")}>Back</BackButton>
{:else} {:else}
Next <div class="w-full" />
{/if} {/if}
</NextButton> <NextButton clss="primary w-full" on:click={() => dispatch("next")}>
{#if islast}
Finish
{:else}
Next
{/if}
</NextButton>
</div>
</div> </div>
</div> </div>