diff options
| -rw-r--r-- | src/App.vue | 2 | ||||
| -rw-r--r-- | src/components/AncestryBar.vue | 9 | ||||
| -rw-r--r-- | src/components/TileInfoModal.vue | 2 |
3 files changed, 7 insertions, 6 deletions
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"> |