From 11caeefa4a3de21a20e66795f0ed06b0df692234 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Wed, 6 Jul 2022 20:54:01 +1000
Subject: Add somewhat-dynamic font-sizes in headers

---
 src/components/Tile.vue         | 20 +++++++++++++-------
 src/components/TutorialPane.vue | 10 +++++-----
 2 files changed, 18 insertions(+), 12 deletions(-)

(limited to 'src/components')

diff --git a/src/components/Tile.vue b/src/components/Tile.vue
index 9c9fdfa..0511596 100644
--- a/src/components/Tile.vue
+++ b/src/components/Tile.vue
@@ -162,7 +162,14 @@ export default defineComponent({
 			}
 		},
 		fontSz(): number {
-			return 0.8 * this.lytOpts.headerSz;
+			// These values are a compromise between dynamic font size and code simplicity
+			if (this.layoutNode.dims[0] >= 150){
+				return this.lytOpts.headerSz * 0.8;
+			} else if (this.layoutNode.dims[0] >= 80){
+				return this.lytOpts.headerSz * 0.7;
+			} else {
+				return this.lytOpts.headerSz * 0.6;
+			}
 		},
 		styles(): Record<string,string> {
 			let layoutStyles = {
@@ -234,12 +241,10 @@ export default defineComponent({
 					break;
 				}
 			}
-			let screenSz = this.uiOpts.breakpoint;
 			return {
-				height: this.lytOpts.headerSz + 'px',
-				padding: `0 ${(this.lytOpts.headerSz - this.fontSz)}px`,
-				lineHeight: this.lytOpts.headerSz + 'px',
+				lineHeight: (this.fontSz * 1.3) + 'px',
 				fontSize: this.fontSz + 'px',
+				paddingLeft: (this.fontSz * 0.2) + 'px',
 				color: textColor,
 				// For ellipsis
 				overflow: 'hidden',
@@ -289,8 +294,9 @@ export default defineComponent({
 		},
 		nonleafHeaderTextStyles(): Record<string,string> {
 			return {
-				lineHeight: this.lytOpts.headerSz + 'px',
+				lineHeight: (this.fontSz * 1.3) + 'px',
 				fontSize: this.fontSz + 'px',
+				paddingLeft: (this.fontSz * 0.2) + 'px',
 				textAlign: 'center',
 				color: this.uiOpts.textColor,
 				// For ellipsis
@@ -351,7 +357,7 @@ export default defineComponent({
 				height: size + 'px',
 				minWidth: size + 'px',
 				minHeight: size + 'px',
-				margin: this.isLeaf ? `auto ${marginSz}px ${marginSz}px auto` : `auto ${marginSz}px`,
+				margin: this.isLeaf ? `auto ${marginSz}px ${marginSz}px auto` : `auto ${marginSz}px auto 0`,
 			};
 		},
 		infoIconClasses(): string {
diff --git a/src/components/TutorialPane.vue b/src/components/TutorialPane.vue
index 3593a79..9a27dd1 100644
--- a/src/components/TutorialPane.vue
+++ b/src/components/TutorialPane.vue
@@ -7,18 +7,18 @@
 	</h1>
 	<transition name="fade" mode="out-in">
 		<div v-if="stage == 0" :style="contentStyles">
-			This site provides a visualisation for the biological Tree of Life.
+			This is a visualiser for exploring 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
+			{{touchDevice ? 'Tap' : 'Click'}} a tile to expand it, showing it's children
 		</div>
 		<div v-else-if="stage == 2" :style="contentStyles">
-			{{touchDevice ? 'Tap' : 'Click'}} an expanded tile's header to shrink it
+			{{touchDevice ? 'Tap' : 'Click'}} an expanded tile's title to shrink it
 		</div>
 		<div v-else-if="stage == 3" :style="contentStyles">
 			{{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
+				For an expanded tile, {{touchDevice ? 'double tap' : 'click and hold'}} it's title
 			</span>
 		</div>
 		<div v-else-if="stage == 4" :style="contentStyles">
@@ -28,7 +28,7 @@
 			{{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 on the header's right
+				For an expanded tile, it's to the right of the title
 			</span>
 		</div>
 		<div v-else-if="stage == 6" :style="contentStyles">
-- 
cgit v1.2.3