Compare commits

..

2 commits

Author SHA1 Message Date
38abc63f6c
Finished (?) welcome page
All checks were successful
continuous-integration/drone/push Build is passing
2020-06-28 17:44:59 +02:00
430d761ef7
Change global search prefix to @ 2020-06-28 17:44:20 +02:00
8 changed files with 130 additions and 14 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 49 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 44 KiB

View file

@ -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 active" id="Welcome" data-tab="$Welcome"> <div class="page center" 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> <div class="maxw">
<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,10 +71,57 @@
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>
Click any guide in the top menu to open it. 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> </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>

View file

@ -5,6 +5,7 @@ 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");
@ -36,8 +37,7 @@ 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,7 +47,6 @@ 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");
@ -55,9 +54,14 @@ 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) {

View file

@ -2,6 +2,7 @@ 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!
@ -59,6 +60,9 @@ 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;

View file

@ -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<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 // 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) {

View file

@ -1,11 +1,17 @@
#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;
@ -22,8 +28,44 @@
width: 400px; width: 400px;
} }
} }
p,
ul { .features {
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;
}
} }
} }