Compare commits
No commits in common. "38abc63f6c227cd6d09d7dc865e74ab28d6b6b39" and "bc6a3ad9eba47cc4d33ed36ba641de97186c4b02" have entirely different histories.
38abc63f6c
...
bc6a3ad9eb
8 changed files with 14 additions and 130 deletions
Binary file not shown.
Before Width: | Height: | Size: 49 KiB |
Binary file not shown.
Before Width: | Height: | Size: 44 KiB |
53
index.html
53
index.html
|
@ -49,12 +49,12 @@
|
||||||
<nav id="section-list"></nav>
|
<nav id="section-list"></nav>
|
||||||
<nav id="tab-list"></nav>
|
<nav id="tab-list"></nav>
|
||||||
<section id="tabs">
|
<section id="tabs">
|
||||||
<div class="page center" id="Welcome" data-tab="$Welcome">
|
<div class="page active" id="Welcome" data-tab="$Welcome">
|
||||||
<header>
|
<header>
|
||||||
<img class="icon" src="assets/images/outline.svg" />
|
<img class="icon" src="assets/images/outline.svg" />
|
||||||
<img class="type" src="assets/images/type.svg" />
|
<img class="type" src="assets/images/type.svg" />
|
||||||
</header>
|
</header>
|
||||||
<div class="maxw">
|
<div>
|
||||||
<p>
|
<p>
|
||||||
This handbook is a collection of tweaks of the /tg/station wiki
|
This handbook is a collection of tweaks of the /tg/station wiki
|
||||||
pages to make them prettier and easier to navigate.
|
pages to make them prettier and easier to navigate.
|
||||||
|
@ -71,57 +71,10 @@
|
||||||
not as polished as they should be.
|
not as polished as they should be.
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<p>
|
|
||||||
Click any guide in the top menu to open it or
|
|
||||||
<a href="#" id="welcome_expand">click here</a> to learn about some
|
|
||||||
of the extra features packed in.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="features">
|
|
||||||
<h2>
|
|
||||||
<div class="maxw">
|
|
||||||
<div>Extra Features</div>
|
|
||||||
</div>
|
|
||||||
</h2>
|
|
||||||
<div class="maxw">
|
|
||||||
<h3 class="nobg">Jump to section/item</h3>
|
|
||||||
<p>
|
|
||||||
Press <b>SHIFT+S</b> on any page (except this one) to open up a
|
|
||||||
quick search menu.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
Results for most pages are section titles, but some pages like
|
|
||||||
Chemistry have support for searching recipes etc.
|
|
||||||
</p>
|
|
||||||
<div class="images">
|
|
||||||
<img
|
|
||||||
src="assets/images/welcome/bs-local.png"
|
|
||||||
style="width: 40%;"
|
|
||||||
loading="lazy"
|
|
||||||
/>
|
|
||||||
<img
|
|
||||||
src="assets/images/welcome/bs-global.png"
|
|
||||||
style="width: 40%;"
|
|
||||||
loading="lazy"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<p>
|
<p>
|
||||||
By default, only results for the current page are shown, you can
|
Click any guide in the top menu to open it.
|
||||||
use <code>@</code> as prefix to search in all guides at once.
|
|
||||||
</p>
|
</p>
|
||||||
<h3 class="nobg">(Chemistry) Auto-Expanded tooltips</h3>
|
|
||||||
<p>
|
|
||||||
Recipes for reagent ingredients are now always shown in each
|
|
||||||
recipe rather than being tooltips.
|
|
||||||
</p>
|
|
||||||
<h3 class="nobg">(Chemistry) Beaker sizing</h3>
|
|
||||||
<p>
|
|
||||||
Press <b>SHIFT+B</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.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
|
|
10
src/index.ts
10
src/index.ts
|
@ -5,7 +5,6 @@ import { searchBox } from "./scripts/search";
|
||||||
|
|
||||||
// @ts-expect-error: Parcel image import
|
// @ts-expect-error: Parcel image import
|
||||||
import unknown from "~/assets/images/tab-icons/unknown.svg";
|
import unknown from "~/assets/images/tab-icons/unknown.svg";
|
||||||
import { bindFunctions } from "./scripts/index";
|
|
||||||
|
|
||||||
async function load() {
|
async function load() {
|
||||||
const sectionListContainer = document.getElementById("section-list");
|
const sectionListContainer = document.getElementById("section-list");
|
||||||
|
@ -37,7 +36,8 @@ async function load() {
|
||||||
|
|
||||||
const promises = sections.flatMap(async (section) => {
|
const promises = sections.flatMap(async (section) => {
|
||||||
manager.createSection(section.name);
|
manager.createSection(section.name);
|
||||||
|
return null;
|
||||||
|
/*
|
||||||
return section.tabs.map(async (tab) => {
|
return section.tabs.map(async (tab) => {
|
||||||
// Load page
|
// Load page
|
||||||
await manager.openTab(section.name, tab.page, {
|
await manager.openTab(section.name, tab.page, {
|
||||||
|
@ -47,6 +47,7 @@ async function load() {
|
||||||
// Remove icon from loading
|
// Remove icon from loading
|
||||||
icons.removeChild(icons.querySelector(`img[data-tab=${tab.page}]`));
|
icons.removeChild(icons.querySelector(`img[data-tab=${tab.page}]`));
|
||||||
});
|
});
|
||||||
|
*/
|
||||||
});
|
});
|
||||||
|
|
||||||
manager.showSection("Medical");
|
manager.showSection("Medical");
|
||||||
|
@ -54,14 +55,9 @@ async function load() {
|
||||||
// manager.createSection("Medical");
|
// manager.createSection("Medical");
|
||||||
// const promises = [manager.openTab("Medical", "Infections", {})];
|
// const promises = [manager.openTab("Medical", "Infections", {})];
|
||||||
|
|
||||||
const welcome = document.getElementById("Welcome");
|
|
||||||
bindFunctions(welcome, "$Welcome");
|
|
||||||
|
|
||||||
Promise.all(promises).then(() => {
|
Promise.all(promises).then(() => {
|
||||||
// Remove app-wide loading
|
// Remove app-wide loading
|
||||||
manager.setLoading(false);
|
manager.setLoading(false);
|
||||||
|
|
||||||
welcome.classList.add("active");
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
if ("serviceWorker" in navigator) {
|
if ("serviceWorker" in navigator) {
|
||||||
|
|
|
@ -2,7 +2,6 @@ import { chemistryScript, processChemistry } from "./pages/chemistry";
|
||||||
import { processVirology, virologyScript } from "./pages/virology";
|
import { processVirology, virologyScript } from "./pages/virology";
|
||||||
import { genericScript } from "./pages/generic";
|
import { genericScript } from "./pages/generic";
|
||||||
import { processGlobal } from "./pages/global";
|
import { processGlobal } from "./pages/global";
|
||||||
import { welcomeScript } from "./pages/welcome";
|
|
||||||
|
|
||||||
// This is used for cache busting when userscript changes significantly.
|
// This is used for cache busting when userscript changes significantly.
|
||||||
// Only change it when you made changes to the processHTML part!
|
// Only change it when you made changes to the processHTML part!
|
||||||
|
@ -60,9 +59,6 @@ export function bindFunctions(root: HTMLElement, docname: string): void {
|
||||||
genericScript(root, docname);
|
genericScript(root, docname);
|
||||||
virologyScript(root);
|
virologyScript(root);
|
||||||
break;
|
break;
|
||||||
case "$Welcome":
|
|
||||||
welcomeScript(root);
|
|
||||||
break;
|
|
||||||
default:
|
default:
|
||||||
genericScript(root, docname);
|
genericScript(root, docname);
|
||||||
break;
|
break;
|
||||||
|
|
|
@ -1,19 +0,0 @@
|
||||||
import { nextAnimationFrame } from "../../utils";
|
|
||||||
|
|
||||||
export function welcomeScript(root: HTMLElement): void {
|
|
||||||
const expandLink = document.getElementById("welcome_expand");
|
|
||||||
expandLink.addEventListener("click", async () => {
|
|
||||||
const featureDiv = root.querySelector<HTMLDivElement>(".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 };
|
|
|
@ -63,7 +63,7 @@ export function searchBox(): HTMLElement {
|
||||||
}
|
}
|
||||||
// Check for special flags
|
// Check for special flags
|
||||||
let entries: SearchEntry[] = allEntries;
|
let entries: SearchEntry[] = allEntries;
|
||||||
global = str[0] === "@";
|
global = str[0] === ",";
|
||||||
|
|
||||||
// Unless we're doing a global search don't show entries for other pages
|
// Unless we're doing a global search don't show entries for other pages
|
||||||
if (!global) {
|
if (!global) {
|
||||||
|
|
|
@ -1,17 +1,11 @@
|
||||||
#Welcome {
|
#Welcome {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
&.center {
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
|
||||||
&:not(.center) {
|
|
||||||
header {
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
font-size: 12pt;
|
font-size: 12pt;
|
||||||
line-height: 1.4em;
|
line-height: 1.4em;
|
||||||
|
padding: 10pt;
|
||||||
header {
|
header {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
@ -28,44 +22,8 @@
|
||||||
width: 400px;
|
width: 400px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
p,
|
||||||
.features {
|
ul {
|
||||||
width: 100%;
|
|
||||||
opacity: 0;
|
|
||||||
display: none;
|
|
||||||
transition: all 200ms;
|
|
||||||
}
|
|
||||||
|
|
||||||
.maxw {
|
|
||||||
margin: 0 auto;
|
|
||||||
max-width: 960px;
|
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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Reference in a new issue