Compare commits

...

4 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
bc6a3ad9eb
Draft index page
All checks were successful
continuous-integration/drone/push Build is passing
2020-06-28 02:22:11 +02:00
dab6947796
Start working on welcome page
All checks were successful
continuous-integration/drone/push Build is passing
2020-06-28 01:39:47 +02:00
12 changed files with 249 additions and 8 deletions

View file

@ -0,0 +1 @@
<svg viewBox="0 0 257 256" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2"><path fill="none" d="M.452 0h256v256h-256z"/><path d="M129.014 47.901c14.483-8.061 24.58-16.488 38.561-22.21 11.701-4.787 26.042-7.773 47.622-7.098l4.953.191.387 38.629c3.103-.006 6.211.039 9.325.125 4.938.135 9.889.377 14.854.714l5.498.445v5.516s.828 52.078 1.2 97.18c.287 34.428.274 64.787.274 64.787v8.059l-8.035-.627c-24.152-2.097-45.98-2.69-65.405-1.783-15.888.744-30.153 2.465-42.637 5.293l-5.597 1.36-1.562.402s-7.123-1.904-7.022-1.88c-12.547-3.165-26.793-5.311-42.704-6.393-19.473-1.324-41.39-1.078-65.663.59l-5.428.423.98-167.41V60.47l3.73-.302a365.634 365.634 0 0115.366-.843c3.83-.126 7.651-.188 11.465-.179l-.17-35.405V19.82l3.92-.152c21.43-.935 35.714 1.868 47.393 6.49 14.013 5.545 24.171 13.856 38.695 21.743zM47.14 27.724l-.17 35.345v3.927l-3.926-.039a309.957 309.957 0 00-15.027.31c-3.749.166-7.504.395-11.266.685l.923 152.758c22.638-1.796 43.225-2.242 61.695-1.39 16.71.77 31.707 2.619 44.997 5.622l4.004.974 4.183-1.13c13.195-3.32 28.18-5.559 44.911-6.685 17.804-1.198 37.6-1.116 59.32.14.013-11.236.069-33.072.265-56.847.302-36.326.897-77.176 1.118-91.7a320.475 320.475 0 00-8.775-.593c-4.8-.257-9.589-.413-14.365-.45l-5.626.03.394-39.953c-16.988-.321-28.824 2.01-38.643 5.876-14.403 5.673-24.606 14.425-39.985 22.47l-2.127 1.129-2.128-1.129c-15.313-8.223-25.44-17.087-39.798-22.934-10.059-4.098-22.25-6.643-39.974-6.416z" fill="#fff"/><path d="M124.388 234.209c-5.347-2.704-9.458-6.503-13.936-10.57-5.455-4.954-11.563-10.32-22.261-13.926-10.026-3.38-23.97-5.198-44.87-3.961l-4.9.25v-4.908s-.552-44.336-.426-88.676c.127-44.342.931-88.676.931-88.676v-3.997l3.995-.157c16.103-.402 28.11 1.236 38 4.113 19.276 5.607 30.377 16.066 48.121 25.984 17.751-9.894 28.863-20.327 48.135-25.92 9.887-2.868 21.887-4.508 37.98-4.104l3.925.153v3.928s.906 44.332 1.074 88.676c.169 44.338-.401 88.676-.401 88.676v5.006l-5-.255c-20.885-1.243-34.818.57-44.84 3.94-10.691 3.594-16.8 8.944-22.255 13.888-4.482 4.063-8.597 7.859-13.947 10.56v4.187l-4.685-2.092-4.645 2.068.005-4.187zm86.45-206.553c-17.768-.558-30.052 1.75-40.21 5.728-14.457 5.663-24.699 14.486-40.131 22.568l-1.456.776-1.457-.776c-15.441-8.058-25.697-16.856-40.157-22.506-10.14-3.962-22.397-6.271-40.12-5.72.198 11.843.76 48.264.864 84.692.101 35.61-.234 71.216-.371 83.859 19.759-.445 33.283 1.82 43.194 5.342 12.023 4.274 18.879 10.372 24.95 16.074 4.153 3.901 7.855 7.63 13.062 10.088 5.232-2.462 8.938-6.204 13.1-10.122 6.07-5.714 12.925-11.825 24.957-16.112 9.898-3.526 23.403-5.793 43.122-5.364-.142-12.727-.48-48.245-.346-83.765.138-36.504.777-73 1-84.762z" fill="#fff"/><path d="M131.84 227.74a2.942 2.942 0 01-5.415.025l-8.456-1.162s8.838-1.436 9.259-13.965c.047-1.4.121-1.6.206-1.03l.24-3.427c.855-12.83 1.453-27.634 1.453-27.634s.598 14.804 1.453 27.634c.169 2.522.349 4.962.524 7.197 1.498 10.005 9.008 11.225 9.008 11.225l-8.271 1.138zM129.727 49.702l-.01-.272 10.394 1.451s-8.837 1.458-9.258 14.178c-.047 1.421-.121 1.625-.206 1.045l-.24 3.48c-.856 13.026-1.453 28.054-1.453 28.054s-.598-15.028-1.454-28.054c-.168-2.56-.348-5.037-.523-7.307-1.498-10.156-9.008-11.396-9.008-11.396l10.396-1.45-.01.256c.453-.035.926-.03 1.372.015zM82.887 178.83V76.855H65.036V63.048h47.752v13.806l-17.851.001V178.83h-12.05zM179.476 63.122c9.006.741 13.57 7.034 13.57 18.736v15.147h-10.893V86.132c0-5.723-3.111-9.277-8.12-9.277h-9.215c-5.084 0-8.121 3.468-8.121 9.277v69.612c0 5.81 3.037 9.277 8.12 9.277h9.215c5.085 0 8.12-3.468 8.12-9.277v-23.627h-8.703v-13.809h19.596v41.711c0 12.482-5.192 18.81-15.43 18.81h-16.892c-5.092 0-8.954-1.528-11.48-4.542-2.622-3.125-3.95-7.925-3.95-14.27V81.859c0-6.343 1.328-11.144 3.95-14.27 2.525-3.012 6.388-4.54 11.479-4.54h16.894l1.86.074z" fill="#fff"/></svg>

After

Width:  |  Height:  |  Size: 3.7 KiB

64
assets/images/type.svg Normal file
View file

@ -0,0 +1,64 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 580 260" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g transform="matrix(1,0,0,1,-551,0)">
<g id="type" transform="matrix(1.08584,0,0,1.04219,551.714,-303.717)">
<rect x="0" y="291.618" width="533.452" height="248.494" style="fill:none;"/>
<g transform="matrix(0.698871,0,0,0.728145,5.21739,54.2528)">
<g transform="matrix(158.131,0,0,158.131,24.7618,449.92)">
<path d="M0.008,-0.6L0.123,-0.6L0.123,0L0.233,0L0.233,-0.6L0.348,-0.6L0.348,-0.7L0.008,-0.7L0.008,-0.6Z" style="fill:white;fill-rule:nonzero;"/>
</g>
<g transform="matrix(158.131,0,0,158.131,81.0564,449.92)">
<path d="M0.205,-0.29L0.255,-0.29L0.255,-0.161C0.255,-0.111 0.233,-0.093 0.198,-0.093C0.163,-0.093 0.141,-0.111 0.141,-0.161L0.141,-0.539C0.141,-0.589 0.163,-0.608 0.198,-0.608C0.233,-0.608 0.255,-0.589 0.255,-0.539L0.255,-0.464L0.359,-0.464L0.359,-0.532C0.359,-0.644 0.303,-0.708 0.195,-0.708C0.087,-0.708 0.031,-0.644 0.031,-0.532L0.031,-0.168C0.031,-0.056 0.087,0.008 0.195,0.008C0.303,0.008 0.359,-0.056 0.359,-0.168L0.359,-0.39L0.205,-0.39L0.205,-0.29Z" style="fill:white;fill-rule:nonzero;"/>
</g>
<g transform="matrix(158.131,0,0,158.131,142.727,449.92)">
<path d="M0.185,-0.705C0.084,-0.704 0.041,-0.634 0.041,-0.532C0.041,-0.339 0.309,-0.345 0.309,-0.168C0.309,-0.083 0.276,-0.016 0.184,-0.016C0.092,-0.016 0.059,-0.083 0.059,-0.168L0.059,-0.203L0.038,-0.203L0.038,-0.169C0.038,-0.072 0.078,0.005 0.184,0.005C0.291,0.005 0.331,-0.072 0.331,-0.169C0.331,-0.359 0.063,-0.354 0.063,-0.533C0.063,-0.616 0.094,-0.685 0.186,-0.685C0.277,-0.685 0.308,-0.615 0.308,-0.532L0.308,-0.518L0.33,-0.518L0.33,-0.531C0.33,-0.627 0.291,-0.705 0.185,-0.705Z" style="fill:white;fill-rule:nonzero;"/>
</g>
<g transform="matrix(158.131,0,0,158.131,201.078,449.92)">
<path d="M0.193,0L0.193,-0.679L0.346,-0.679L0.346,-0.7L0.019,-0.7L0.019,-0.679L0.171,-0.679L0.171,0L0.193,0Z" style="fill:white;fill-rule:nonzero;"/>
</g>
<g transform="matrix(158.131,0,0,158.131,253.103,449.92)">
<path d="M0.347,-0.165L0.388,0L0.41,0L0.237,-0.701L0.206,-0.701L0.037,0L0.057,0L0.098,-0.165L0.347,-0.165ZM0.221,-0.675L0.343,-0.185L0.102,-0.185L0.221,-0.675Z" style="fill:white;fill-rule:nonzero;"/>
</g>
<g transform="matrix(158.131,0,0,158.131,317.778,449.92)">
<path d="M0.193,0L0.193,-0.679L0.346,-0.679L0.346,-0.7L0.019,-0.7L0.019,-0.679L0.171,-0.679L0.171,0L0.193,0Z" style="fill:white;fill-rule:nonzero;"/>
</g>
<g transform="matrix(158.131,0,0,158.131,375.812,449.92)">
<rect x="0.04" y="-0.7" width="0.022" height="0.7" style="fill:white;fill-rule:nonzero;"/>
</g>
<g transform="matrix(158.131,0,0,158.131,391.941,449.92)">
<path d="M0.039,-0.172C0.039,-0.074 0.081,0.005 0.187,0.005C0.295,0.005 0.337,-0.074 0.337,-0.172L0.337,-0.528C0.337,-0.626 0.295,-0.705 0.187,-0.705C0.081,-0.705 0.039,-0.626 0.039,-0.528L0.039,-0.172ZM0.061,-0.529C0.061,-0.615 0.094,-0.685 0.187,-0.685C0.281,-0.685 0.315,-0.615 0.315,-0.529L0.315,-0.171C0.315,-0.085 0.281,-0.015 0.187,-0.015C0.094,-0.015 0.061,-0.085 0.061,-0.171L0.061,-0.529Z" style="fill:white;fill-rule:nonzero;"/>
</g>
<g transform="matrix(158.131,0,0,158.131,451.398,449.92)">
<path d="M0.061,-0.668L0.311,0L0.338,0L0.338,-0.7L0.317,-0.7L0.317,-0.045L0.071,-0.7L0.04,-0.7L0.04,0L0.061,0L0.061,-0.668Z" style="fill:white;fill-rule:nonzero;"/>
</g>
</g>
<g transform="matrix(1.5056,0,0,1.56867,-81.8441,-250.157)">
<g transform="matrix(97.8684,0,0,97.8684,65.99,495.372)">
<path d="M0.15,-0.3L0.275,-0.3L0.275,0L0.387,0L0.387,-0.7L0.275,-0.7L0.275,-0.4L0.15,-0.4L0.15,-0.7L0.04,-0.7L0.04,0L0.15,0L0.15,-0.3Z" style="fill:white;fill-rule:nonzero;"/>
</g>
<g transform="matrix(97.8684,0,0,97.8684,107.78,495.372)">
<path d="M0.284,-0.7L0.123,-0.7L0.011,0L0.112,0L0.131,-0.127L0.266,-0.127L0.285,0L0.396,0L0.284,-0.7ZM0.198,-0.576L0.251,-0.222L0.145,-0.222L0.198,-0.576Z" style="fill:white;fill-rule:nonzero;"/>
</g>
<g transform="matrix(97.8684,0,0,97.8684,147.612,495.372)">
<path d="M0.275,0L0.388,0L0.388,-0.7L0.29,-0.7L0.29,-0.281L0.177,-0.7L0.039,-0.7L0.039,0L0.138,0L0.138,-0.507L0.275,0Z" style="fill:white;fill-rule:nonzero;"/>
</g>
<g transform="matrix(97.8684,0,0,97.8684,189.402,495.372)">
<path d="M0.04,0L0.214,0C0.324,0 0.378,-0.061 0.378,-0.173L0.378,-0.527C0.378,-0.639 0.324,-0.7 0.214,-0.7L0.04,-0.7L0.04,0ZM0.212,-0.6C0.247,-0.6 0.268,-0.582 0.268,-0.532L0.268,-0.168C0.268,-0.118 0.247,-0.1 0.212,-0.1L0.15,-0.1L0.15,-0.6L0.212,-0.6Z" style="fill:white;fill-rule:nonzero;"/>
</g>
<g transform="matrix(97.8684,0,0,97.8684,229.332,495.372)">
<path d="M0.206,-0.7L0.04,-0.7L0.04,0L0.213,0C0.323,0 0.38,-0.058 0.38,-0.166L0.38,-0.223C0.38,-0.297 0.357,-0.35 0.298,-0.373C0.347,-0.396 0.369,-0.442 0.369,-0.514L0.369,-0.539C0.369,-0.647 0.32,-0.7 0.206,-0.7L0.206,-0.7ZM0.199,-0.315C0.249,-0.315 0.27,-0.295 0.27,-0.23L0.27,-0.169C0.27,-0.117 0.25,-0.1 0.213,-0.1L0.15,-0.1L0.15,-0.315L0.199,-0.315ZM0.203,-0.6C0.242,-0.6 0.259,-0.578 0.259,-0.528L0.259,-0.489C0.259,-0.433 0.234,-0.415 0.193,-0.415L0.15,-0.415L0.15,-0.6L0.203,-0.6Z" style="fill:white;fill-rule:nonzero;"/>
</g>
<g transform="matrix(97.8684,0,0,97.8684,269.067,495.372)">
<path d="M0.141,-0.539C0.141,-0.589 0.163,-0.608 0.198,-0.608C0.233,-0.608 0.255,-0.589 0.255,-0.539L0.255,-0.161C0.255,-0.111 0.233,-0.092 0.198,-0.092C0.163,-0.092 0.141,-0.111 0.141,-0.161L0.141,-0.539ZM0.031,-0.168C0.031,-0.056 0.09,0.008 0.198,0.008C0.306,0.008 0.365,-0.056 0.365,-0.168L0.365,-0.532C0.365,-0.644 0.306,-0.708 0.198,-0.708C0.09,-0.708 0.031,-0.644 0.031,-0.532L0.031,-0.168Z" style="fill:white;fill-rule:nonzero;"/>
</g>
<g transform="matrix(97.8684,0,0,97.8684,307.823,495.372)">
<path d="M0.141,-0.539C0.141,-0.589 0.163,-0.608 0.198,-0.608C0.233,-0.608 0.255,-0.589 0.255,-0.539L0.255,-0.161C0.255,-0.111 0.233,-0.092 0.198,-0.092C0.163,-0.092 0.141,-0.111 0.141,-0.161L0.141,-0.539ZM0.031,-0.168C0.031,-0.056 0.09,0.008 0.198,0.008C0.306,0.008 0.365,-0.056 0.365,-0.168L0.365,-0.532C0.365,-0.644 0.306,-0.708 0.198,-0.708C0.09,-0.708 0.031,-0.644 0.031,-0.532L0.031,-0.168Z" style="fill:white;fill-rule:nonzero;"/>
</g>
<g transform="matrix(97.8684,0,0,97.8684,346.579,495.372)">
<path d="M0.291,0L0.404,0L0.251,-0.388L0.404,-0.7L0.294,-0.7L0.15,-0.395L0.15,-0.7L0.04,-0.7L0.04,0L0.15,0L0.15,-0.215L0.184,-0.279L0.291,0Z" style="fill:white;fill-rule:nonzero;"/>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 7.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 49 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 44 KiB

View file

@ -48,7 +48,82 @@
<main id="app">
<nav id="section-list"></nav>
<nav id="tab-list"></nav>
<section id="tabs"></section>
<section id="tabs">
<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 class="maxw">
<p>
This handbook is a collection of tweaks of the /tg/station wiki
pages to make them prettier and easier to navigate.
</p>
<p>Please note that:</p>
<ul>
<li>
It's being built with smaller windows in mind (think SS13
popups), large window format is planned but it's just not there
yet.
</li>
<li>
There is a lot of development still happening, so many parts are
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>
</div>
</section>
</main>
<noscript>
<h1>NO JS NO PARTY</h1>

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");
@ -34,8 +35,9 @@ async function load() {
);
spinnerContainer.appendChild(icons);
const promises = sections.flatMap((section) => {
const promises = sections.flatMap(async (section) => {
manager.createSection(section.name);
return section.tabs.map(async (tab) => {
// Load page
await manager.openTab(section.name, tab.page, {
@ -47,16 +49,19 @@ async function load() {
});
});
manager.showSection("Medical");
// DEV: If you only need one page just comment the block above and uncomment this:
// 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);
// Set first page as active
manager.setActive("Infections");
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

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

View file

@ -5,3 +5,4 @@ $nanotrasen: #384e68;
@import "pages/global.scss";
@import "pages/chemistry.scss";
@import "pages/virology.scss";
@import "pages/welcome.scss";

71
style/pages/welcome.scss Normal file
View file

@ -0,0 +1,71 @@
#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;
header {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 20pt;
.icon {
max-width: 25vw;
width: 200px;
margin-right: 20px;
}
.type {
max-width: 50vw;
width: 400px;
}
}
.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;
}
}
}

View file

@ -88,13 +88,14 @@ body {
.page {
//visibility: hidden;
will-change: display;
&:not(.active) {
display: none;
overflow-y: scroll;
}
overflow-y: auto;
grid-row: 1;
grid-column: 1;
&.active {
//visibility: visible;
display: inherit;
&.waiting {
user-select: none;
position: fixed;