From 939dad477a218b22dffa2f4bf4f03f8db45a33bd Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@posteo.net>
Date: Fri, 17 Nov 2023 01:59:41 +0100
Subject: [PATCH] UX: Small tweaks to walkthrough: show page number, show link
 underline

---
 Docs/Studio/Introduction.md               |  4 +-
 src/UI/Walkthrough/Walkthrough.svelte     |  2 +
 src/UI/Walkthrough/WalkthroughStep.svelte | 46 ++++++++++++++---------
 3 files changed, 33 insertions(+), 19 deletions(-)

diff --git a/Docs/Studio/Introduction.md b/Docs/Studio/Introduction.md
index ca858b0cb..40277ef1d 100644
--- a/Docs/Studio/Introduction.md
+++ b/Docs/Studio/Introduction.md
@@ -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.
 
 
 
diff --git a/src/UI/Walkthrough/Walkthrough.svelte b/src/UI/Walkthrough/Walkthrough.svelte
index 5b1874f93..d3fda9f12 100644
--- a/src/UI/Walkthrough/Walkthrough.svelte
+++ b/src/UI/Walkthrough/Walkthrough.svelte
@@ -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>
diff --git a/src/UI/Walkthrough/WalkthroughStep.svelte b/src/UI/Walkthrough/WalkthroughStep.svelte
index ad5beec28..f1dcc955a 100644
--- a/src/UI/Walkthrough/WalkthroughStep.svelte
+++ b/src/UI/Walkthrough/WalkthroughStep.svelte
@@ -1,30 +1,42 @@
 <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 w-full">
-    {#if !isFirst}
-      <BackButton clss="w-full" on:click={() => dispatch("back")}>Back</BackButton>
-    {:else}
-      <div class="w-full" />
+  <div class="flex flex-col">
+
+    {#if pageNumber !== undefined && totalPages !== undefined}
+      <div class="flex justify-end">
+      <div class="subtle">{pageNumber+1}/{totalPages}</div>
+      </div>
     {/if}
-    <NextButton clss="primary w-full" on:click={() => dispatch("next")}>
-      {#if islast}
-        Finish
+    <div class="flex w-full">
+      {#if !isFirst}
+        <BackButton clss="w-full" on:click={() => dispatch("back")}>Back</BackButton>
       {:else}
-        Next
+        <div class="w-full" />
       {/if}
-    </NextButton>
+      <NextButton clss="primary w-full" on:click={() => dispatch("next")}>
+        {#if islast}
+          Finish
+        {:else}
+          Next
+        {/if}
+      </NextButton>
+
+
+    </div>
   </div>
 </div>