diff options
| author | Terry Truong <terry06890@gmail.com> | 2022-06-27 04:40:27 +1000 |
|---|---|---|
| committer | Terry Truong <terry06890@gmail.com> | 2022-06-27 04:40:27 +1000 |
| commit | 9038bfe5c381baf4b387270a29a8ccd5b58435a8 (patch) | |
| tree | 760b9cb8662531c79f56ab0213033481eead5e04 /src/components/HelpModal.vue | |
| parent | aa1991239a1255855791f4c5aad9ffcb6b21a2d6 (diff) | |
In .vue files, move <template> sections to top
Diffstat (limited to 'src/components/HelpModal.vue')
| -rw-r--r-- | src/components/HelpModal.vue | 67 |
1 files changed, 33 insertions, 34 deletions
diff --git a/src/components/HelpModal.vue b/src/components/HelpModal.vue index 4a6168b..7a18c05 100644 --- a/src/components/HelpModal.vue +++ b/src/components/HelpModal.vue @@ -1,5 +1,37 @@ -<script lang="ts"> +<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"> + <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. + </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"> + Start Tutorial + </s-button> + </div> +</div> +</template> +<script lang="ts"> import {defineComponent, PropType} from 'vue'; import SButton from './SButton.vue'; import CloseIcon from './icon/CloseIcon.vue'; @@ -33,36 +65,3 @@ export default defineComponent({ emits: ['close', 'start-tutorial', ], }); </script> - -<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"> - <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. - </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"> - Start Tutorial - </s-button> - </div> -</div> -</template> |
