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>
|
||||||
<div class="features">
|
<div class="features">
|
||||||
<h2>
|
<h2>
|
||||||
<div class="maxw">
|
Extra Features
|
||||||
<div>Extra Features</div>
|
|
||||||
</div>
|
|
||||||
</h2>
|
</h2>
|
||||||
<div class="maxw">
|
<div class="maxw">
|
||||||
<h3 class="nobg">Jump to section/item</h3>
|
<h3 class="nobg">Jump to section/item</h3>
|
||||||
|
|
|
@ -82,11 +82,11 @@ export function processChemistry(root: HTMLElement): void {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const rows = Array.from(row.querySelectorAll("td")).slice(1);
|
const rows = Array.from(row.querySelectorAll("td")).slice(1);
|
||||||
let treatment = null;
|
let treatment: HTMLTableCellElement = null;
|
||||||
let desc = null;
|
let desc: HTMLTableCellElement = null;
|
||||||
let metabolism = null;
|
let metabolism: HTMLTableCellElement = null;
|
||||||
let overdose = null;
|
let overdose: HTMLTableCellElement = null;
|
||||||
let addiction = null;
|
let addiction: HTMLTableCellElement = null;
|
||||||
// Handle special cases
|
// Handle special cases
|
||||||
switch (section) {
|
switch (section) {
|
||||||
case "Components":
|
case "Components":
|
||||||
|
|
|
@ -23,11 +23,16 @@ function initWaiting(elem: HTMLElement) {
|
||||||
elem.appendChild(spinnerContainer);
|
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;
|
let html: string | null = null;
|
||||||
const key = `page:${page}`;
|
const key = `page:${page}`;
|
||||||
|
|
||||||
// Check cache for pre-processed page
|
// Check cache for pre-processed page
|
||||||
|
if (useCache) {
|
||||||
try {
|
try {
|
||||||
const cachedPage = await cache.get<string>(key);
|
const cachedPage = await cache.get<string>(key);
|
||||||
if (cachedPage) {
|
if (cachedPage) {
|
||||||
|
@ -44,6 +49,7 @@ async function loadPage(page: string, elem: HTMLElement): Promise<HTMLElement> {
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.log(`${page}: failed to retrieve cache entry:`, e);
|
console.log(`${page}: failed to retrieve cache entry:`, e);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Fetch page content
|
// Fetch page content
|
||||||
if (!html) {
|
if (!html) {
|
||||||
|
@ -121,7 +127,9 @@ export default class TabManager {
|
||||||
|
|
||||||
sectionMap: Record<string, string> = {};
|
sectionMap: Record<string, string> = {};
|
||||||
|
|
||||||
loading: boolean;
|
loading = false;
|
||||||
|
|
||||||
|
cacheEnabled = true;
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
sectionlist: HTMLElement,
|
sectionlist: HTMLElement,
|
||||||
|
@ -254,7 +262,7 @@ export default class TabManager {
|
||||||
}
|
}
|
||||||
|
|
||||||
// Start loading page for new tab
|
// 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
|
// Since element can be replaced (when loading for the first time), make sure the reference is updated
|
||||||
if (elem !== tabContentItem) {
|
if (elem !== tabContentItem) {
|
||||||
this.sections[section].tabs[page].tabContentItem = elem;
|
this.sections[section].tabs[page].tabContentItem = elem;
|
||||||
|
|
|
@ -1,3 +1,5 @@
|
||||||
|
$max-width: 960px;
|
||||||
|
|
||||||
.bgus_hidden {
|
.bgus_hidden {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
@ -30,3 +32,49 @@
|
||||||
.thumbinner {
|
.thumbinner {
|
||||||
width: 100% !important;
|
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;
|
transition: all 200ms;
|
||||||
}
|
}
|
||||||
|
|
||||||
.maxw {
|
|
||||||
margin: 0 auto;
|
|
||||||
max-width: 960px;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
font-size: 15pt;
|
font-size: 15pt;
|
||||||
}
|
}
|
||||||
|
@ -52,6 +46,9 @@
|
||||||
padding-bottom: 0;
|
padding-bottom: 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
|
&:before {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
code {
|
code {
|
||||||
|
|
|
@ -84,14 +84,13 @@ body {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
display: grid;
|
display: grid;
|
||||||
overflow: hidden;
|
overflow: auto;
|
||||||
.page {
|
.page {
|
||||||
//visibility: hidden;
|
//visibility: hidden;
|
||||||
will-change: display;
|
will-change: display;
|
||||||
&:not(.active) {
|
&:not(.active) {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
overflow-y: auto;
|
|
||||||
grid-row: 1;
|
grid-row: 1;
|
||||||
grid-column: 1;
|
grid-column: 1;
|
||||||
&.active {
|
&.active {
|
||||||
|
@ -109,35 +108,6 @@ body {
|
||||||
height: 100%;
|
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