From 39792d870ed213b45b43d2cc38cf78f6ae94b137 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Thu, 24 Mar 2022 16:39:33 +1100
Subject: Propagate options to TileInfoModal

---
 src/components/TileInfoModal.vue | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

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

diff --git a/src/components/TileInfoModal.vue b/src/components/TileInfoModal.vue
index c7e0d64..8b96ebb 100644
--- a/src/components/TileInfoModal.vue
+++ b/src/components/TileInfoModal.vue
@@ -5,6 +5,7 @@ import {TolNode} from '../lib';
 export default defineComponent({
 	props: {
 		tolNode: {type: Object as PropType<TolNode | null>}, // The node to display, or null to hide
+		options: {type: Object, required: true},
 	},
 	data(){
 		return {
@@ -24,17 +25,17 @@ export default defineComponent({
 				visibility: this.tolNode != null ? 'visible' : 'hidden',
 				opacity: this.tolNode != null ? '1' : '0',
 				transition: 'visibility, opacity',
-				transitionDuration: '300ms',
+				transitionDuration: this.options.transitionDuration + 'ms',
 			};
 		},
 		imgStyles(): Record<string,string> {
 			return {
 				backgroundImage: this.lastNode == null ? 'none' :
 					'url(\'/img/' + this.lastNode.name.replaceAll('\'', '\\\'') + '.png\')',
-				width: '200px',
-				height: '200px',
+				width: this.options.infoModalImgSz + 'px',
+				height: this.options.infoModalImgSz + 'px',
 				backgroundSize: 'cover',
-				borderRadius: '5px',
+				borderRadius: this.options.borderRadius + 'px',
 			}
 		},
 	},
@@ -51,7 +52,7 @@ export default defineComponent({
 
 <template>
 <div :style="transitionStyles" class="fixed left-0 top-0 w-full h-full bg-black/40" @click="closeIconClicked">
-	<div class="absolute left-1/2 -translate-x-1/2 w-4/5 top-1/3 p-4 bg-stone-50 rounded-md">
+	<div class="absolute left-1/2 -translate-x-1/2 w-4/5 top-1/2 -translate-y-1/2 p-4 bg-stone-50 rounded-md">
 		<div class="absolute top-2 right-2 w-[24px] h-[24px] [font-size:24px] [line-height:24px] text-center
 				font-bold hover:cursor-pointer"
 			@click="closeIconClicked" ref="closeIcon">&times;</div>
-- 
cgit v1.2.3

