diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/HelpModal.vue | 4 | ||||
| -rw-r--r-- | src/components/IconButton.vue | 16 | ||||
| -rw-r--r-- | src/components/TileInfoModal.vue | 10 | ||||
| -rw-r--r-- | src/components/TutorialPane.vue | 3 |
4 files changed, 20 insertions, 13 deletions
diff --git a/src/components/HelpModal.vue b/src/components/HelpModal.vue index 57ae90e..506a1d8 100644 --- a/src/components/HelpModal.vue +++ b/src/components/HelpModal.vue @@ -25,7 +25,7 @@ <p class="text-sm md:max-w-[4cm]"> Each dot is a <strong>node</strong>, and represents a <strong>taxon</strong>, which might be a species, genus, or otherwise. The top node is the - <strong>root</strong>, and those without children are <strong>leaves</strong>. + <strong>root</strong>, and those at the bottom are <strong>leaves</strong>. </p> </div> <p> @@ -53,7 +53,7 @@ <div :class="contentClasses"> <p> Tilo attempts to display the Tree of Life by representing nodes with tiles, - and placing tiles within other tiles to show tree structure. + and placing tiles within other tiles to show structure. </p> <img src="data:," width="400" height="200" alt="Tree with Tile layout" class="border border-black block mx-auto mt-2"/> diff --git a/src/components/IconButton.vue b/src/components/IconButton.vue index 0294c5b..5684fb0 100644 --- a/src/components/IconButton.vue +++ b/src/components/IconButton.vue @@ -1,7 +1,6 @@ <template> -<div class="p-2 rounded-full hover:cursor-pointer" - :class="{'hover:brightness-125': !disabled, 'brightness-50': disabled}" - :style="{width: size + 'px', height: size + 'px', padding: (size / 5) + 'px'}"> +<div :style="styles" class="p-2 rounded-full hover:cursor-pointer" + :class="{'hover:brightness-125': !disabled, 'brightness-50': disabled}"> <slot class="w-full h-full">?</slot> </div> </template> @@ -14,5 +13,16 @@ export default defineComponent({ size: {type: Number, default: 36}, disabled: {type: Boolean, default: false}, }, + computed: { + styles(): Record<string,string> { + return { + minWidth: this.size + 'px', + maxWidth: this.size + 'px', + minHeight: this.size + 'px', + maxHeight: this.size + 'px', + padding: (this.size / 5) + 'px', + }; + }, + }, }); </script> diff --git a/src/components/TileInfoModal.vue b/src/components/TileInfoModal.vue index 29901ee..8c2363b 100644 --- a/src/components/TileInfoModal.vue +++ b/src/components/TileInfoModal.vue @@ -36,10 +36,9 @@ </a> <s-collapsible class="text-sm text-center max-w-full md:max-w-[200px] mx-auto"> <template v-slot:summary="slotProps"> - <div class="py-1"> - <down-icon class="inline-block w-4 h-4 transition-transform duration-300" - :class="{'-rotate-90': !slotProps.collapsed}"/> - Source Information + <div class="py-1 hover:underline"> + <down-icon class="inline-block w-4 h-4 mr-1 transition-transform duration-300" + :class="{'-rotate-90': !slotProps.collapsed}"/>Source Information </div> </template> <template v-slot:content> @@ -82,9 +81,8 @@ <div v-if="descInfos[idx]! != null"> <div>{{descInfos[idx]!.text}}</div> <div class="text-sm text-right"> - From <a :href="'https://en.wikipedia.org/?curid=' + descInfos[idx]!.wikiId" - target="_blank">Wikipedia</a> + target="_blank">From Wikipedia</a> <external-link-icon class="inline-block w-3 h-3 ml-1"/> {{descInfos[idx]!.fromDbp ? '(via DBpedia)' : ''}} </div> diff --git a/src/components/TutorialPane.vue b/src/components/TutorialPane.vue index 430db8a..0734d0b 100644 --- a/src/components/TutorialPane.vue +++ b/src/components/TutorialPane.vue @@ -7,8 +7,7 @@ </h1> <transition name="fade" mode="out-in"> <div v-if="stage == 0" :style="contentStyles"> - This is a visualiser for the biological Tree of Life. For more information, - <a href="#" :style="{color: uiOpts.altColor}">{{touchDevice ? 'tap' : 'click'}} here</a>. + This site provides a visualisation for the biological Tree of Life. </div> <div v-else-if="stage == 1" :style="contentStyles"> {{touchDevice ? 'Tap' : 'Click'}} a tile to expand it and show it's children |