Compare commits

..

No commits in common. "38abc63f6c227cd6d09d7dc865e74ab28d6b6b39" and "bc6a3ad9eba47cc4d33ed36ba641de97186c4b02" have entirely different histories.

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

View file

@ -49,12 +49,12 @@
<nav id="section-list"></nav>
<nav id="tab-list"></nav>
<section id="tabs">
<div class="page center" id="Welcome" data-tab="$Welcome">
<div class="page active" id="Welcome" data-tab="$Welcome">
<header>
<img class="icon" src="assets/images/outline.svg" />
<img class="type" src="assets/images/type.svg" />
</header>
<div class="maxw">
<div>
<p>
This handbook is a collection of tweaks of the /tg/station wiki
pages to make them prettier and easier to navigate.
@ -71,57 +71,10 @@
not as polished as they should be.
</li>
</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>
<p>
By default, only results for the current page are shown, you can
use <code>@</code> as prefix to search in all guides at once.
</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>
<p>
Click any guide in the top menu to open it.
</p>
</div>
</section>
</main>

View file

@ -5,7 +5,6 @@ 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");
@ -37,7 +36,8 @@ 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,6 +47,7 @@ async function load() {
// Remove icon from loading
icons.removeChild(icons.querySelector(`img[data-tab=${tab.page}]`));
});
*/
});
manager.showSection("Medical");
@ -54,14 +55,9 @@ 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) {

View file

@ -2,7 +2,6 @@ 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!
@ -60,9 +59,6 @@ export function bindFunctions(root: HTMLElement, docname: string): void {
genericScript(root, docname);
virologyScript(root);
break;
case "$Welcome":
welcomeScript(root);
break;
default:
genericScript(root, docname);
break;

View file

@ -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 };

View file

@ -63,7 +63,7 @@ export function searchBox(): HTMLElement {
}
// Check for special flags
let entries: SearchEntry[] = allEntries;
global = str[0] === "@";
global = str[0] === ",";
// Unless we're doing a global search don't show entries for other pages
if (!global) {

View file

@ -1,17 +1,11 @@
#Welcome {
display: flex;
flex-direction: column;
&.center {
align-items: center;
justify-content: center;
}
&:not(.center) {
header {
margin-top: 20px;
}
}
align-items: center;
justify-content: center;
font-size: 12pt;
line-height: 1.4em;
padding: 10pt;
header {
display: flex;
flex-direction: row;
@ -28,44 +22,8 @@
width: 400px;
}
}
.features {
width: 100%;
opacity: 0;
display: none;
transition: all 200ms;
}
.maxw {
margin: 0 auto;
p,
ul {
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;
}
}
}