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 |
57
index.html
57
index.html
|
@ -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>
|
||||
|
|
10
src/index.ts
10
src/index.ts
|
@ -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) {
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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
|
||||
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) {
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Reference in a new issue