hotfix: use wrapper to fix scrollbar misalignments
This commit is contained in:
parent
d4c05f2208
commit
bc0e467a88
GPG key ID:
41467804B19A3315
4 changed files with 258 additions and 242 deletions
128
index.html
128
index.html
|
|
@ -50,74 +50,78 @@
|
||||||
<nav id="tab-list"></nav>
|
<nav id="tab-list"></nav>
|
||||||
<section id="tabs">
|
<section id="tabs">
|
||||||
<div class="page center" id="Welcome" data-tab="$Welcome">
|
<div class="page center" id="Welcome" data-tab="$Welcome">
|
||||||
<header>
|
<div class="wrapper">
|
||||||
<img class="icon" src="assets/images/outline.svg" />
|
<header>
|
||||||
<img class="type" src="assets/images/type.svg" />
|
<img class="icon" src="assets/images/outline.svg" />
|
||||||
</header>
|
<img class="type" src="assets/images/type.svg" />
|
||||||
<div class="maxw">
|
</header>
|
||||||
<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>
|
|
||||||
Extra Features
|
|
||||||
</h2>
|
|
||||||
<div class="maxw">
|
<div class="maxw">
|
||||||
<h3 class="nobg">Jump to section/item</h3>
|
|
||||||
<p>
|
<p>
|
||||||
Press <b>SHIFT+S</b> on any page (except this one) to open up a
|
This handbook is a collection of tweaks of the /tg/station wiki
|
||||||
quick search menu.
|
pages to make them prettier and easier to navigate.
|
||||||
</p>
|
</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>
|
<p>
|
||||||
Results for most pages are section titles, but some pages like
|
Click any guide in the top menu to open it or
|
||||||
Chemistry have support for searching recipes etc.
|
<a href="#" id="welcome_expand">click here</a> to learn about
|
||||||
|
some of the extra features packed in.
|
||||||
</p>
|
</p>
|
||||||
<div class="images">
|
</div>
|
||||||
<img
|
<div class="features">
|
||||||
src="assets/images/welcome/bs-local.png"
|
<h2>
|
||||||
style="width: 40%;"
|
Extra Features
|
||||||
loading="lazy"
|
</h2>
|
||||||
/>
|
<div class="maxw">
|
||||||
<img
|
<h3 class="nobg">Jump to section/item</h3>
|
||||||
src="assets/images/welcome/bs-global.png"
|
<p>
|
||||||
style="width: 40%;"
|
Press <b>SHIFT+S</b> on any page (except this one) to open up
|
||||||
loading="lazy"
|
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>
|
|
||||||
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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -31,6 +31,9 @@ async function loadPage(
|
||||||
let html: string | null = null;
|
let html: string | null = null;
|
||||||
const key = `page:${page}`;
|
const key = `page:${page}`;
|
||||||
|
|
||||||
|
const wrapper = document.createElement("div");
|
||||||
|
wrapper.className = "wrapper";
|
||||||
|
|
||||||
// Check cache for pre-processed page
|
// Check cache for pre-processed page
|
||||||
if (useCache) {
|
if (useCache) {
|
||||||
try {
|
try {
|
||||||
|
|
@ -73,30 +76,27 @@ async function loadPage(
|
||||||
await nextAnimationFrame();
|
await nextAnimationFrame();
|
||||||
|
|
||||||
// Set as HTML content and run HTML manipulations on it
|
// Set as HTML content and run HTML manipulations on it
|
||||||
const div = elem.cloneNode(false) as HTMLDivElement;
|
wrapper.innerHTML = html;
|
||||||
div.innerHTML = html;
|
|
||||||
|
|
||||||
console.log(`${page}: processing`);
|
console.log(`${page}: processing`);
|
||||||
processHTML(div, page);
|
processHTML(wrapper, page);
|
||||||
|
|
||||||
// Get version to set
|
// Get version to set
|
||||||
const version =
|
const version =
|
||||||
page in PAGE_VERSIONS ? PAGE_VERSIONS[page] : PAGE_VERSIONS.$DEFAULT;
|
page in PAGE_VERSIONS ? PAGE_VERSIONS[page] : PAGE_VERSIONS.$DEFAULT;
|
||||||
|
|
||||||
// Save result to cache
|
// Save result to cache
|
||||||
cache.set(key, div.innerHTML, version).then(() => {
|
cache.set(key, wrapper.innerHTML, version).then(() => {
|
||||||
console.log(`${page}: saved to cache`);
|
console.log(`${page}: saved to cache`);
|
||||||
});
|
});
|
||||||
|
|
||||||
elem.replaceWith(div);
|
|
||||||
elem = div;
|
|
||||||
} else {
|
} else {
|
||||||
// Set cached content as HTML
|
// 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
|
postProcessHTML(elem, page); // noop in prod, used in dev for testing candidate DOM changes
|
||||||
}
|
}
|
||||||
|
|
||||||
|
elem.innerHTML = wrapper.outerHTML;
|
||||||
bindFunctions(elem, page);
|
bindFunctions(elem, page);
|
||||||
elem.classList.remove("waiting");
|
elem.classList.remove("waiting");
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -34,9 +34,6 @@ $max-width: 960px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page {
|
.page {
|
||||||
max-width: $max-width;
|
|
||||||
margin: 0 auto;
|
|
||||||
|
|
||||||
h1.pageheader {
|
h1.pageheader {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
padding: 15pt 10pt;
|
padding: 15pt 10pt;
|
||||||
|
|
@ -78,3 +75,8 @@ $max-width: 960px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.wrapper {
|
||||||
|
margin: 0 auto;
|
||||||
|
max-width: $max-width;
|
||||||
|
}
|
||||||
|
|
|
||||||
348
style/ui.scss
348
style/ui.scss
|
|
@ -1,215 +1,225 @@
|
||||||
html,
|
html,
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bgimage {
|
.bgimage {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
img {
|
img {
|
||||||
opacity: 0.4;
|
opacity: 0.4;
|
||||||
width: 80vmin;
|
width: 80vmin;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background: linear-gradient(to bottom, darken($nanotrasen, 20%), darken($nanotrasen, 10%));
|
background: linear-gradient(
|
||||||
background-size: 100% 100%;
|
to bottom,
|
||||||
background-attachment: fixed;
|
darken($nanotrasen, 20%),
|
||||||
color: #fff;
|
darken($nanotrasen, 10%)
|
||||||
font-family: "Iosevka Aile Web", sans-serif;
|
);
|
||||||
font-size: 9pt;
|
background-size: 100% 100%;
|
||||||
line-height: 1.6em;
|
background-attachment: fixed;
|
||||||
|
color: #fff;
|
||||||
|
font-family: "Iosevka Aile Web", sans-serif;
|
||||||
|
font-size: 9pt;
|
||||||
|
line-height: 1.6em;
|
||||||
}
|
}
|
||||||
|
|
||||||
#app {
|
#app {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
&.waiting {
|
&.waiting {
|
||||||
#tab-list,
|
#tab-list,
|
||||||
#section-list {
|
#section-list {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar {
|
::-webkit-scrollbar {
|
||||||
width: 14pt;
|
width: 14pt;
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-track {
|
::-webkit-scrollbar-track {
|
||||||
background: linear-gradient(to bottom, darken($nanotrasen, 0%), darken($nanotrasen, 10%), darken($nanotrasen, 0%));
|
background: linear-gradient(
|
||||||
border: 1px solid lighten($nanotrasen, 10%);
|
to bottom,
|
||||||
|
darken($nanotrasen, 0%),
|
||||||
|
darken($nanotrasen, 10%),
|
||||||
|
darken($nanotrasen, 0%)
|
||||||
|
);
|
||||||
|
border: 1px solid lighten($nanotrasen, 10%);
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb {
|
::-webkit-scrollbar-thumb {
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
background: linear-gradient(
|
background: linear-gradient(
|
||||||
to bottom,
|
to bottom,
|
||||||
lighten($nanotrasen, 20%),
|
lighten($nanotrasen, 20%),
|
||||||
lighten($nanotrasen, 30%),
|
lighten($nanotrasen, 30%),
|
||||||
lighten($nanotrasen, 20%)
|
lighten($nanotrasen, 20%)
|
||||||
);
|
);
|
||||||
border: 1px solid lighten($nanotrasen, 10%);
|
border: 1px solid lighten($nanotrasen, 10%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.speen {
|
.speen {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-size: 12pt;
|
font-size: 12pt;
|
||||||
img {
|
img {
|
||||||
width: 60vmin;
|
width: 60vmin;
|
||||||
max-height: 100%;
|
max-height: 100%;
|
||||||
opacity: 0.9;
|
opacity: 0.9;
|
||||||
padding-bottom: 1em;
|
padding-bottom: 1em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#tabs {
|
#tabs {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
display: grid;
|
display: grid;
|
||||||
overflow: auto;
|
overflow: hidden;
|
||||||
.page {
|
.page {
|
||||||
//visibility: hidden;
|
//visibility: hidden;
|
||||||
will-change: display;
|
will-change: display;
|
||||||
&:not(.active) {
|
&:not(.active) {
|
||||||
display: none;
|
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%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
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%);
|
$section-active: darken($nanotrasen, 5%);
|
||||||
$tab-active: lighten($nanotrasen, 10%);
|
$tab-active: lighten($nanotrasen, 10%);
|
||||||
|
|
||||||
#section-list {
|
#section-list {
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
border-bottom: 2px solid $section-active;
|
border-bottom: 2px solid $section-active;
|
||||||
display: flex;
|
display: flex;
|
||||||
.section {
|
.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;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
background: transparent;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loading-icons {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
user-select: none;
|
user-select: none;
|
||||||
font-size: 9pt;
|
font-size: 9pt;
|
||||||
padding: 3pt 7pt;
|
padding: 3pt 7pt;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
flex-wrap: wrap;
|
color: lighten($nanotrasen, 60%);
|
||||||
div {
|
flex: 1;
|
||||||
border: 1px solid red;
|
&.active {
|
||||||
display: flex;
|
background-color: $section-active;
|
||||||
flex-direction: column;
|
color: white;
|
||||||
align-items: center;
|
|
||||||
}
|
}
|
||||||
img {
|
&:not(.active) {
|
||||||
max-width: 32px;
|
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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Reference in a new issue