diff options
Diffstat (limited to 'src/components/HelpModal.vue')
| -rw-r--r-- | src/components/HelpModal.vue | 51 |
1 files changed, 28 insertions, 23 deletions
diff --git a/src/components/HelpModal.vue b/src/components/HelpModal.vue index 7a18c05..f2ae8a4 100644 --- a/src/components/HelpModal.vue +++ b/src/components/HelpModal.vue @@ -1,30 +1,34 @@ <template> <div class="fixed left-0 top-0 w-full h-full bg-black/40" @click="onClose"> - <div class="absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 w-4/5 p-4" :style="styles"> + <div class="absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 + w-4/5 max-w-[20cm] max-h-[80%] overflow-auto" :style="styles"> <close-icon @click.stop="onClose" ref="closeIcon" - class="block absolute top-2 right-2 w-6 h-6 hover:cursor-pointer"/> - <h1 class="text-center text-xl font-bold mb-2">Help Info</h1> - <hr class="mb-4 border-stone-400"/> - <div class="mb-4"> - Lorem ipsum dolor sit amet, consectetur adipiscing - elit, sed do eiusmod tempor incididunt ut labore - et dolore magna aliqua. Ut enim ad minim veniam, - quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. + class="block absolute top-1 right-1 md:top-2 md:right-2 w-8 h-8 hover:cursor-pointer"/> + <h1 class="text-center text-xl font-bold py-2 border-b border-stone-400">Help</h1> + <div class="p-2 border-b border-stone-400"> + <div> + Lorem ipsum dolor sit amet, consectetur adipiscing + elit, sed do eiusmod tempor incididunt ut labore + et dolore magna aliqua. + </div> + <ul class="list-disc ml-3"> + <li>What is the Tree of Life? ('tips', )</li> + <li>Representing the Tree + (OneZoom, iTol) + (tile layout, overflown-root, ) + (leaf header colors, asterisk, compound nodes/names/images, ) + </li> + <li>Data sources (OTOL, EOL, Wikipedia) (imprecision: tree, names, images, descs, )</li> + <li>Using tilo + (tutorial) + (settings: layout methods, reduced trees, click-label-to-reset) + (keyboard shortcuts) + </li> + <li>Project page, error contact, other credits (feathericons, ionicons), </li> + </ul> </div> - <div> - Lorem ipsum dolor sit amet, consectetur adipiscing - elit, sed do eiusmod tempor incididunt ut labore - et dolore magna aliqua. Ut enim ad minim veniam, - quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. Duis aute irure - dolor in reprehenderit in voluptate velit esse - cillum dolore eu fugiat nulla pariatur. Excepteur - sint occaecat cupidatat non proident, sunt - in culpa qui officia deserunt mollit anim id - est laborum. - </div> - <s-button :style="{color: uiOpts.textColor, backgroundColor: uiOpts.bgColor}" @click.stop="onStartTutorial"> + <s-button :disabled="tutOpen" class="mx-auto my-2" + :style="{color: uiOpts.textColor, backgroundColor: uiOpts.bgColor}" @click.stop="onStartTutorial"> Start Tutorial </s-button> </div> @@ -39,6 +43,7 @@ import {UiOptions} from '../lib'; export default defineComponent({ props: { + tutOpen: {type: Boolean, default: false}, uiOpts: {type: Object as PropType<UiOptions>, required: true}, }, computed: { |