-
+
This handbook is a collection of tweaks of the /tg/station wiki
pages to make them prettier and easier to navigate.
@@ -71,10 +71,57 @@
not as polished as they should be.
+
+ Click any guide in the top menu to open it or
+ click here to learn about some
+ of the extra features packed in.
+
+
+
+
+
+
+
+
Jump to section/item
+
+ Press SHIFT+S on any page (except this one) to open up a
+ quick search menu.
+
+
+ Results for most pages are section titles, but some pages like
+ Chemistry have support for searching recipes etc.
+
+
+
+
+
+
+ By default, only results for the current page are shown, you can
+ use @ as prefix to search in all guides at once.
+
+
(Chemistry) Auto-Expanded tooltips
+
+ Recipes for reagent ingredients are now always shown in each
+ recipe rather than being tooltips.
+
+
(Chemistry) Beaker sizing
+
+ Press SHIFT+B to set your target reagent output and the
+ inputs will change from "part" to "ml". This is currently quite
+ inaccurate, use it as a guideline but apply common sense.
+
+
-
- Click any guide in the top menu to open it.
-
diff --git a/src/index.ts b/src/index.ts
index c1d2a10..8949296 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -5,6 +5,7 @@ import { searchBox } from "./scripts/search";
// @ts-expect-error: Parcel image import
import unknown from "~/assets/images/tab-icons/unknown.svg";
+import { bindFunctions } from "./scripts/index";
async function load() {
const sectionListContainer = document.getElementById("section-list");
@@ -36,8 +37,7 @@ async function load() {
const promises = sections.flatMap(async (section) => {
manager.createSection(section.name);
- return null;
- /*
+
return section.tabs.map(async (tab) => {
// Load page
await manager.openTab(section.name, tab.page, {
@@ -47,7 +47,6 @@ async function load() {
// Remove icon from loading
icons.removeChild(icons.querySelector(`img[data-tab=${tab.page}]`));
});
- */
});
manager.showSection("Medical");
@@ -55,9 +54,14 @@ async function load() {
// manager.createSection("Medical");
// const promises = [manager.openTab("Medical", "Infections", {})];
+ const welcome = document.getElementById("Welcome");
+ bindFunctions(welcome, "$Welcome");
+
Promise.all(promises).then(() => {
// Remove app-wide loading
manager.setLoading(false);
+
+ welcome.classList.add("active");
});
}
if ("serviceWorker" in navigator) {
diff --git a/src/scripts/index.ts b/src/scripts/index.ts
index 0c74497..da7d70f 100644
--- a/src/scripts/index.ts
+++ b/src/scripts/index.ts
@@ -2,6 +2,7 @@ import { chemistryScript, processChemistry } from "./pages/chemistry";
import { processVirology, virologyScript } from "./pages/virology";
import { genericScript } from "./pages/generic";
import { processGlobal } from "./pages/global";
+import { welcomeScript } from "./pages/welcome";
// This is used for cache busting when userscript changes significantly.
// Only change it when you made changes to the processHTML part!
@@ -59,6 +60,9 @@ export function bindFunctions(root: HTMLElement, docname: string): void {
genericScript(root, docname);
virologyScript(root);
break;
+ case "$Welcome":
+ welcomeScript(root);
+ break;
default:
genericScript(root, docname);
break;
diff --git a/src/scripts/pages/welcome.ts b/src/scripts/pages/welcome.ts
new file mode 100644
index 0000000..03bab27
--- /dev/null
+++ b/src/scripts/pages/welcome.ts
@@ -0,0 +1,19 @@
+import { nextAnimationFrame } from "../../utils";
+
+export function welcomeScript(root: HTMLElement): void {
+ const expandLink = document.getElementById("welcome_expand");
+ expandLink.addEventListener("click", async () => {
+ const featureDiv = root.querySelector
(".features");
+ featureDiv.style.display = "block";
+ root.classList.remove("center");
+ await nextAnimationFrame();
+ featureDiv.style.opacity = "1";
+ featureDiv.scrollIntoView({
+ block: "start",
+ inline: "nearest",
+ behavior: "smooth",
+ });
+ });
+}
+
+export default { welcomeScript };
diff --git a/style/pages/welcome.scss b/style/pages/welcome.scss
index ab73907..1c96304 100644
--- a/style/pages/welcome.scss
+++ b/style/pages/welcome.scss
@@ -1,11 +1,17 @@
#Welcome {
display: flex;
flex-direction: column;
- align-items: center;
- justify-content: center;
+ &.center {
+ align-items: center;
+ justify-content: center;
+ }
+ &:not(.center) {
+ header {
+ margin-top: 20px;
+ }
+ }
font-size: 12pt;
line-height: 1.4em;
- padding: 10pt;
header {
display: flex;
flex-direction: row;
@@ -22,8 +28,44 @@
width: 400px;
}
}
- p,
- ul {
+
+ .features {
+ width: 100%;
+ opacity: 0;
+ display: none;
+ transition: all 200ms;
+ }
+
+ .maxw {
+ margin: 0 auto;
max-width: 960px;
+ text-align: left;
+ }
+
+ h3 {
+ font-size: 15pt;
+ }
+
+ h3.nobg {
+ background: transparent;
+ margin-bottom: 0;
+ padding-bottom: 0;
+ position: relative;
+ z-index: 2;
+ }
+
+ code {
+ display: inline-block;
+ background-color: #222;
+ border-radius: 3px;
+ padding: 2px 5px;
+ }
+
+ .images {
+ display: flex;
+ flex-wrap: wrap;
+ img {
+ margin: 10px;
+ }
}
}
