diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/Tile.vue | 20 | ||||
| -rw-r--r-- | src/components/TutorialPane.vue | 10 |
2 files changed, 18 insertions, 12 deletions
diff --git a/src/components/Tile.vue b/src/components/Tile.vue index 9c9fdfa..0511596 100644 --- a/src/components/Tile.vue +++ b/src/components/Tile.vue @@ -162,7 +162,14 @@ export default defineComponent({ } }, fontSz(): number { - return 0.8 * this.lytOpts.headerSz; + // These values are a compromise between dynamic font size and code simplicity + if (this.layoutNode.dims[0] >= 150){ + return this.lytOpts.headerSz * 0.8; + } else if (this.layoutNode.dims[0] >= 80){ + return this.lytOpts.headerSz * 0.7; + } else { + return this.lytOpts.headerSz * 0.6; + } }, styles(): Record<string,string> { let layoutStyles = { @@ -234,12 +241,10 @@ export default defineComponent({ break; } } - let screenSz = this.uiOpts.breakpoint; return { - height: this.lytOpts.headerSz + 'px', - padding: `0 ${(this.lytOpts.headerSz - this.fontSz)}px`, - lineHeight: this.lytOpts.headerSz + 'px', + lineHeight: (this.fontSz * 1.3) + 'px', fontSize: this.fontSz + 'px', + paddingLeft: (this.fontSz * 0.2) + 'px', color: textColor, // For ellipsis overflow: 'hidden', @@ -289,8 +294,9 @@ export default defineComponent({ }, nonleafHeaderTextStyles(): Record<string,string> { return { - lineHeight: this.lytOpts.headerSz + 'px', + lineHeight: (this.fontSz * 1.3) + 'px', fontSize: this.fontSz + 'px', + paddingLeft: (this.fontSz * 0.2) + 'px', textAlign: 'center', color: this.uiOpts.textColor, // For ellipsis @@ -351,7 +357,7 @@ export default defineComponent({ height: size + 'px', minWidth: size + 'px', minHeight: size + 'px', - margin: this.isLeaf ? `auto ${marginSz}px ${marginSz}px auto` : `auto ${marginSz}px`, + margin: this.isLeaf ? `auto ${marginSz}px ${marginSz}px auto` : `auto ${marginSz}px auto 0`, }; }, infoIconClasses(): string { diff --git a/src/components/TutorialPane.vue b/src/components/TutorialPane.vue index 3593a79..9a27dd1 100644 --- a/src/components/TutorialPane.vue +++ b/src/components/TutorialPane.vue @@ -7,18 +7,18 @@ </h1> <transition name="fade" mode="out-in"> <div v-if="stage == 0" :style="contentStyles"> - This site provides a visualisation for the biological Tree of Life. + This is a visualiser for exploring 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 + {{touchDevice ? 'Tap' : 'Click'}} a tile to expand it, showing it's children </div> <div v-else-if="stage == 2" :style="contentStyles"> - {{touchDevice ? 'Tap' : 'Click'}} an expanded tile's header to shrink it + {{touchDevice ? 'Tap' : 'Click'}} an expanded tile's title to shrink it </div> <div v-else-if="stage == 3" :style="contentStyles"> {{touchDevice ? 'Double tap' : 'Click and hold'}} a tile to hide it's ancestors <span class="block text-sm brightness-50"> - For an expanded tile, use the header + For an expanded tile, {{touchDevice ? 'double tap' : 'click and hold'}} it's title </span> </div> <div v-else-if="stage == 4" :style="contentStyles"> @@ -28,7 +28,7 @@ {{touchDevice ? 'Tap' : 'Click'}} the icon on a tile's bottom-right to bring up more information <span class="block text-sm brightness-50"> - For an expanded tile, it's on the header's right + For an expanded tile, it's to the right of the title </span> </div> <div v-else-if="stage == 6" :style="contentStyles"> |