Add maximum width to all guides
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
This commit is contained in:
parent
538d6d28a9
commit
d4c05f2208
6 changed files with 82 additions and 61 deletions
|
@ -79,9 +79,7 @@
|
|||
</div>
|
||||
<div class="features">
|
||||
<h2>
|
||||
<div class="maxw">
|
||||
<div>Extra Features</div>
|
||||
</div>
|
||||
Extra Features
|
||||
</h2>
|
||||
<div class="maxw">
|
||||
<h3 class="nobg">Jump to section/item</h3>
|
||||
|
|
|
@ -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":
|
||||
|
|
|
@ -23,26 +23,32 @@ function initWaiting(elem: HTMLElement) {
|
|||
elem.appendChild(spinnerContainer);
|
||||
}
|
||||
|
||||
async function loadPage(page: string, elem: HTMLElement): Promise<HTMLElement> {
|
||||
async function loadPage(
|
||||
page: string,
|
||||
elem: HTMLElement,
|
||||
useCache: boolean
|
||||
): Promise<HTMLElement> {
|
||||
let html: string | null = null;
|
||||
const key = `page:${page}`;
|
||||
|
||||
// Check cache for pre-processed page
|
||||
try {
|
||||
const cachedPage = await cache.get<string>(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<string>(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<string, string> = {};
|
||||
|
||||
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;
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Reference in a new issue