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>
|
||||
<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>
|
||||
Extra Features
|
||||
</h2>
|
||||
<div class="wrapper">
|
||||
<header>
|
||||
<img class="icon" src="assets/images/outline.svg" />
|
||||
<img class="type" src="assets/images/type.svg" />
|
||||
</header>
|
||||
<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.
|
||||
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>
|
||||
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
|
||||
<a href="#" id="welcome_expand">click here</a> to learn about
|
||||
some of the extra features packed in.
|
||||
</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>
|
||||
<div class="features">
|
||||
<h2>
|
||||
Extra Features
|
||||
</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>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
348
style/ui.scss
348
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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Reference in a new issue