From e3a86973922fa9370900f2e3b07a78222e44b056 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Wed, 29 Jun 2022 14:49:01 +1000
Subject: Remove constant-scrollbar-gap for ancestry-bar

Avoided having overflow:auto cause tile-overlapping scrollbar by
using less tile-padding. Trying to solve this by dynamically
detecting overflow seemed to get messy.
---
 src/App.vue                      | 2 +-
 src/components/AncestryBar.vue   | 9 +++++----
 src/components/TileInfoModal.vue | 2 +-
 3 files changed, 7 insertions(+), 6 deletions(-)

(limited to 'src')

diff --git a/src/App.vue b/src/App.vue
index d16ad68..7fca4c5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -149,7 +149,7 @@ function getDefaultUiOpts(lytOpts: LayoutOptions): UiOptions {
 		nonleafHeaderColor: bgColorDark,
 		ancestryBarBgColor: bgColorLight,
 		// Component sizing
-		ancestryBarBreadth: lytOpts.maxTileSz / 2 + lytOpts.tileSpacing*2 + scrollGap, // px
+		ancestryBarBreadth: lytOpts.maxTileSz / 2 + lytOpts.tileSpacing*2, // px
 		tutPaneSz: 200, // px
 		scrollGap,
 		// Timing related
diff --git a/src/components/AncestryBar.vue b/src/components/AncestryBar.vue
index 204798b..c2aadf8 100644
--- a/src/components/AncestryBar.vue
+++ b/src/components/AncestryBar.vue
@@ -23,7 +23,7 @@ export default defineComponent({
 	},
 	computed: {
 		imgSz(){
-			return this.uiOpts.ancestryBarBreadth - this.lytOpts.tileSpacing*2 - this.uiOpts.scrollGap;
+			return this.uiOpts.ancestryBarBreadth - this.lytOpts.tileSpacing - this.uiOpts.scrollGap;
 		},
 		dummyNodes(){ // Childless versions of 'nodes' used to parameterise <tile>s
 			return this.nodes.map(n => {
@@ -37,10 +37,11 @@ export default defineComponent({
 				// For child layout
 				display: 'flex',
 				flexDirection: this.vert ? 'column' : 'row',
+				alignItems: 'center',
 				gap: this.lytOpts.tileSpacing + 'px',
 				padding: this.lytOpts.tileSpacing + 'px',
-				overflowX: this.vert ? 'hidden' : 'scroll',
-				overflowY: this.vert ? 'scroll' : 'hidden',
+				overflowX: this.vert ? 'hidden' : 'auto',
+				overflowY: this.vert ? 'auto' : 'hidden',
 				// Other
 				backgroundColor: this.uiOpts.ancestryBarBgColor,
 				boxShadow: this.uiOpts.shadowNormal,
@@ -50,7 +51,7 @@ export default defineComponent({
 	watch: {
 		// Used to scroll to end of bar upon node/screen changes
 		nodes(){
-			setTimeout(() => this.scrollToEnd(), 0); // Without timeout, seems to run before new tiles are added
+			this.$nextTick(() => this.scrollToEnd()); // Without timeout, seems to run before new tiles are added
 		},
 		vert(){
 			setTimeout(() => this.scrollToEnd(), 0);
diff --git a/src/components/TileInfoModal.vue b/src/components/TileInfoModal.vue
index 274f54f..c7b6305 100644
--- a/src/components/TileInfoModal.vue
+++ b/src/components/TileInfoModal.vue
@@ -20,7 +20,7 @@
 			<div class="flex gap-1">
 				<div class="w-1/2">
 					<div v-if="imgInfos[idx] == null" :style="getImgStyles(nodes[idx])"/>
-					<a v-else :href="imgInfos[idx].url" target="_blank">
+					<a v-else :href="imgInfos[idx]!.url" target="_blank">
 						<div :style="getImgStyles(nodes[idx])"/>
 					</a>
 					<ul v-if="imgInfos[idx]! != null">
-- 
cgit v1.2.3