diff --git a/index.html b/index.html index 5aa8389..b2316ec 100644 --- a/index.html +++ b/index.html @@ -79,9 +79,7 @@

-
-
Extra Features
-
+ Extra Features

Jump to section/item

diff --git a/src/scripts/pages/chemistry.ts b/src/scripts/pages/chemistry.ts index 4a3d50f..4bcfab8 100644 --- a/src/scripts/pages/chemistry.ts +++ b/src/scripts/pages/chemistry.ts @@ -82,11 +82,11 @@ export function processChemistry(root: HTMLElement): void { return; } const rows = Array.from(row.querySelectorAll("td")).slice(1); - let treatment = null; - let desc = null; - let metabolism = null; - let overdose = null; - let addiction = null; + let treatment: HTMLTableCellElement = null; + let desc: HTMLTableCellElement = null; + let metabolism: HTMLTableCellElement = null; + let overdose: HTMLTableCellElement = null; + let addiction: HTMLTableCellElement = null; // Handle special cases switch (section) { case "Components": diff --git a/src/ui/TabManager.ts b/src/ui/TabManager.ts index 2360c27..a5b9f1a 100644 --- a/src/ui/TabManager.ts +++ b/src/ui/TabManager.ts @@ -23,26 +23,32 @@ function initWaiting(elem: HTMLElement) { elem.appendChild(spinnerContainer); } -async function loadPage(page: string, elem: HTMLElement): Promise { +async function loadPage( + page: string, + elem: HTMLElement, + useCache: boolean +): Promise { let html: string | null = null; const key = `page:${page}`; // Check cache for pre-processed page - try { - const cachedPage = await cache.get(key); - if (cachedPage) { - // Get expected version - const expectedVersion = - page in PAGE_VERSIONS ? PAGE_VERSIONS[page] : PAGE_VERSIONS.$DEFAULT; - if (cachedPage.version === expectedVersion) { - console.log(`${page}: found cached entry`); - html = cachedPage.value; - } else { - console.log(`${page}: found outdated cache entry`); + if (useCache) { + try { + const cachedPage = await cache.get(key); + if (cachedPage) { + // Get expected version + const expectedVersion = + page in PAGE_VERSIONS ? PAGE_VERSIONS[page] : PAGE_VERSIONS.$DEFAULT; + if (cachedPage.version === expectedVersion) { + console.log(`${page}: found cached entry`); + html = cachedPage.value; + } else { + console.log(`${page}: found outdated cache entry`); + } } + } catch (e) { + console.log(`${page}: failed to retrieve cache entry:`, e); } - } catch (e) { - console.log(`${page}: failed to retrieve cache entry:`, e); } // Fetch page content @@ -121,7 +127,9 @@ export default class TabManager { sectionMap: Record = {}; - loading: boolean; + loading = false; + + cacheEnabled = true; constructor( sectionlist: HTMLElement, @@ -254,7 +262,7 @@ export default class TabManager { } // Start loading page for new tab - const elem = await loadPage(page, tabContentItem); + const elem = await loadPage(page, tabContentItem, this.cacheEnabled); // Since element can be replaced (when loading for the first time), make sure the reference is updated if (elem !== tabContentItem) { this.sections[section].tabs[page].tabContentItem = elem; diff --git a/style/pages/global.scss b/style/pages/global.scss index dd7d78d..d3da18f 100644 --- a/style/pages/global.scss +++ b/style/pages/global.scss @@ -1,3 +1,5 @@ +$max-width: 960px; + .bgus_hidden { display: none !important; } @@ -30,3 +32,49 @@ .thumbinner { width: 100% !important; } + +.page { + max-width: $max-width; + margin: 0 auto; + + h1.pageheader { + margin-top: 0; + padding: 15pt 10pt; + } + + p, + h2, + h3, + h4 { + padding-left: 10pt; + padding-right: 10pt; + } + a[href] { + color: white; + } + h1, + h2, + h3 { + position: sticky; + top: 0; + background: $nanotrasen; + padding: 10pt; + z-index: 999; + max-width: $max-width; + &:before { + display: block; + content: " "; + left: -100%; + right: calc((960px - 100vw) / 2 + 10px); + top: 0; + height: 100%; + position: absolute; + z-index: -99; + background: $nanotrasen; + } + } + .mw-headline { + display: flex; + align-items: center; + } +} diff --git a/style/pages/welcome.scss b/style/pages/welcome.scss index 1c96304..ed3e391 100644 --- a/style/pages/welcome.scss +++ b/style/pages/welcome.scss @@ -36,12 +36,6 @@ transition: all 200ms; } - .maxw { - margin: 0 auto; - max-width: 960px; - text-align: left; - } - h3 { font-size: 15pt; } @@ -52,6 +46,9 @@ padding-bottom: 0; position: relative; z-index: 2; + &:before { + display: none; + } } code { diff --git a/style/ui.scss b/style/ui.scss index 3b29fa5..d1e427c 100644 --- a/style/ui.scss +++ b/style/ui.scss @@ -84,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-y: auto; grid-row: 1; grid-column: 1; &.active { @@ -109,35 +108,6 @@ body { height: 100%; } } - - h1.pageheader { - margin-top: 0; - padding: 15pt 10pt; - } - - p, - h2, - h3, - h4 { - padding-left: 10pt; - padding-right: 10pt; - } - a[href] { - color: white; - } - h1, - h2, - h3 { - position: sticky; - top: 0; - background: $nanotrasen; - padding: 10pt; - z-index: 999; - } - .mw-headline { - display: flex; - align-items: center; - } } }