Update IconButton to maintain equal width/height

5 files changed, 21 insertions, 14 deletions

diff --git a/src/App.vue b/src/App.vue
index f98e4e9..5cd5ac8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,7 +3,7 @@
 	:style="{backgroundColor: uiOpts.bgColor}">
 	<!-- Title bar -->
 	<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>
+		<h1 class="my-auto ml-2 text-4xl">Tilo</h1>
 		<div class="mx-auto"/> <!-- Spacer -->
 		<!-- Icons -->
 		<icon-button :disabled="isDisabled('help')" :size="45" :style="buttonStyles" @click="onHelpIconClick">
diff --git a/src/components/HelpModal.vue b/src/components/HelpModal.vue
index 57ae90e..506a1d8 100644
--- a/src/components/HelpModal.vue
+++ b/src/components/HelpModal.vue
@@ -25,7 +25,7 @@
 							<p class="text-sm md:max-w-[4cm]">
 								Each dot is a <strong>node</strong>, and represents a <strong>taxon</strong>,
 								which might be a species, genus, or otherwise. The top node is the
-								<strong>root</strong>, and those without children are <strong>leaves</strong>.
+								<strong>root</strong>, and those at the bottom are <strong>leaves</strong>.
 							</p>
 						</div>
 						<p>
@@ -53,7 +53,7 @@
 					<div :class="contentClasses">
 						<p>
 							Tilo attempts to display the Tree of Life by representing nodes with tiles,
-							and placing tiles within other tiles to show tree structure.
+							and placing tiles within other tiles to show structure.
 						</p>
 						<img src="data:," width="400" height="200" alt="Tree with Tile layout"
 							class="border border-black block mx-auto mt-2"/>
diff --git a/src/components/IconButton.vue b/src/components/IconButton.vue
index 0294c5b..5684fb0 100644
--- a/src/components/IconButton.vue
+++ b/src/components/IconButton.vue
@@ -1,7 +1,6 @@
 <template>
-<div class="p-2 rounded-full hover:cursor-pointer"
-	:class="{'hover:brightness-125': !disabled, 'brightness-50': disabled}"
-	:style="{width: size + 'px', height: size + 'px', padding: (size / 5) + 'px'}">
+<div :style="styles" class="p-2 rounded-full hover:cursor-pointer"
+	:class="{'hover:brightness-125': !disabled, 'brightness-50': disabled}">
 	<slot class="w-full h-full">?</slot>
 </div>
 </template>
@@ -14,5 +13,16 @@ export default defineComponent({
 		size: {type: Number, default: 36},
 		disabled: {type: Boolean, default: false},
 	},
+	computed: {
+		styles(): Record<string,string> {
+			return {
+				minWidth: this.size + 'px',
+				maxWidth: this.size + 'px',
+				minHeight: this.size + 'px',
+				maxHeight: this.size + 'px',
+				padding: (this.size / 5) + 'px',
+			};
+		},
+	},
 });
 </script>
diff --git a/src/components/TileInfoModal.vue b/src/components/TileInfoModal.vue
index 29901ee..8c2363b 100644
--- a/src/components/TileInfoModal.vue
+++ b/src/components/TileInfoModal.vue
@@ -36,10 +36,9 @@
 					</a>
 					<s-collapsible class="text-sm text-center max-w-full md:max-w-[200px] mx-auto">
 						<template v-slot:summary="slotProps">
-							<div class="py-1">
-								<down-icon class="inline-block w-4 h-4 transition-transform duration-300"
-									:class="{'-rotate-90': !slotProps.collapsed}"/>
-								Source Information
+							<div class="py-1 hover:underline">
+								<down-icon class="inline-block w-4 h-4 mr-1 transition-transform duration-300"
+									:class="{'-rotate-90': !slotProps.collapsed}"/>Source Information
 							</div>
 						</template>
 						<template v-slot:content>
@@ -82,9 +81,8 @@
 				<div v-if="descInfos[idx]! != null">
 					<div>{{descInfos[idx]!.text}}</div>
 					<div class="text-sm text-right">
-						From
 						<a :href="'https://en.wikipedia.org/?curid=' + descInfos[idx]!.wikiId"
-							target="_blank">Wikipedia</a>
+							target="_blank">From Wikipedia</a>
 						<external-link-icon class="inline-block w-3 h-3 ml-1"/>
 						{{descInfos[idx]!.fromDbp ? '(via DBpedia)' : ''}}
 					</div>
diff --git a/src/components/TutorialPane.vue b/src/components/TutorialPane.vue
index 430db8a..0734d0b 100644
--- a/src/components/TutorialPane.vue
+++ b/src/components/TutorialPane.vue
@@ -7,8 +7,7 @@
 	</h1>
 	<transition name="fade" mode="out-in">
 		<div v-if="stage == 0" :style="contentStyles">
-			This is a visualiser for the biological Tree of Life. For more information,
-			<a href="#" :style="{color: uiOpts.altColor}">{{touchDevice ? 'tap' : 'click'}} here</a>.
+			This site provides a visualisation for the biological Tree of Life.
 		</div>
 		<div v-else-if="stage == 1" :style="contentStyles">
 			{{touchDevice ? 'Tap' : 'Click'}} a tile to expand it and show it's children