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>
<section id="tabs">
<div class="page center" id="Welcome" data-tab="$Welcome">
<div class="wrapper">
<header>
<img class="icon" src="assets/images/outline.svg" />
<img class="type" src="assets/images/type.svg" />
@ -63,18 +64,18 @@
<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.
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.
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.
<a href="#" id="welcome_expand">click here</a> to learn about
some of the extra features packed in.
</p>
</div>
<div class="features">
@ -84,8 +85,8 @@
<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.
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
@ -104,8 +105,9 @@
/>
</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.
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>
@ -115,12 +117,14 @@
<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.
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>
</section>
</main>
<noscript>

View file

@ -35,7 +35,7 @@ async function load() {
);
spinnerContainer.appendChild(icons);
const promises = sections.flatMap(async (section) => {
const promises = sections.flatMap((section) => {
manager.createSection(section.name);
return section.tabs.map(async (tab) => {
@ -60,7 +60,6 @@ async function load() {
Promise.all(promises).then(() => {
// Remove app-wide loading
manager.setLoading(false);
welcome.classList.add("active");
});
}

View file

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

View file

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

View file

@ -23,7 +23,11 @@ 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-attachment: fixed;
color: #fff;
@ -50,7 +54,12 @@ body {
}
::-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%);
}
@ -84,13 +93,14 @@ body {
flex: 1;
z-index: 1;
display: grid;
overflow: auto;
overflow: hidden;
.page {
//visibility: hidden;
will-change: display;
&:not(.active) {
display: none;
}
overflow: auto;
grid-row: 1;
grid-column: 1;
&.active {