From a8f80a02b88055cfcb45664ce3a3d24c2b2da98c Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Sun, 10 Jul 2022 23:41:20 +1000
Subject: Update project-level and client-side documentation

---
 src/components/AncestryBar.vue   | 2 +-
 src/components/HelpModal.vue     | 4 ++--
 src/components/LoadingModal.vue  | 4 +---
 src/components/SButton.vue       | 3 +--
 src/components/SearchModal.vue   | 4 ++--
 src/components/SettingsModal.vue | 4 +---
 src/components/Tile.vue          | 3 ++-
 src/components/TileInfoModal.vue | 3 +--
 src/components/TutorialPane.vue  | 8 ++++----
 9 files changed, 15 insertions(+), 20 deletions(-)

(limited to 'src/components')

diff --git a/src/components/AncestryBar.vue b/src/components/AncestryBar.vue
index fcf9933..6f2d37c 100644
--- a/src/components/AncestryBar.vue
+++ b/src/components/AncestryBar.vue
@@ -75,7 +75,7 @@ export default defineComponent({
 		},
 	},
 	watch: {
-		// Used to scroll to end of bar upon node/screen changes
+		// For scrolling-to-end upon node/screen changes
 		nodes(){
 			this.$nextTick(() => this.scrollToEnd());
 		},
diff --git a/src/components/HelpModal.vue b/src/components/HelpModal.vue
index 7375584..cc11afb 100644
--- a/src/components/HelpModal.vue
+++ b/src/components/HelpModal.vue
@@ -358,14 +358,14 @@
 				</template>
 				<template #content>
 					<div :class="contentClasses">
-						<li>Tilo's code is licensed under the MIT license.</li>
+						<li>Tilo's code is licensed under the MIT licence.</li>
 						<br/>
 						<h1 class="text-lg font-bold">Other Credits</h1>
 						<ul class="list-disc pl-4">
 							<li>
 								The UI was largely coded in
 								<a href="https://www.typescriptlang.org/" :style="aStyles">Typescript</a>,
-								and built using the <a href="https://vuejs.org/" :style="aStyles">Vue framework</a>
+								and built using the <a href="https://vuejs.org/" :style="aStyles">Vue</a> framework.
 							</li>
 							<li>
 								Tree data was processed using
diff --git a/src/components/LoadingModal.vue b/src/components/LoadingModal.vue
index 506abf4..ee8d699 100644
--- a/src/components/LoadingModal.vue
+++ b/src/components/LoadingModal.vue
@@ -28,8 +28,6 @@ export default defineComponent({
 			};
 		},
 	},
-	components: {
-		LoaderIcon,
-	},
+	components: {LoaderIcon, },
 });
 </script>
diff --git a/src/components/SButton.vue b/src/components/SButton.vue
index 54c7843..508f8e6 100644
--- a/src/components/SButton.vue
+++ b/src/components/SButton.vue
@@ -1,6 +1,5 @@
 <template>
-<button :disabled="disabled"
-	class="block rounded px-4 py-2"
+<button :disabled="disabled" class="block rounded px-4 py-2"
 	:class="{'hover:brightness-125': !disabled, 'brightness-50': disabled}">
 	<slot>?</slot>
 </button>
diff --git a/src/components/SearchModal.vue b/src/components/SearchModal.vue
index 025ed71..e90707a 100644
--- a/src/components/SearchModal.vue
+++ b/src/components/SearchModal.vue
@@ -61,7 +61,7 @@ export default defineComponent({
 			pendingDelayedSuggReq: 0, // Set via setTimeout() for a non-initial search-suggestions request
 			pendingSuggInput: '', // Used to remember what input triggered a suggestions request
 			// Other
-			focusedSuggIdx: null as null | number, // Denotes a search-suggestion selected using the arrow keys
+			focusedSuggIdx: null as null | number, // Index of a search-suggestion selected using the arrow keys
 		};
 	},
 	computed: {
@@ -197,7 +197,7 @@ export default defineComponent({
 			if (tolNodeName == ''){
 				return;
 			}
-			// Check if the node has already been retrieved
+			// Check if the node data is already here
 			if (this.lytMap.has(tolNodeName)){
 				this.$emit('search', tolNodeName);
 				return;
diff --git a/src/components/SettingsModal.vue b/src/components/SettingsModal.vue
index a298230..4f5f05e 100644
--- a/src/components/SettingsModal.vue
+++ b/src/components/SettingsModal.vue
@@ -107,9 +107,7 @@
 			Reset
 		</s-button>
 		<transition name="fade">
-			<div v-if="saved" class="absolute right-1 bottom-1" ref="saveIndicator">
-				Saved
-			</div>
+			<div v-if="saved" class="absolute right-1 bottom-1" ref="saveIndicator"> Saved </div>
 		</transition>
 	</div>
 </div>
diff --git a/src/components/Tile.vue b/src/components/Tile.vue
index c2f2b9c..2edd531 100644
--- a/src/components/Tile.vue
+++ b/src/components/Tile.vue
@@ -1,5 +1,5 @@
 <template>
-<div :style="styles" @scroll="onScroll"> <!-- Need enclosing div for transitions -->
+<div :style="styles" @scroll="onScroll">
 	<div v-if="isLeaf" :class="[hasOneImage ? 'flex' : 'grid', {'hover:cursor-pointer': isExpandableLeaf}]"
 		class="w-full h-full flex-col grid-cols-1" :style="leafStyles"
 		@mouseenter="onMouseEnter" @mouseleave="onMouseLeave" @mousedown="onMouseDown" @mouseup="onMouseUp">
@@ -557,6 +557,7 @@ export default defineComponent({
 </script>
 
 <style>
+/* For making a parent-swept-area div look continuous with the tile div */
 .hide-right-edge::before {
 	content: '';
 	position: absolute;
diff --git a/src/components/TileInfoModal.vue b/src/components/TileInfoModal.vue
index 0461de6..053604c 100644
--- a/src/components/TileInfoModal.vue
+++ b/src/components/TileInfoModal.vue
@@ -1,8 +1,7 @@
 <template>
 <div class="fixed left-0 top-0 w-full h-full bg-black/40" @click="onClose">
 	<div class="absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2
-		max-w-[80%] min-w-[8cm] md:min-w-[14cm] max-h-[80%]"
-		:style="styles">
+		max-w-[80%] min-w-[8cm] md:min-w-[14cm] max-h-[80%]" :style="styles">
 		<div class="pb-1 md:pb-2">
 			<close-icon @click.stop="onClose" ref="closeIcon"
 				class="absolute top-1 right-1 md:top-2 md:right-2 w-8 h-8 hover:cursor-pointer"/>
diff --git a/src/components/TutorialPane.vue b/src/components/TutorialPane.vue
index 90d0aca..8de656c 100644
--- a/src/components/TutorialPane.vue
+++ b/src/components/TutorialPane.vue
@@ -1,13 +1,12 @@
 <template>
 <div :style="styles" class="relative flex flex-col justify-between">
-	<close-icon @click.stop="onClose"
-		class="absolute top-2 right-2 w-8 h-8 hover:cursor-pointer"/>
+	<close-icon @click.stop="onClose" class="absolute top-2 right-2 w-8 h-8 hover:cursor-pointer"/>
 	<h1 class="text-center text-lg font-bold pt-3 pb-2">
 		{{stage == 0 ? 'Welcome' : `Tutorial (Step ${stage} of ${lastStage})`}}
 	</h1>
 	<transition name="fade" mode="out-in">
 		<div v-if="stage == 0" :style="contentStyles">
-			This is a visualiser for exploring the biological Tree of Life.
+			This is a visual explorer for the biological Tree of Life.
 		</div>
 		<div v-else-if="stage == 1" :style="contentStyles">
 			{{touchDevice ? 'Tap' : 'Click'}} a tile to expand it, showing it's children
@@ -75,7 +74,8 @@ import {Action, UiOptions} from '../lib';
 
 export default defineComponent({
 	props: {
-		actionsDone: {type: Object as PropType<Set<Action>>, required: true}, // Used to avoid disabling actions already seen
+		actionsDone: {type: Object as PropType<Set<Action>>, required: true},
+			// Used to avoid disabling actions already done
 		triggerFlag: {type: Boolean, required: true},
 			// Used to indicate that a tutorial-requested 'trigger' action has been done
 		skipWelcome: {type: Boolean, default: false},
-- 
cgit v1.2.3