From 9038bfe5c381baf4b387270a29a8ccd5b58435a8 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Mon, 27 Jun 2022 04:40:27 +1000
Subject: In .vue files, move <template> sections to top

---
 src/components/TutorialPane.vue | 123 ++++++++++++++++++++--------------------
 1 file changed, 61 insertions(+), 62 deletions(-)

(limited to 'src/components/TutorialPane.vue')

diff --git a/src/components/TutorialPane.vue b/src/components/TutorialPane.vue
index 243ee33..88e1c66 100644
--- a/src/components/TutorialPane.vue
+++ b/src/components/TutorialPane.vue
@@ -1,5 +1,65 @@
-<script lang="ts">
+<template>
+<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'}}</h2>
+		<close-icon @click.stop="onClose"
+			class="block w-6 h-6 hover:cursor-pointer"/>
+	</div>
+	<template v-if="stage == 0">
+		<div :style="contentStyles">
+			This page provides a visualisation of the biological Tree of Life.
+			It was made using data from OTOL, EOL, and Wikipedia.
+			For more project information, click here.
+		</div>
+		<div class="w-full flex justify-evenly mt-2">
+			<s-button :style="buttonStyles" @click="onStartTutorial">Start Tutorial</s-button>
+			<s-button :style="buttonStyles" @click="onSkipTutorial">Skip</s-button>
+		</div>
+	</template>
+	<template v-else>
+		<div v-if="stage == 1" :style="contentStyles">
+			Clicking/touching a tile expands it and shows it's children.
+		</div>
+		<div v-else-if="stage == 2" :style="contentStyles">
+			Clicking on an expanded tile's header shrinks it back.
+		</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.
+		</div>
+		<div v-else-if="stage == 4" :style="contentStyles">
+			Clicking on a tile in the sidebar brings it back into the main view.
+		</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.
+		</div>
+		<div v-else-if="stage == 6" :style="contentStyles">
+			You can search using the icon at the top-right. Alternatively, press Ctrl-F.
+		</div>
+		<div v-else-if="stage == 7" :style="contentStyles">
+			You can use the play icon to enable 'Auto Mode'.
+		</div>
+		<div v-else-if="stage == 8" :style="contentStyles">
+			The settings icon allows adjusting the layout, animation speed, etc.
+		</div>
+		<div v-else-if="stage == 9" :style="contentStyles">
+			And finally, the help icon provides more information.
+		</div>
+		<!-- Buttons -->
+		<div class="w-full flex justify-evenly mt-2">
+			<s-button :disabled="stage == 1" :style="buttonStyles" @click="onPrevClick">
+				Prev
+			</s-button>
+			<s-button :style="buttonStyles" @click="(stage != lastStage) ? onNextClick() : onClose()">
+				{{stage != lastStage ? 'Next' : 'Finish'}}
+			</s-button>
+		</div>
+	</template>
+</div>
+</template>
 
+<script lang="ts">
 import {defineComponent, PropType} from 'vue';
 import SButton from './SButton.vue';
 import CloseIcon from './icon/CloseIcon.vue';
@@ -103,64 +163,3 @@ export default defineComponent({
 	emits: ['close', 'stage-chg', 'skip', ],
 });
 </script>
-
-<template>
-<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'}}</h2>
-		<close-icon @click.stop="onClose"
-			class="block w-6 h-6 hover:cursor-pointer"/>
-	</div>
-	<template v-if="stage == 0">
-		<div :style="contentStyles">
-			This page provides a visualisation of the biological Tree of Life.
-			It was made using data from OTOL, EOL, and Wikipedia.
-			For more project information, click here.
-		</div>
-		<div class="w-full flex justify-evenly mt-2">
-			<s-button :style="buttonStyles" @click="onStartTutorial">Start Tutorial</s-button>
-			<s-button :style="buttonStyles" @click="onSkipTutorial">Skip</s-button>
-		</div>
-	</template>
-	<template v-else>
-		<div v-if="stage == 1" :style="contentStyles">
-			Clicking/touching a tile expands it and shows it's children.
-		</div>
-		<div v-else-if="stage == 2" :style="contentStyles">
-			Clicking on an expanded tile's header shrinks it back.
-		</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.
-		</div>
-		<div v-else-if="stage == 4" :style="contentStyles">
-			Clicking on a tile in the sidebar brings it back into the main view.
-		</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.
-		</div>
-		<div v-else-if="stage == 6" :style="contentStyles">
-			You can search using the icon at the top-right. Alternatively, press Ctrl-F.
-		</div>
-		<div v-else-if="stage == 7" :style="contentStyles">
-			You can use the play icon to enable 'Auto Mode'.
-		</div>
-		<div v-else-if="stage == 8" :style="contentStyles">
-			The settings icon allows adjusting the layout, animation speed, etc.
-		</div>
-		<div v-else-if="stage == 9" :style="contentStyles">
-			And finally, the help icon provides more information.
-		</div>
-		<!-- Buttons -->
-		<div class="w-full flex justify-evenly mt-2">
-			<s-button :disabled="stage == 1" :style="buttonStyles" @click="onPrevClick">
-				Prev
-			</s-button>
-			<s-button :style="buttonStyles" @click="(stage != lastStage) ? onNextClick() : onClose()">
-				{{stage != lastStage ? 'Next' : 'Finish'}}
-			</s-button>
-		</div>
-	</template>
-</div>
-</template>
-- 
cgit v1.2.3

