Fixed #242, better tutorial advance buttons.

wordplaydev · Oct 31, 2023 · c91f2e7 · c91f2e7
1 parent 727117d
commit c91f2e7
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 13 deletions.
diff --git a/src/components/app/TutorialView.svelte b/src/components/app/TutorialView.svelte
@@ -229,18 +229,6 @@
             )}</Header
         >
         <nav>
-            <Button
-                tip={$locales.get((l) => l.ui.page.learn.button.previous)}
-                action={() => navigate(progress.previousPause() ?? progress)}
-                active={progress.previousPause() !== undefined}
-                bind:view={previousButton}>⇦</Button
-            >
-            <Button
-                tip={$locales.get((l) => l.ui.page.learn.button.next)}
-                action={() => navigate(progress.nextPause() ?? progress)}
-                active={progress.nextPause() !== undefined}
-                bind:view={nextButton}>⇨</Button
-            >
             <!-- A hierarchical select of tutorial units and lessons  -->
             <select
                 bind:value={selection}
@@ -281,6 +269,29 @@
     <div class="content">
         <div role="article" class="dialog">
             <div class="turns" aria-live="assertive">
+                <div class="controls">
+                    <Button
+                        large
+                        tip={$locales.get(
+                            (l) => l.ui.page.learn.button.previous
+                        )}
+                        action={() =>
+                            navigate(progress.previousPause() ?? progress)}
+                        active={progress.previousPause() !== undefined}
+                        bind:view={previousButton}>⇦</Button
+                    >
+                    {#if act !== undefined && scene !== undefined && (scene.subtitle ?? scene.title)}<Note
+                            >{scene.subtitle ?? scene.title}</Note
+                        >{/if}
+                    <Button
+                        large
+                        tip={$locales.get((l) => l.ui.page.learn.button.next)}
+                        action={() =>
+                            navigate(progress.nextPause() ?? progress)}
+                        active={progress.nextPause() !== undefined}
+                        bind:view={nextButton}>⇨</Button
+                    >
+                </div>
                 {#if act === undefined}
                     <div class="title play"
                         >{$locales.get((l) => l.wordplay)}</div
@@ -482,4 +493,11 @@
     select::after {
         content: 'a';
     }
+
+    .controls {
+        display: flex;
+        width: 100%;
+        align-items: center;
+        justify-content: space-between;
+    }
 </style>
diff --git a/src/components/widgets/Button.svelte b/src/components/widgets/Button.svelte
@@ -113,7 +113,6 @@
         border-radius: var(--wordplay-border-radius);
     }
 
-    button.scale:focus[aria-disabled='false'],
     button.scale:hover[aria-disabled='false'] {
         transform: rotate(-3deg);
     }