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 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

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

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 {
-- 
cgit v1.2.3