Adjust frontend coding style

Add line spacing and section comments
Fix 'Last updated' line in help modal being shown despite overflow

1 files changed, 23 insertions, 6 deletions

diff --git a/src/components/TutorialPane.vue b/src/components/TutorialPane.vue
index 3ccbc46..b5134ca 100644
--- a/src/components/TutorialPane.vue
+++ b/src/components/TutorialPane.vue
@@ -1,9 +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"/>
+	<!-- Heading -->
 	<h1 class="text-center text-lg font-bold pt-3 pb-2">
 		{{stage == 0 ? 'Welcome' : `Tutorial (Step ${stage} of ${LAST_STAGE})`}}
 	</h1>
+
+	<!-- Text content -->
 	<transition name="fade" mode="out-in">
 		<div v-if="stage == 0" :style="contentStyles">
 			This is a visual explorer for the biological Tree of Life.
@@ -46,6 +49,7 @@
 			And finally, {{touchDevice ? 'tap' : 'click'}} the help icon for more information
 		</div>
 	</transition>
+
 	<!-- Buttons -->
 	<div class="w-full my-2 flex justify-evenly">
 		<template v-if="stage == 0">
@@ -68,15 +72,15 @@
 
 <script setup lang="ts">
 import {ref, computed, watch, onMounted, PropType} from 'vue';
+
 import SButton from './SButton.vue';
 import CloseIcon from './icon/CloseIcon.vue';
 import {Action} from '../lib';
 import {useStore} from '../store';
 
-// Global store
 const store = useStore();
+const touchDevice = computed(() => store.touchDevice);
 
-// Props + events
 const props = defineProps({
 	actionsDone: {type: Object as PropType<Set<Action>>, required: true},
 		// Used to avoid disabling actions already done
@@ -84,38 +88,47 @@ const props = defineProps({
 		// Used to indicate that a tutorial-requested 'trigger' action has been done
 	skipWelcome: {type: Boolean, default: false},
 });
-const touchDevice = computed(() => store.touchDevice);
+
 const emit = defineEmits(['close', 'stage-chg', 'skip']);
 
-// For tutorial stage
+// ========== For tutorial stage ==========
+
 const stage = ref(props.skipWelcome ? 1 : 0);
 	// Indicates the current step of the tutorial (stage 0 is the welcome message)
+
 const LAST_STAGE = 9;
 const STAGE_ACTIONS = [
 	// Specifies, for stages 1+, what action to enable (can repeat an action to enable nothing new)
 	'expand', 'collapse', 'expandToView', 'unhideAncestor',
 	'tileInfo', 'search', 'autoMode', 'settings', 'help',
 ] as Action[];
+
 let disabledOnce = false; // Set to true after disabling features at stage 1
 const hidNextPrevOnce = ref(false); // Used to hide prev/next buttons when initially at stage 1
 
-// For stage changes
+// ========== For stage changes ==========
+
 function onStartTutorial(){
 	stage.value = 1;
 }
+
 function onSkipTutorial(){
 	emit('skip');
 	emit('close');
 }
+
 function onPrevClick(){
 	stage.value = Math.max(1, stage.value - 1);
 }
+
 function onNextClick(){
 	stage.value = Math.min(stage.value + 1, LAST_STAGE);
 }
+
 function onClose(){
 	emit('close');
 }
+
 function onStageChange(){
 	// If starting tutorial, disable 'all' actions
 	if (stage.value == 1 && !disabledOnce){
@@ -135,6 +148,7 @@ function onStageChange(){
 		hidNextPrevOnce.value = true;
 	}
 }
+
 onMounted(() => {
 	if (props.skipWelcome){
 		onStageChange();
@@ -149,16 +163,19 @@ watch(() => props.triggerFlag, () => {
 	}
 });
 
-// Styles
+// ========== For styling ==========
+
 const styles = computed(() => ({
 	backgroundColor: store.color.bgDark,
 	color: store.color.text,
 }));
+
 const contentStyles = {
 	padding: '0 0.5cm',
 	overflow: 'auto',
 	textAlign: 'center',
 };
+
 const buttonStyles = computed(() => ({
 	color: store.color.text,
 	backgroundColor: store.color.bg,