Finished (?) welcome page
All checks were successful
continuous-integration/drone/push Build is passing

This commit is contained in:
Hamcha 2020-06-28 17:44:59 +02:00
parent 430d761ef7
commit 38abc63f6c
Signed by: hamcha
GPG key ID: 41467804B19A3315
7 changed files with 129 additions and 13 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="tab-list"></nav>
<section id="tabs">
<div class="page active" id="Welcome" data-tab="$Welcome">
<div class="page center" id="Welcome" data-tab="$Welcome">
<header>
<img class="icon" src="assets/images/outline.svg" />
<img class="type" src="assets/images/type.svg" />
</header>
<div>
<div class="maxw">
<p>
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.
</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>
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>
<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>
</section>
</main>

View file

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

View file

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

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

@ -1,11 +1,17 @@
#Welcome {
display: flex;
flex-direction: column;
&.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;
}
}
}