diff options
| -rw-r--r-- | src/components/Tile.vue | 20 | ||||
| -rw-r--r-- | src/components/TutorialPane.vue | 10 | ||||
| -rw-r--r-- | src/lib.ts | 4 |
3 files changed, 20 insertions, 14 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"> @@ -118,7 +118,7 @@ export function getDefaultLytOpts(): LayoutOptions { let screenSz = getBreakpoint(); return { tileSpacing: screenSz == 'sm' ? 6 : 9, //px - headerSz: screenSz == 'sm' ? 18 : 22, // px + headerSz: 22, // px minTileSz: 50, // px maxTileSz: 200, // px // Layout-algorithm related @@ -127,7 +127,7 @@ export function getDefaultLytOpts(): LayoutOptions { rectSensitivity: 0.9, // Between 0 and 1 sweepMode: 'left', // 'left' | 'top' | 'shorter' | 'auto' sweptNodesPrio: 'sqrt', // 'linear' | 'sqrt' | 'pow-2/3' - sweepToParent: 'fallback', // 'none' | 'prefer' | 'fallback' + sweepToParent: screenSz == 'sm' ? 'prefer' : 'fallback', // 'none' | 'prefer' | 'fallback' }; } export function getDefaultUiOpts(lytOpts: LayoutOptions): UiOptions { |