From b8694f56d687307c64ba6775f9f0d4c064a2669a Mon Sep 17 00:00:00 2001 From: Terry Truong Date: Sat, 2 Jul 2022 15:26:22 +1000 Subject: Adjust tutorial content --- src/App.vue | 21 +++++++++++---------- src/components/Tile.vue | 2 +- src/components/TutorialPane.vue | 42 ++++++++++++++++++++++++++--------------- src/index.css | 3 +++ src/lib.ts | 2 +- 5 files changed, 43 insertions(+), 27 deletions(-) (limited to 'src') diff --git a/src/App.vue b/src/App.vue index e368342..68888ee 100644 --- a/src/App.vue +++ b/src/App.vue @@ -2,22 +2,22 @@
-
-

Tilo (prototype)

+
+

Tilo

- - + + + + + - + - - - - - + +
@@ -219,6 +219,7 @@ export default defineComponent({ } else { return { height: this.uiOpts.tutPaneSz + 'px', + minWidth: '10cm', maxWidth: '10cm', borderRadius: this.uiOpts.borderRadius + 'px', boxShadow: '0 0 3px black', diff --git a/src/components/Tile.vue b/src/components/Tile.vue index 76ff645..9b43467 100644 --- a/src/components/Tile.vue +++ b/src/components/Tile.vue @@ -56,7 +56,7 @@ import {LayoutNode, LayoutOptions} from '../layout'; import {getImagePath, UiOptions} from '../lib'; import {capitalizeWords} from '../util'; -const scrimGradient = 'linear-gradient(to bottom, rgba(0,0,0,0.4), #0000 40%)'; +const scrimGradient = 'linear-gradient(to bottom, rgba(0,0,0,0.4), #0000 40%, #0000 60%, rgba(0,0,0,0.2) 100%)'; export default defineComponent({ props: { diff --git a/src/components/TutorialPane.vue b/src/components/TutorialPane.vue index f8efc61..289f386 100644 --- a/src/components/TutorialPane.vue +++ b/src/components/TutorialPane.vue @@ -2,44 +2,52 @@

- {{stage == 0 ? 'Welcome' : `Tutorial (${stage} / ${lastStage})`}} + {{stage == 0 ? 'Welcome' : `Tutorial (Step ${stage} of ${lastStage})`}}

- This page provides a visualisation of the biological Tree of Life. - It is unfinished, and is just here for testing. + This is a visualiser for the biological Tree of Life. For more information, + {{touchDevice ? 'tap' : 'click'}} here.
- Clicking/touching a tile expands it and shows it's children. + {{touchDevice ? 'Tap' : 'Click'}} a tile to expand it and show it's children
- Clicking on an expanded tile's header shrinks it back. + {{touchDevice ? 'Tap' : 'Click'}} an expanded tile's header to shrink it
- Clicking and holding on a tile makes it fill the view, and moves it's - ancestors to a sidebar. The same thing applies for an expanded tile's header. + {{touchDevice ? 'Double tap' : 'Click and hold'}} a tile to hide it's ancestors + + For an expanded tile, use the header +
- Clicking on a tile in the sidebar brings it back into the main view. + {{touchDevice ? 'Tap' : 'Click'}} a tile in the sidebar to unhide it
- Clicking on the icon at a tile's bottom-right, or at the right of - an expanded tile's header, brings up more information. + {{touchDevice ? 'Tap' : 'Click'}} the icon on a tile's bottom-right to + bring up more information + + For an expanded tile, it's at the header's right +
- You can search using the icon at the top-right. Alternatively, press Ctrl-F. + {{touchDevice ? 'Tap' : 'Click'}} the icon at the top-right to search + + Or press Ctrl-F +
- You can use the play icon to enable 'Auto Mode'. + {{touchDevice ? 'Tap' : 'Click'}} the play icon to start Auto Mode
- The settings icon allows adjusting the layout, animation speed, etc. + {{touchDevice ? 'Tap' : 'Click'}} the settings icon
- And finally, the help icon provides more information. + And finally, tap the help icon for more information
@@ -101,6 +109,7 @@ export default defineComponent({ maxWidth: '15cm', margin: '0 auto', overflow: 'auto', + textAlign: 'center', }; }, buttonStyles(): Record { @@ -108,7 +117,10 @@ export default defineComponent({ color: this.uiOpts.textColor, backgroundColor: this.uiOpts.bgColor, }; - }, + }, + touchDevice(): boolean { + return this.uiOpts.touchDevice; + }, }, watch: { stage(newVal, oldVal){ diff --git a/src/index.css b/src/index.css index ffd7dda..5987443 100644 --- a/src/index.css +++ b/src/index.css @@ -10,6 +10,9 @@ body { font-family: Ubuntu, system-ui, sans-serif; touch-action: manipulation; /* Prevents non-standard gestures such as double-tap to zoom */ } +a { + @apply hover:underline hover:cursor-pointer; +} /* For transitions/animations */ .fade-enter-from, .fade-leave-to { diff --git a/src/lib.ts b/src/lib.ts index 06df78b..73c4c03 100644 --- a/src/lib.ts +++ b/src/lib.ts @@ -158,7 +158,7 @@ export function getDefaultUiOpts(lytOpts: LayoutOptions): UiOptions { ancestryBarBgColor: bgColorLight, // Component sizing ancestryBarBreadth: lytOpts.maxTileSz / 2 + lytOpts.tileSpacing*2, // px - tutPaneSz: 200, // px + tutPaneSz: 180, // px scrollGap, // Timing related clickHoldDuration: 400, // ms -- cgit v1.2.3