Merge 'Data Sources' and 'Project Info' help sections

2 files changed, 55 insertions, 58 deletions

diff --git a/README.md b/README.md
index 42a63e5..9fa6ab8 100644
--- a/README.md
+++ b/README.md
@@ -46,6 +46,7 @@ in `backend/data/README.md`.
     <https://nodejs.org/en/download>, which includes npm. This project was coded using version 16.
 1.  In this directory, run the command `npm install`, which install packages listed in
     package.json, creating a `node_modules` directory to hold them.
+1.  Running `npm run dev` starts the dev server.
 
 ### Server Side
 1.  If you don't have Python 3 installed, see <https://www.python.org/downloads>.
@@ -53,10 +54,12 @@ in `backend/data/README.md`.
 1.  The database used by the server is generated using scripts in `backend/data/`.
     See it's README for instructions. You'll likely need to install a few
     packages using Pip.
-1.  To run the dev server, you'll need to install jsonpickle. This can be done
-    using `python -m pip install jsonpickle`. If you want to keep the installed
-    package separate from your system's packages, it's common practice to use
-    [venv](https://docs.python.org/3/tutorial/venv.html).
+1.  The dev server is started by running `./server.py` in the `backend/` directory.
+    To run it, you'll need to install jsonpickle. This can be done using
+    `python -m pip install jsonpickle`.
+
+    If you want to keep the installed package separate from your system's packages,
+    it's common practice to use [venv](https://docs.python.org/3/tutorial/venv.html).
 
 ### Running Tilo
 1.  In `backend/`, run `./server.py`, which starts a basic HTTP server that provides
diff --git a/src/components/HelpModal.vue b/src/components/HelpModal.vue
index 2c5ad41..02207a1 100644
--- a/src/components/HelpModal.vue
+++ b/src/components/HelpModal.vue
@@ -212,11 +212,19 @@
 				<template #summary="slotProps">
 					<div :class="scSummaryClasses">
 						<down-icon :class="slotProps.open ? downIconExpandedClasses : downIconClasses"/>
-						Data Sources
+						Licensing and Credits
 					</div>
 				</template>
 				<template #content>
 					<div :class="contentClasses">
+						<p>
+							Tilo's source code is available on
+							<a href="https://github.com/terry06890/tilo" :style="aStyles">GitHub</a>, under the
+							<a href="https://github.com/terry06890/tilo/blob/main/LICENCE.txt"
+								:style="aStyles">MIT Licence</a>.
+						</p>
+						<br/>
+						<h1 class="text-lg font-bold">Data Sources</h1>
 						<ul class="list-disc pl-4">
 							<li>
 								The tree structure was obtained from the
@@ -252,6 +260,45 @@
 								Images were downloaded during June 2022.
 							</li>
 						</ul>
+						<br/>
+						<h1 class="text-lg font-bold">Other Credits</h1>
+						<ul class="list-disc pl-4">
+							<li>
+								The UI was largely coded in
+								<a href="https://www.typescriptlang.org/" :style="aStyles">Typescript</a>,
+								and built using the <a href="https://vuejs.org/" :style="aStyles">Vue</a> framework
+							</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>
+							<li>
+								Thanks to
+								<a href="https://twitter.com/JosephusPaye" :style="aStyles">Josephus Paye II</a>
+								for helpful suggestions and clarifications
+							</li>
+						</ul>
 					</div>
 				</template>
 			</s-collapsible>
@@ -365,59 +412,6 @@
 					</div>
 				</template>
 			</s-collapsible>
-			<s-collapsible :class="scClasses">
-				<template #summary="slotProps">
-					<div :class="scSummaryClasses">
-						<down-icon :class="slotProps.open ? downIconExpandedClasses : downIconClasses"/>
-						Project Information
-					</div>
-				</template>
-				<template #content>
-					<div :class="contentClasses">
-						<li>Tilo's source code is available on
-							<a href="https://github.com/terry06890/tilo" :style="aStyles">GitHub</a>, under the
-							<a href="https://github.com/terry06890/tilo/blob/main/LICENCE.txt"
-								:style="aStyles">MIT Licence</a>.
-						</li>
-						<br/>
-						<h1 class="text-lg font-bold">Other Credits</h1>
-						<ul class="list-disc pl-4">
-							<li>
-								The UI was largely coded in
-								<a href="https://www.typescriptlang.org/" :style="aStyles">Typescript</a>,
-								and built using the <a href="https://vuejs.org/" :style="aStyles">Vue</a> framework
-							</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 called
-								<a href="https://design.ubuntu.com/font/" :style="aStyles">Ubuntu Font</a>
-							</li>
-							<li>Icons were obtained from
-								<a href="https://feathericons.com/" :style="aStyles">Feathericons</a>
-								and <a href="https://ionic.io/ionicons" :style="aStyles">Ionicons</a>
-							</li>
-							<li>
-								Images were cropped using
-								<a href="https://github.com/jwagner/smartcrop.js" :style="aStyles">Smartcrop</a>
-							</li>
-							<li>
-								Thanks to
-								<a href="https://twitter.com/JosephusPaye" :style="aStyles">Josephus Paye II</a>
-								for helpful suggestions and clarifications
-							</li>
-						</ul>
-					</div>
-				</template>
-			</s-collapsible>
 		</div>
 		<s-button class="mx-auto mb-2" :style="{color: uiOpts.textColor, backgroundColor: uiOpts.bgColor}"
 			:disabled="tutOpen" @click.stop="onStartTutorial">