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="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>
|
||||||
|
<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>
|
</div>
|
||||||
<p>
|
|
||||||
Click any guide in the top menu to open it.
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
|
|
10
src/index.ts
10
src/index.ts
|
@ -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) {
|
||||||
|
|
|
@ -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;
|
||||||
|
|
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 {
|
#Welcome {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
&.center {
|
||||||
justify-content: center;
|
align-items: 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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Reference in a new issue