Finished (?) welcome page
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
This commit is contained in:
parent
430d761ef7
commit
38abc63f6c
7 changed files with 129 additions and 13 deletions
BIN
assets/images/welcome/bs-global.png
Normal file
BIN
assets/images/welcome/bs-global.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 49 KiB |
BIN
assets/images/welcome/bs-local.png
Normal file
BIN
assets/images/welcome/bs-local.png
Normal file
Binary file not shown.
After 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 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>
|
||||
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,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) {
|
||||
|
|
|
@ -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;
|
||||
|
|
19
src/scripts/pages/welcome.ts
Normal file
19
src/scripts/pages/welcome.ts
Normal 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 };
|
|
@ -1,11 +1,17 @@
|
|||
#Welcome {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
&.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Reference in a new issue