index.html

@@ -50,7 +50,6 @@
       <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" />
@@ -64,18 +63,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">
@@ -85,8 +84,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
@@ -105,9 +104,8 @@
                 />
               </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>
@@ -117,14 +115,12 @@
               <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>

src/index.ts

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

src/ui/TabManager.ts

@@ -31,9 +31,6 @@ 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 {
@@ -76,27 +73,30 @@ async function loadPage(
     await nextAnimationFrame();
 
     // Set as HTML content and run HTML manipulations on it
-    wrapper.innerHTML = html;
+    const div = elem.cloneNode(false) as HTMLDivElement;
+    div.innerHTML = html;
 
     console.log(`${page}: processing`);
-    processHTML(wrapper, page);
+    processHTML(div, page);
 
     // Get version to set
     const version =
       page in PAGE_VERSIONS ? PAGE_VERSIONS[page] : PAGE_VERSIONS.$DEFAULT;
 
     // Save result to cache
-    cache.set(key, wrapper.innerHTML, version).then(() => {
+    cache.set(key, div.innerHTML, version).then(() => {
       console.log(`${page}: saved to cache`);
     });
+
+    elem.replaceWith(div);
+    elem = div;
   } else {
     // Set cached content as HTML
-    wrapper.innerHTML = html;
+    elem.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");
 

style/pages/global.scss

@@ -34,6 +34,9 @@ $max-width: 960px;
 }
 
 .page {
+  max-width: $max-width;
+  margin: 0 auto;
+
   h1.pageheader {
     margin-top: 0;
     padding: 15pt 10pt;
@@ -75,8 +78,3 @@ $max-width: 960px;
     align-items: center;
   }
 }
-
-.wrapper {
-  margin: 0 auto;
-  max-width: $max-width;
-}

style/ui.scss

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