diff options
| -rw-r--r-- | src/App.vue | 9 | ||||
| -rw-r--r-- | src/components/HelpModal.vue | 135 |
2 files changed, 143 insertions, 1 deletions
diff --git a/src/App.vue b/src/App.vue index 8ca2f95..960e648 100644 --- a/src/App.vue +++ b/src/App.vue @@ -5,7 +5,7 @@ <h1 class="my-auto ml-2 text-4xl" :style="{color: store.color.altDark}">Histplorer</h1> <div class="mx-auto"/> <!-- Spacer --> <!-- Icons --> - <icon-button :size="45" :style="buttonStyles"> + <icon-button :size="45" :style="buttonStyles" @click="helpOpen = true" title="Show help info"> <help-icon/> </icon-button> <icon-button :size="45" :style="buttonStyles" @click="settingsOpen = true" title="Show settings"> @@ -40,6 +40,9 @@ <transition name="fade"> <settings-modal v-if="settingsOpen" @close="settingsOpen = false"/> </transition> + <transition name="fade"> + <help-modal v-if="helpOpen" @close="helpOpen = false"/> + </transition> </div> </template> @@ -51,6 +54,7 @@ import BaseLine from './components/BaseLine.vue'; import InfoModal from './components/InfoModal.vue'; import SearchModal from './components/SearchModal.vue'; import SettingsModal from './components/SettingsModal.vue'; +import HelpModal from './components/HelpModal.vue'; import IconButton from './components/IconButton.vue'; // Icons import HelpIcon from './components/icon/HelpIcon.vue'; @@ -323,6 +327,9 @@ function onSearch(event: HistEvent){ // For settings modal const settingsOpen = ref(false); +// For help modal +const helpOpen = ref(false); + // For resize handling let lastResizeHdlrTime = 0; // Used to throttle resize handling let afterResizeHdlr = 0; // Used to trigger handler after ending a run of resize events diff --git a/src/components/HelpModal.vue b/src/components/HelpModal.vue new file mode 100644 index 0000000..34a8bd3 --- /dev/null +++ b/src/components/HelpModal.vue @@ -0,0 +1,135 @@ +<template> +<div class="fixed left-0 top-0 w-full h-full bg-black/40" @click="onClose" ref="rootRef"> + <div class="absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 + w-[90%] max-w-[16cm] max-h-[80%] overflow-auto" :style="styles"> + <close-icon @click.stop="onClose" ref="closeRef" + class="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 pt-2 pb-1">Help</h1> + <p class="px-4"> + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. + </p> + <div class="flex flex-col gap-2 p-2"> + <s-collapsible :class="scClasses"> + <template #summary="slotProps"> + <div :class="scSummaryClasses"> + <down-icon :class="slotProps.open ? downIconExpandedClasses : downIconClasses"/> + Licensing and Credits + </div> + </template> + <template #content> + <div :class="contentClasses"> + <p>Source code is available on GitHub, under the MIT Licence.</p> + <h1 class="text-lg font-bold">Data Sources</h1> + <ul class="list-disc pl-4"> + <li> + The short descriptions, the remaining images, and other data, + were obtained from the + <a href="https://dumps.wikimedia.org/wikidatawiki/entities/" :style="aStyles"> + Wikidata dump</a>. + Wikipedia page content is available under + <a href="https://creativecommons.org/licenses/by-sa/3.0/" :style="aStyles" + >CC BY-SA 3.0</a>. + </li> + </ul> + <br/> + <h1 class="text-lg font-bold">Other Credits</h1> + <ul class="list-disc pl-4"> + <li> + The UI was mostly coded in + <a href="https://www.typescriptlang.org/" :style="aStyles">Typescript</a>, + and built wth <a href="https://vuejs.org/" :style="aStyles">Vue</a>, + <a href="https://vitejs.dev/" :style="aStyles">Vite</a> & + <a href="https://pinia.vuejs.org/" :style="aStyles">Pinia</a> + </li> + <li> + Tree data was processed using + <a href="https://www.python.org/" :style="aStyles">Python</a>, + and stored using + <a href="https://www.sqlite.org/index.html" :style="aStyles">Sqlite</a> + </li> + <li> + Styling was enhanced using + <a href="https://tailwindcss.com/" :style="aStyles">Tailwind</a> + </li> + <li> + The font is <a href="https://design.ubuntu.com/font/" :style="aStyles">Ubuntu Font</a>, + licensed under + <a href="https://ubuntu.com/legal/font-licence" + :style="aStyles">Ubuntu font licence</a> + </li> + <li>Icons were used from + <a href="https://feathericons.com/" :style="aStyles">Feathericons</a> + and <a href="https://ionic.io/ionicons" :style="aStyles">Ionicons</a>, + both under MIT License + </li> + <li> + Images were cropped using + <a href="https://github.com/jwagner/smartcrop.js" :style="aStyles">Smartcrop</a> + </li> + </ul> + </div> + </template> + </s-collapsible> + <s-collapsible :class="scClasses"> + <template #summary="slotProps"> + <div :class="scSummaryClasses"> + <down-icon :class="slotProps.open ? downIconExpandedClasses : downIconClasses"/> + FAQs + </div> + </template> + <template #content> + <div :class="contentClasses"> + <h1 class="text-lg font-bold">Test Question</h1> + <p>Test Answer.</p> + <br/> + <h1 class="text-lg font-bold">Test Question</h1> + <p>Test Answer.</p> + </div> + </template> + </s-collapsible> + </div> + </div> +</div> +</template> + +<script setup lang="ts"> +import {ref, computed} 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 {useStore} from '../store'; + +// Refs +const rootRef = ref(null as HTMLDivElement | null) +const closeRef = ref(null as typeof CloseIcon | null); + +// Global store +const store = useStore(); + +// Props + events +const emit = defineEmits(['close']); + +// Event handlers +function onClose(evt: Event){ + if (evt.target == rootRef.value || closeRef.value!.$el.contains(evt.target)){ + emit('close'); + } +} + +// Styles +const styles = computed(() => ({ + backgroundColor: store.color.bgAlt, + borderRadius: store.borderRadius + 'px', +})); +const aStyles = computed(() => ({ + color: store.color.altDark, +})); + +// Classes +const scClasses = 'border border-stone-400 rounded'; +const scSummaryClasses = 'relative text-center p-1 bg-stone-300 hover:brightness-90 hover:bg-yellow-200 md:p-2'; +const downIconClasses = 'absolute w-6 h-6 my-auto mx-1 transition-transform duration-300'; +const downIconExpandedClasses = computed(() => downIconClasses + ' -rotate-90'); +const contentClasses = 'py-2 px-2 text-sm md:text-base'; +</script> |