Add maximum width to all guides
All checks were successful
continuous-integration/drone/push Build is passing

This commit is contained in:
Hamcha 2020-06-30 13:48:47 +02:00
parent 538d6d28a9
commit d4c05f2208
Signed by: hamcha
GPG key ID: 41467804B19A3315
6 changed files with 82 additions and 61 deletions

View file

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

View file

@ -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":

View file

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

View file

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

View file

@ -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 {

View file

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