Compare commits

..

2 commits

Author SHA1 Message Date
447473a5b7
Remove rogue async breaking my loading screen
All checks were successful
continuous-integration/drone/push Build is passing
2020-07-02 10:46:46 +02:00
bc0e467a88
hotfix: use wrapper to fix scrollbar misalignments 2020-07-02 10:40:52 +02:00
5 changed files with 259 additions and 244 deletions

View file

@ -50,6 +50,7 @@
<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">
<div class="wrapper">
<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" />
@ -63,18 +64,18 @@
<ul> <ul>
<li> <li>
It's being built with smaller windows in mind (think SS13 It's being built with smaller windows in mind (think SS13
popups), large window format is planned but it's just not there popups), large window format is planned but it's just not
yet. there yet.
</li> </li>
<li> <li>
There is a lot of development still happening, so many parts are There is a lot of development still happening, so many parts
not as polished as they should be. are not as polished as they should be.
</li> </li>
</ul> </ul>
<p> <p>
Click any guide in the top menu to open it or Click any guide in the top menu to open it or
<a href="#" id="welcome_expand">click here</a> to learn about some <a href="#" id="welcome_expand">click here</a> to learn about
of the extra features packed in. some of the extra features packed in.
</p> </p>
</div> </div>
<div class="features"> <div class="features">
@ -84,8 +85,8 @@
<div class="maxw"> <div class="maxw">
<h3 class="nobg">Jump to section/item</h3> <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 Press <b>SHIFT+S</b> on any page (except this one) to open up
quick search menu. a quick search menu.
</p> </p>
<p> <p>
Results for most pages are section titles, but some pages like Results for most pages are section titles, but some pages like
@ -104,8 +105,9 @@
/> />
</div> </div>
<p> <p>
By default, only results for the current page are shown, you can By default, only results for the current page are shown, you
use <code>@</code> as prefix to search in all guides at once. can use <code>@</code> as prefix to search in all guides at
once.
</p> </p>
<h3 class="nobg">(Chemistry) Auto-Expanded tooltips</h3> <h3 class="nobg">(Chemistry) Auto-Expanded tooltips</h3>
<p> <p>
@ -115,12 +117,14 @@
<h3 class="nobg">(Chemistry) Beaker sizing</h3> <h3 class="nobg">(Chemistry) Beaker sizing</h3>
<p> <p>
Press <b>SHIFT+B</b> to set your target reagent output and the Press <b>SHIFT+B</b> to set your target reagent output and the
inputs will change from "part" to "ml". This is currently quite inputs will change from "part" to "ml". This is currently
inaccurate, use it as a guideline but apply common sense. quite inaccurate, use it as a guideline but apply common
sense.
</p> </p>
</div> </div>
</div> </div>
</div> </div>
</div>
</section> </section>
</main> </main>
<noscript> <noscript>

View file

@ -35,7 +35,7 @@ async function load() {
); );
spinnerContainer.appendChild(icons); spinnerContainer.appendChild(icons);
const promises = sections.flatMap(async (section) => { const promises = sections.flatMap((section) => {
manager.createSection(section.name); manager.createSection(section.name);
return section.tabs.map(async (tab) => { return section.tabs.map(async (tab) => {
@ -60,7 +60,6 @@ async function load() {
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"); welcome.classList.add("active");
}); });
} }

View file

@ -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");

View file

@ -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;
}

View file

@ -23,7 +23,11 @@ body {
} }
body { body {
background: linear-gradient(to bottom, darken($nanotrasen, 20%), darken($nanotrasen, 10%)); background: linear-gradient(
to bottom,
darken($nanotrasen, 20%),
darken($nanotrasen, 10%)
);
background-size: 100% 100%; background-size: 100% 100%;
background-attachment: fixed; background-attachment: fixed;
color: #fff; color: #fff;
@ -50,7 +54,12 @@ body {
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
background: linear-gradient(to bottom, darken($nanotrasen, 0%), darken($nanotrasen, 10%), darken($nanotrasen, 0%)); background: linear-gradient(
to bottom,
darken($nanotrasen, 0%),
darken($nanotrasen, 10%),
darken($nanotrasen, 0%)
);
border: 1px solid lighten($nanotrasen, 10%); border: 1px solid lighten($nanotrasen, 10%);
} }
@ -84,13 +93,14 @@ body {
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;
} }
overflow: auto;
grid-row: 1; grid-row: 1;
grid-column: 1; grid-column: 1;
&.active { &.active {