From d5b2c3d55b614914331525801ffb38ce824a5e8f Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Fri, 6 Jan 2023 21:20:36 +1100
Subject: Add help modal

---
 src/components/HelpModal.vue | 135 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 135 insertions(+)
 create mode 100644 src/components/HelpModal.vue

(limited to 'src/components/HelpModal.vue')

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> &amp;
+								<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>
-- 
cgit v1.2.3