-
- Extra Features
-
+
+
+ 
+ 
+
-
Jump to section/item
- Press SHIFT+S on any page (except this one) to open up a
- quick search menu.
+ This handbook is a collection of tweaks of the /tg/station wiki
+ pages to make them prettier and easier to navigate.
+
Please note that:
+
+ -
+ It's being built with smaller windows in mind (think SS13
+ popups), large window format is planned but it's just not
+ there yet.
+
+ -
+ There is a lot of development still happening, so many parts
+ are not as polished as they should be.
+
+
- Results for most pages are section titles, but some pages like
- Chemistry have support for searching recipes etc.
+ Click any guide in the top menu to open it or
+ click here to learn about
+ some of the extra features packed in.
-
-
-
+
+
+
+ Extra Features
+
+
+
Jump to section/item
+
+ Press SHIFT+S on any page (except this one) to open up
+ a quick search menu.
+
+
+ Results for most pages are section titles, but some pages like
+ Chemistry have support for searching recipes etc.
+
+
+
+
+
+
+ By default, only results for the current page are shown, you
+ can use @ as prefix to search in all guides at
+ once.
+
+
(Chemistry) Auto-Expanded tooltips
+
+ Recipes for reagent ingredients are now always shown in each
+ recipe rather than being tooltips.
+
+
(Chemistry) Beaker sizing
+
+ Press SHIFT+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.
+
-
- By default, only results for the current page are shown, you can
- use @ as prefix to search in all guides at once.
-
-
(Chemistry) Auto-Expanded tooltips
-
- Recipes for reagent ingredients are now always shown in each
- recipe rather than being tooltips.
-
-
(Chemistry) Beaker sizing
-
- Press SHIFT+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.
-
diff --git a/src/ui/TabManager.ts b/src/ui/TabManager.ts
index a5b9f1a..a08ad4e 100644
--- a/src/ui/TabManager.ts
+++ b/src/ui/TabManager.ts
@@ -31,6 +31,9 @@ async function loadPage(
let html: string | null = null;
const key = `page:${page}`;
+ const wrapper = document.createElement("div");
+ wrapper.className = "wrapper";
+
// Check cache for pre-processed page
if (useCache) {
try {
@@ -73,30 +76,27 @@ async function loadPage(
await nextAnimationFrame();
// Set as HTML content and run HTML manipulations on it
- const div = elem.cloneNode(false) as HTMLDivElement;
- div.innerHTML = html;
+ wrapper.innerHTML = html;
console.log(`${page}: processing`);
- processHTML(div, page);
+ processHTML(wrapper, page);
// Get version to set
const version =
page in PAGE_VERSIONS ? PAGE_VERSIONS[page] : PAGE_VERSIONS.$DEFAULT;
// Save result to cache
- cache.set(key, div.innerHTML, version).then(() => {
+ cache.set(key, wrapper.innerHTML, version).then(() => {
console.log(`${page}: saved to cache`);
});
-
- elem.replaceWith(div);
- elem = div;
} else {
// Set cached content as HTML
- elem.innerHTML = html;
+ wrapper.innerHTML = html;
postProcessHTML(elem, page); // noop in prod, used in dev for testing candidate DOM changes
}
+ elem.innerHTML = wrapper.outerHTML;
bindFunctions(elem, page);
elem.classList.remove("waiting");
diff --git a/style/pages/global.scss b/style/pages/global.scss
index d3da18f..9b00bf1 100644
--- a/style/pages/global.scss
+++ b/style/pages/global.scss
@@ -34,9 +34,6 @@ $max-width: 960px;
}
.page {
- max-width: $max-width;
- margin: 0 auto;
-
h1.pageheader {
margin-top: 0;
padding: 15pt 10pt;
@@ -78,3 +75,8 @@ $max-width: 960px;
align-items: center;
}
}
+
+.wrapper {
+ margin: 0 auto;
+ max-width: $max-width;
+}
diff --git a/style/ui.scss b/style/ui.scss
index d1e427c..7187226 100644
--- a/style/ui.scss
+++ b/style/ui.scss
@@ -1,215 +1,225 @@
html,
body {
- margin: 0;
- padding: 0;
- height: 100%;
- overflow: hidden;
+ margin: 0;
+ padding: 0;
+ height: 100%;
+ overflow: hidden;
}
.bgimage {
- position: fixed;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- display: flex;
- align-items: center;
- justify-content: center;
- z-index: 0;
- img {
- opacity: 0.4;
- width: 80vmin;
- }
+ position: fixed;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 0;
+ img {
+ opacity: 0.4;
+ width: 80vmin;
+ }
}
body {
- background: linear-gradient(to bottom, darken($nanotrasen, 20%), darken($nanotrasen, 10%));
- background-size: 100% 100%;
- background-attachment: fixed;
- color: #fff;
- font-family: "Iosevka Aile Web", sans-serif;
- font-size: 9pt;
- line-height: 1.6em;
+ background: linear-gradient(
+ to bottom,
+ darken($nanotrasen, 20%),
+ darken($nanotrasen, 10%)
+ );
+ background-size: 100% 100%;
+ background-attachment: fixed;
+ color: #fff;
+ font-family: "Iosevka Aile Web", sans-serif;
+ font-size: 9pt;
+ line-height: 1.6em;
}
#app {
- height: 100%;
- display: flex;
- flex-direction: column;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
- &.waiting {
- #tab-list,
- #section-list {
- display: none;
- }
+ &.waiting {
+ #tab-list,
+ #section-list {
+ display: none;
}
+ }
}
::-webkit-scrollbar {
- width: 14pt;
+ width: 14pt;
}
::-webkit-scrollbar-track {
- background: linear-gradient(to bottom, darken($nanotrasen, 0%), darken($nanotrasen, 10%), darken($nanotrasen, 0%));
- border: 1px solid lighten($nanotrasen, 10%);
+ background: linear-gradient(
+ to bottom,
+ darken($nanotrasen, 0%),
+ darken($nanotrasen, 10%),
+ darken($nanotrasen, 0%)
+ );
+ border: 1px solid lighten($nanotrasen, 10%);
}
::-webkit-scrollbar-thumb {
- border-radius: 2px;
- background: linear-gradient(
- to bottom,
- lighten($nanotrasen, 20%),
- lighten($nanotrasen, 30%),
- lighten($nanotrasen, 20%)
- );
- border: 1px solid lighten($nanotrasen, 10%);
+ border-radius: 2px;
+ background: linear-gradient(
+ to bottom,
+ lighten($nanotrasen, 20%),
+ lighten($nanotrasen, 30%),
+ lighten($nanotrasen, 20%)
+ );
+ border: 1px solid lighten($nanotrasen, 10%);
}
.speen {
- flex: 1;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- font-size: 12pt;
- img {
- width: 60vmin;
- max-height: 100%;
- opacity: 0.9;
- padding-bottom: 1em;
- }
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ font-size: 12pt;
+ img {
+ width: 60vmin;
+ max-height: 100%;
+ opacity: 0.9;
+ padding-bottom: 1em;
+ }
}
#tabs {
- flex: 1;
- z-index: 1;
- display: grid;
- overflow: auto;
- .page {
- //visibility: hidden;
- will-change: display;
- &:not(.active) {
- display: none;
- }
- grid-row: 1;
- grid-column: 1;
- &.active {
- //visibility: visible;
- &.waiting {
- user-select: none;
- position: fixed;
- top: 0;
- left: 0;
- width: 100vw;
- height: 100vh;
- overflow: hidden;
- display: flex;
- flex-direction: column;
- height: 100%;
- }
- }
+ flex: 1;
+ z-index: 1;
+ display: grid;
+ overflow: hidden;
+ .page {
+ //visibility: hidden;
+ will-change: display;
+ &:not(.active) {
+ display: none;
}
+ overflow: auto;
+ grid-row: 1;
+ grid-column: 1;
+ &.active {
+ //visibility: visible;
+ &.waiting {
+ user-select: none;
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100vw;
+ height: 100vh;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ }
+ }
+ }
}
$section-active: darken($nanotrasen, 5%);
$tab-active: lighten($nanotrasen, 10%);
#section-list {
- z-index: 2;
- border-bottom: 2px solid $section-active;
- display: flex;
- .section {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- user-select: none;
- font-size: 9pt;
- padding: 3pt 7pt;
- text-transform: uppercase;
- color: lighten($nanotrasen, 60%);
- flex: 1;
- &.active {
- background-color: $section-active;
- color: white;
- }
- &:not(.active) {
- cursor: pointer;
- &:hover {
- background-color: darken($section-active, 10%);
- }
- }
- }
-}
-
-#tab-list {
- z-index: 2;
- display: flex;
- background-color: $section-active;
- border-bottom: 4px solid $tab-active;
-
- .tab {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- user-select: none;
- font-size: 7pt;
- padding: 2px 4px;
- padding-bottom: 0;
- text-transform: uppercase;
- flex: 1;
- max-width: 100px;
-
- img {
- height: 80%;
- max-height: 24px;
- margin: 0;
- }
- &.active {
- background-color: $tab-active;
- }
- &:not(.active) {
- cursor: pointer;
- &:hover {
- background-color: darken($tab-active, 8%);
- }
- }
-
- &.hidden {
- display: none;
- }
- }
-}
-
-noscript {
- position: fixed;
- top: 0;
+ z-index: 2;
+ border-bottom: 2px solid $section-active;
+ display: flex;
+ .section {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
- background: transparent;
- width: 100%;
-}
-
-.loading-icons {
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: center;
user-select: none;
font-size: 9pt;
padding: 3pt 7pt;
text-transform: uppercase;
- flex-wrap: wrap;
- div {
- border: 1px solid red;
- display: flex;
- flex-direction: column;
- align-items: center;
+ color: lighten($nanotrasen, 60%);
+ flex: 1;
+ &.active {
+ background-color: $section-active;
+ color: white;
}
- img {
- max-width: 32px;
+ &:not(.active) {
+ cursor: pointer;
+ &:hover {
+ background-color: darken($section-active, 10%);
+ }
}
+ }
+}
+
+#tab-list {
+ z-index: 2;
+ display: flex;
+ background-color: $section-active;
+ border-bottom: 4px solid $tab-active;
+
+ .tab {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ user-select: none;
+ font-size: 7pt;
+ padding: 2px 4px;
+ padding-bottom: 0;
+ text-transform: uppercase;
+ flex: 1;
+ max-width: 100px;
+
+ img {
+ height: 80%;
+ max-height: 24px;
+ margin: 0;
+ }
+ &.active {
+ background-color: $tab-active;
+ }
+ &:not(.active) {
+ cursor: pointer;
+ &:hover {
+ background-color: darken($tab-active, 8%);
+ }
+ }
+
+ &.hidden {
+ display: none;
+ }
+ }
+}
+
+noscript {
+ position: fixed;
+ top: 0;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ background: transparent;
+ width: 100%;
+}
+
+.loading-icons {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ user-select: none;
+ font-size: 9pt;
+ padding: 3pt 7pt;
+ text-transform: uppercase;
+ flex-wrap: wrap;
+ div {
+ border: 1px solid red;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+ img {
+ max-width: 32px;
+ }
}