diff options
Diffstat (limited to 'src/components/HelpModal.vue')
| -rw-r--r-- | src/components/HelpModal.vue | 39 |
1 files changed, 26 insertions, 13 deletions
diff --git a/src/components/HelpModal.vue b/src/components/HelpModal.vue index f2ae8a4..f410d42 100644 --- a/src/components/HelpModal.vue +++ b/src/components/HelpModal.vue @@ -6,24 +6,35 @@ 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> + <s-collapsible class="border border-stone-400 rounded"> + <template v-slot:summary="slotProps"> + <div class="p-1 text-center" + :style="{backgroundColor: !slotProps.collapsed ? 'gray' : 'transparent'}"> + <down-icon class="inline-block w-5 h-5 transition-transform duration-300" + :class="{'-rotate-90': slotProps.collapsed}"/> + Summary text + </div> + </template> + <template v-slot:content> + <div class="p-1"> + 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. + </div> + </template> + </s-collapsible> <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 + <li>Visualising the Tree (OneZoom, iTol) (tile layout, )</li> + <li>Using Tilo (tutorial) + (leaf header colors, asterisk, compound nodes/names/images, overflown-root, ) (settings: layout methods, reduced trees, click-label-to-reset) (keyboard shortcuts) </li> + <li>Data sources (OTOL, EOL, Wikipedia) (imprecision: tree, names, images, descs, )</li> <li>Project page, error contact, other credits (feathericons, ionicons), </li> </ul> </div> @@ -38,7 +49,9 @@ <script lang="ts"> import {defineComponent, PropType} from 'vue'; import SButton from './SButton.vue'; +import SCollapsible from './SCollapsible.vue'; import CloseIcon from './icon/CloseIcon.vue'; +import DownIcon from './icon/DownIcon.vue'; import {UiOptions} from '../lib'; export default defineComponent({ @@ -66,7 +79,7 @@ export default defineComponent({ this.$emit('close'); }, }, - components: {SButton, CloseIcon, }, + components: {SButton, SCollapsible, CloseIcon, DownIcon, }, emits: ['close', 'start-tutorial', ], }); </script> |