diff options
| author | Terry Truong <terry06890@gmail.com> | 2022-06-30 02:29:15 +1000 |
|---|---|---|
| committer | Terry Truong <terry06890@gmail.com> | 2022-06-30 02:29:15 +1000 |
| commit | 932d89f6f1a1d003b480b63aa80489f16910e0da (patch) | |
| tree | d4e594dc4512496723b2637bf43055f479be6f8d /src/components | |
| parent | dc6dcff2cb646e437dd57ba1270471d15ee3e3e2 (diff) | |
Add tutorial-stage transitions
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/TutorialPane.vue | 26 |
1 files changed, 13 insertions, 13 deletions
diff --git a/src/components/TutorialPane.vue b/src/components/TutorialPane.vue index b11544c..07d818a 100644 --- a/src/components/TutorialPane.vue +++ b/src/components/TutorialPane.vue @@ -7,18 +7,12 @@ <close-icon @click.stop="onClose" class="block w-6 h-6 hover:cursor-pointer"/> </div> - <template v-if="stage == 0"> - <div :style="contentStyles"> + <transition name="fade" mode="out-in"> + <div v-if="stage == 0" :style="contentStyles"> This page provides a visualisation of the biological Tree of Life. It is unfinished, and is just here for testing. </div> - <div class="w-full flex justify-evenly mt-2"> - <s-button :style="buttonStyles" @click="onStartTutorial">Start Tutorial</s-button> - <s-button :style="buttonStyles" @click="onSkipTutorial">Skip</s-button> - </div> - </template> - <template v-else> - <div v-if="stage == 1" :style="contentStyles"> + <div v-else-if="stage == 1" :style="contentStyles"> Clicking/touching a tile expands it and shows it's children. </div> <div v-else-if="stage == 2" :style="contentStyles"> @@ -47,8 +41,14 @@ <div v-else-if="stage == 9" :style="contentStyles"> And finally, the help icon provides more information. </div> - <!-- Buttons --> - <div class="w-full flex justify-evenly mt-2"> + </transition> + <!-- Buttons --> + <div class="w-full flex justify-evenly mt-2"> + <template v-if="stage == 0"> + <s-button :style="buttonStyles" @click="onStartTutorial">Start Tutorial</s-button> + <s-button :style="buttonStyles" @click="onSkipTutorial">Skip</s-button> + </template> + <template v-else> <s-button v-if="hidNextPrevOnce || stage > 1" :disabled="stage == 1" @click="onPrevClick" :style="buttonStyles"> Prev @@ -57,8 +57,8 @@ @click="stage != lastStage ? onNextClick() : onClose()" :style="buttonStyles"> {{stage != lastStage ? 'Next' : 'Finish'}} </s-button> - </div> - </template> + </template> + </div> </div> </template> |