diff options
| author | Terry Truong <terry06890@gmail.com> | 2022-04-25 01:33:08 +1000 |
|---|---|---|
| committer | Terry Truong <terry06890@gmail.com> | 2022-04-25 01:33:08 +1000 |
| commit | 2ab48497797441164e7f57fca2660097d93398ca (patch) | |
| tree | a6f22d3edff60d182de454359bc40beda82fb5d8 /src/components/TileInfoModal.vue | |
| parent | 23436a9ad4c2a710c7f0d49a07a720e0153d8225 (diff) | |
Adapt to handle open-tree-of-life data
Added data_otol/ with script that converts data from 'Open Tree of Life' release 13.4 into a JSON form.
Moved old tree-of-life data and images into data_tol_old/.
Added TolMap type to tol.ts, changed TolNode, and adapted other code to handle it.
Temporarily disabling tile images until image data is added.
Diffstat (limited to 'src/components/TileInfoModal.vue')
| -rw-r--r-- | src/components/TileInfoModal.vue | 9 |
1 files changed, 5 insertions, 4 deletions
diff --git a/src/components/TileInfoModal.vue b/src/components/TileInfoModal.vue index 7549375..0e2fc94 100644 --- a/src/components/TileInfoModal.vue +++ b/src/components/TileInfoModal.vue @@ -1,18 +1,19 @@ <script lang="ts"> import {defineComponent, PropType} from 'vue'; import CloseIcon from './icon/CloseIcon.vue'; -import {TolNode} from '../tol'; +import {LayoutNode} from '../layout'; // Displays information about a tree-of-life node export default defineComponent({ props: { - tolNode: {type: Object as PropType<TolNode>, required: true}, + node: {type: Object as PropType<LayoutNode>, required: true}, uiOpts: {type: Object, required: true}, }, computed: { imgStyles(): Record<string,string> { return { - backgroundImage: 'url(\'/img/' + this.tolNode.name.replaceAll('\'', '\\\'') + '.png\')', + //backgroundImage: 'url(\'/img/' + this.node.name.replaceAll('\'', '\\\'') + '.png\')', + background: 'black', width: this.uiOpts.infoModalImgSz + 'px', height: this.uiOpts.infoModalImgSz + 'px', backgroundSize: 'cover', @@ -38,7 +39,7 @@ export default defineComponent({ bg-stone-50 rounded-md shadow shadow-black"> <close-icon @click.stop="onCloseClick" ref="closeIcon" class="block absolute top-2 right-2 w-6 h-6 hover:cursor-pointer"/> - <h1 class="text-center text-xl font-bold mb-2">{{tolNode.name}}</h1> + <h1 class="text-center text-xl font-bold mb-2">{{node.name}}</h1> <hr class="mb-4 border-stone-400"/> <div :style="imgStyles" class="float-left mr-4" alt="an image"></div> <div> |