Adjust tutorial content

5 files changed, 43 insertions, 27 deletions

diff --git a/src/App.vue b/src/App.vue
index e368342..68888ee 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,22 +2,22 @@
 <div class="absolute left-0 top-0 w-screen h-screen overflow-hidden flex flex-col"
 	:style="{backgroundColor: uiOpts.bgColor}">
 	<!-- Title bar -->
-	<div class="flex shadow gap-2 p-2" :style="{backgroundColor: uiOpts.bgColorDark2}">
-		<h1 class="my-auto ml-2 text-3xl" :style="{color: uiOpts.altColor}">Tilo (prototype)</h1>
+	<div class="flex shadow gap-2 p-2" :style="{backgroundColor: uiOpts.bgColorDark2, color: uiOpts.altColor}">
+		<h1 class="my-auto mx-2 text-4xl">Tilo</h1>
 		<div class="mx-auto"/> <!-- Spacer -->
 		<!-- Icons -->
-		<icon-button :disabled="isDisabled('search')" :style="buttonStyles" @click="onSearchIconClick">
-			<search-icon/>
+		<icon-button :disabled="isDisabled('help')" :size="45" :style="buttonStyles" @click="onHelpIconClick">
+			<help-icon/>
+		</icon-button>
+		<icon-button :disabled="isDisabled('settings')" :size="45" :style="buttonStyles" @click="onSettingsIconClick">
+			<settings-icon/>
 		</icon-button>
-		<icon-button :disabled="isDisabled('autoMode')" :style="buttonStyles" @click="onAutoIconClick">
+		<icon-button :disabled="isDisabled('autoMode')" :size="45" :style="buttonStyles" @click="onAutoIconClick">
 			<play-icon v-if="modeRunning != 'autoMode'"/>
 			<pause-icon v-else/>
 		</icon-button>
-		<icon-button :disabled="isDisabled('settings')" :style="buttonStyles" @click="onSettingsIconClick">
-			<settings-icon/>
-		</icon-button>
-		<icon-button :disabled="isDisabled('help')" :style="buttonStyles" @click="onHelpIconClick">
-			<help-icon/>
+		<icon-button :disabled="isDisabled('search')" :size="45" :style="buttonStyles" @click="onSearchIconClick">
+			<search-icon/>
 		</icon-button>
 	</div>
 	<!-- Content area -->
@@ -219,6 +219,7 @@ export default defineComponent({
 			} else {
 				return {
 					height: this.uiOpts.tutPaneSz + 'px',
+					minWidth: '10cm',
 					maxWidth: '10cm',
 					borderRadius: this.uiOpts.borderRadius + 'px',
 					boxShadow: '0 0 3px black',
diff --git a/src/components/Tile.vue b/src/components/Tile.vue
index 76ff645..9b43467 100644
--- a/src/components/Tile.vue
+++ b/src/components/Tile.vue
@@ -56,7 +56,7 @@ import {LayoutNode, LayoutOptions} from '../layout';
 import {getImagePath, UiOptions} from '../lib';
 import {capitalizeWords} from '../util';
 
-const scrimGradient = 'linear-gradient(to bottom, rgba(0,0,0,0.4), #0000 40%)';
+const scrimGradient = 'linear-gradient(to bottom, rgba(0,0,0,0.4), #0000 40%, #0000 60%, rgba(0,0,0,0.2) 100%)';
 
 export default defineComponent({
 	props: {
diff --git a/src/components/TutorialPane.vue b/src/components/TutorialPane.vue
index f8efc61..289f386 100644
--- a/src/components/TutorialPane.vue
+++ b/src/components/TutorialPane.vue
@@ -2,44 +2,52 @@
 <div :style="styles" class="p-2 flex flex-col justify-between">
 	<div class="flex">
 		<h2 class="text-center mb-2 mx-auto">
-			{{stage == 0 ? 'Welcome' : `Tutorial (${stage} / ${lastStage})`}}
+			{{stage == 0 ? 'Welcome' : `Tutorial (Step ${stage} of ${lastStage})`}}
 		</h2>
 		<close-icon @click.stop="onClose"
 			class="block w-6 h-6 hover:cursor-pointer"/>
 	</div>
 	<transition name="fade" mode="out-in">
 		<div v-if="stage == 0" :style="contentStyles">
-			This page provides a visualisation of the biological Tree of Life.
-			It is unfinished, and is just here for testing.
+			This is a visualiser for the biological Tree of Life. For more information,
+			<a href="#" :style="{color: uiOpts.altColor}">{{touchDevice ? 'tap' : 'click'}} here</a>.
 		</div>
 		<div v-else-if="stage == 1" :style="contentStyles">
-			Clicking/touching a tile expands it and shows it's children.
+			{{touchDevice ? 'Tap' : 'Click'}} a tile to expand it and show it's children
 		</div>
 		<div v-else-if="stage == 2" :style="contentStyles">
-			Clicking on an expanded tile's header shrinks it back.
+			{{touchDevice ? 'Tap' : 'Click'}} an expanded tile's header to shrink it
 		</div>
 		<div v-else-if="stage == 3" :style="contentStyles">
-			Clicking and holding on a tile makes it fill the view, and moves it's
-				ancestors to a sidebar. The same thing applies for an expanded tile's header.
+			{{touchDevice ? 'Double tap' : 'Click and hold'}} a tile to hide it's ancestors
+			<span class="block text-sm brightness-50">
+				For an expanded tile, use the header
+			</span>
 		</div>
 		<div v-else-if="stage == 4" :style="contentStyles">
-			Clicking on a tile in the sidebar brings it back into the main view.
+			{{touchDevice ? 'Tap' : 'Click'}} a tile in the sidebar to unhide it
 		</div>
 		<div v-else-if="stage == 5" :style="contentStyles">
-			Clicking on the icon at a tile's bottom-right, or at the right of
-				an expanded tile's header, brings up more information.
+			{{touchDevice ? 'Tap' : 'Click'}} the icon on a tile's bottom-right to
+			bring up more information
+			<span class="block text-sm brightness-50">
+				For an expanded tile, it's at the header's right
+			</span>
 		</div>
 		<div v-else-if="stage == 6" :style="contentStyles">
-			You can search using the icon at the top-right. Alternatively, press Ctrl-F.
+			{{touchDevice ? 'Tap' : 'Click'}} the icon at the top-right to search
+			<span class="block text-sm brightness-50">
+				Or press Ctrl-F
+			</span>
 		</div>
 		<div v-else-if="stage == 7" :style="contentStyles">
-			You can use the play icon to enable 'Auto Mode'.
+			{{touchDevice ? 'Tap' : 'Click'}} the play icon to start Auto Mode
 		</div>
 		<div v-else-if="stage == 8" :style="contentStyles">
-			The settings icon allows adjusting the layout, animation speed, etc.
+			{{touchDevice ? 'Tap' : 'Click'}} the settings icon
 		</div>
 		<div v-else-if="stage == 9" :style="contentStyles">
-			And finally, the help icon provides more information.
+			And finally, tap the help icon for more information
 		</div>
 	</transition>
 	<!-- Buttons -->
@@ -101,6 +109,7 @@ export default defineComponent({
 				maxWidth: '15cm',
 				margin: '0 auto',
 				overflow: 'auto',
+				textAlign: 'center',
 			};
 		 },
 		 buttonStyles(): Record<string,string> {
@@ -108,7 +117,10 @@ export default defineComponent({
 				color: this.uiOpts.textColor,
 				backgroundColor: this.uiOpts.bgColor,
 			};
-		 },
+		},
+		touchDevice(): boolean {
+			return this.uiOpts.touchDevice;
+		},
 	},
 	watch: {
 		stage(newVal, oldVal){
diff --git a/src/index.css b/src/index.css
index ffd7dda..5987443 100644
--- a/src/index.css
+++ b/src/index.css
@@ -10,6 +10,9 @@ body {
 	font-family: Ubuntu, system-ui, sans-serif;
 	touch-action: manipulation; /* Prevents non-standard gestures such as double-tap to zoom */
 }
+a {
+	@apply hover:underline hover:cursor-pointer;
+}
 
 /* For transitions/animations */
 .fade-enter-from, .fade-leave-to {
diff --git a/src/lib.ts b/src/lib.ts
index 06df78b..73c4c03 100644
--- a/src/lib.ts
+++ b/src/lib.ts
@@ -158,7 +158,7 @@ export function getDefaultUiOpts(lytOpts: LayoutOptions): UiOptions {
 		ancestryBarBgColor: bgColorLight,
 		// Component sizing
 		ancestryBarBreadth: lytOpts.maxTileSz / 2 + lytOpts.tileSpacing*2, // px
-		tutPaneSz: 200, // px
+		tutPaneSz: 180, // px
 		scrollGap,
 		// Timing related
 		clickHoldDuration: 400, // ms