diff --git a/demo/client/components/window/addonImageWindow.ts b/demo/client/components/window/addonImageWindow.ts
index 4112132f..6c814622 100644
--- a/demo/client/components/window/addonImageWindow.ts
+++ b/demo/client/components/window/addonImageWindow.ts
@@ -15,17 +15,6 @@ export class AddonImageWindow extends BaseWindow implements IControlWindow {
private _imageOptionsTextarea: HTMLTextAreaElement;
public build(container: HTMLElement): void {
- const h4 = document.createElement('h4');
- h4.textContent = 'Image Addon';
- container.appendChild(h4);
-
- const details = document.createElement('details');
- const summary = document.createElement('summary');
- summary.textContent = 'image addon settings';
- details.appendChild(summary);
-
- const wrapper = document.createElement('div');
-
// Storage limit
const storageLimitLabel = document.createElement('label');
storageLimitLabel.textContent = 'Storage Limit (in MB) ';
@@ -33,8 +22,8 @@ export class AddonImageWindow extends BaseWindow implements IControlWindow {
this._imageStorageLimitInput.type = 'number';
this._imageStorageLimitInput.id = 'image-storagelimit';
storageLimitLabel.appendChild(this._imageStorageLimitInput);
- wrapper.appendChild(storageLimitLabel);
- wrapper.appendChild(document.createElement('br'));
+ container.appendChild(storageLimitLabel);
+ container.appendChild(document.createElement('br'));
// Show placeholder
const placeholderLabel = document.createElement('label');
@@ -43,9 +32,9 @@ export class AddonImageWindow extends BaseWindow implements IControlWindow {
this._imageShowPlaceholderCheckbox.type = 'checkbox';
this._imageShowPlaceholderCheckbox.id = 'image-showplaceholder';
placeholderLabel.appendChild(this._imageShowPlaceholderCheckbox);
- wrapper.appendChild(placeholderLabel);
- wrapper.appendChild(document.createElement('br'));
- wrapper.appendChild(document.createElement('br'));
+ container.appendChild(placeholderLabel);
+ container.appendChild(document.createElement('br'));
+ container.appendChild(document.createElement('br'));
// Ctor options
const optionsLabel = document.createElement('label');
@@ -56,10 +45,7 @@ export class AddonImageWindow extends BaseWindow implements IControlWindow {
this._imageOptionsTextarea.cols = 40;
this._imageOptionsTextarea.rows = 12;
optionsLabel.appendChild(this._imageOptionsTextarea);
- wrapper.appendChild(optionsLabel);
-
- details.appendChild(wrapper);
- container.appendChild(details);
+ container.appendChild(optionsLabel);
}
public get imageStorageLimitInput(): HTMLInputElement {
diff --git a/demo/client/components/window/addonSearchWindow.ts b/demo/client/components/window/addonSearchWindow.ts
index 47217f3b..bb4e15f7 100644
--- a/demo/client/components/window/addonSearchWindow.ts
+++ b/demo/client/components/window/addonSearchWindow.ts
@@ -19,10 +19,6 @@ export class AddonSearchWindow extends BaseWindow implements IControlWindow {
private _highlightAllMatchesCheckbox: HTMLInputElement;
public build(container: HTMLElement): void {
- const h4 = document.createElement('h4');
- h4.textContent = 'SearchAddon';
- container.appendChild(h4);
-
const wrapper = document.createElement('div');
wrapper.style.display = 'flex';
wrapper.style.flexDirection = 'column';
diff --git a/demo/client/components/window/addonSerializeWindow.ts b/demo/client/components/window/addonSerializeWindow.ts
index 031f02dd..688708ab 100644
--- a/demo/client/components/window/addonSerializeWindow.ts
+++ b/demo/client/components/window/addonSerializeWindow.ts
@@ -18,10 +18,6 @@ export class AddonSerializeWindow extends BaseWindow implements IControlWindow {
private _writeToTerminalCheckbox: HTMLInputElement;
public build(container: HTMLElement): void {
- const h4 = document.createElement('h4');
- h4.textContent = 'SerializeAddon';
- container.appendChild(h4);
-
const wrapper = document.createElement('div');
// Serialize button
diff --git a/demo/client/components/window/addonsWindow.ts b/demo/client/components/window/addonsWindow.ts
index a0590482..c69bf521 100644
--- a/demo/client/components/window/addonsWindow.ts
+++ b/demo/client/components/window/addonsWindow.ts
@@ -13,11 +13,6 @@ export class AddonsWindow extends BaseWindow implements IControlWindow {
private _addonsContainer: HTMLElement;
public build(container: HTMLElement): void {
- // Heading
- const heading = document.createElement('h3');
- heading.textContent = 'Addons';
- container.appendChild(heading);
-
// Description
const description = document.createElement('p');
description.textContent = 'Addons can be loaded and unloaded on a particular terminal to extend its functionality.';
diff --git a/demo/client/components/window/gpuWindow.ts b/demo/client/components/window/gpuWindow.ts
index 05827287..7035321f 100644
--- a/demo/client/components/window/gpuWindow.ts
+++ b/demo/client/components/window/gpuWindow.ts
@@ -13,10 +13,6 @@ export class GpuWindow extends BaseWindow implements IControlWindow {
private _textureAtlasContainer: HTMLElement;
public build(container: HTMLElement): void {
- const heading = document.createElement('h3');
- heading.textContent = 'WebGL';
- container.appendChild(heading);
-
const zoomCheckbox = document.createElement('input');
zoomCheckbox.type = 'checkbox';
zoomCheckbox.id = 'texture-atlas-zoom';
diff --git a/demo/client/components/window/optionsWindow.ts b/demo/client/components/window/optionsWindow.ts
index 1e3d1622..18c31410 100644
--- a/demo/client/components/window/optionsWindow.ts
+++ b/demo/client/components/window/optionsWindow.ts
@@ -53,10 +53,6 @@ export class OptionsWindow extends BaseWindow implements IControlWindow {
public build(container: HTMLElement): void {
this._container = container;
- const heading = document.createElement('h3');
- heading.textContent = 'Options';
- container.appendChild(heading);
-
const description = document.createElement('p');
description.innerHTML = 'These options can be set in the Terminal constructor or by using the Terminal.options property.';
container.appendChild(description);
diff --git a/demo/client/components/window/styleWindow.ts b/demo/client/components/window/styleWindow.ts
index cc36dd7c..94cf6e4c 100644
--- a/demo/client/components/window/styleWindow.ts
+++ b/demo/client/components/window/styleWindow.ts
@@ -13,10 +13,6 @@ export class StyleWindow extends BaseWindow implements IControlWindow {
private _paddingElement: HTMLInputElement;
public build(container: HTMLElement): void {
- const heading = document.createElement('h3');
- heading.textContent = 'Style';
- container.appendChild(heading);
-
const wrapper = document.createElement('div');
wrapper.style.display = 'inline-block';
wrapper.style.marginRight = '16px';
diff --git a/demo/client/components/window/testWindow.ts b/demo/client/components/window/testWindow.ts
index bb542595..d42647e3 100644
--- a/demo/client/components/window/testWindow.ts
+++ b/demo/client/components/window/testWindow.ts
@@ -29,10 +29,6 @@ export class TestWindow extends BaseWindow implements IControlWindow {
}
public build(container: HTMLElement): void {
- const heading = document.createElement('h3');
- heading.textContent = 'Test';
- container.appendChild(heading);
-
const wrapper = document.createElement('div');
wrapper.style.display = 'inline-block';
wrapper.style.marginRight = '16px';
diff --git a/demo/client/components/window/vtWindow.ts b/demo/client/components/window/vtWindow.ts
index b059a5cf..7e6d2c74 100644
--- a/demo/client/components/window/vtWindow.ts
+++ b/demo/client/components/window/vtWindow.ts
@@ -17,10 +17,6 @@ export class VtWindow extends BaseWindow implements IControlWindow {
public build(container: HTMLElement): void {
this._container = container;
- const heading = document.createElement('h3');
- heading.textContent = 'VT';
- container.appendChild(heading);
-
const vtContainer = document.createElement('div');
vtContainer.id = 'vt-container';
container.appendChild(vtContainer);
diff --git a/demo/client/components/window/webglWindow.ts b/demo/client/components/window/webglWindow.ts
index 30544241..b63728eb 100644
--- a/demo/client/components/window/webglWindow.ts
+++ b/demo/client/components/window/webglWindow.ts
@@ -13,10 +13,6 @@ export class WebglWindow extends BaseWindow implements IControlWindow {
private _textureAtlasContainer: HTMLElement;
public build(container: HTMLElement): void {
- const heading = document.createElement('h3');
- heading.textContent = 'WebGL';
- container.appendChild(heading);
-
const zoomCheckbox = document.createElement('input');
zoomCheckbox.type = 'checkbox';
zoomCheckbox.id = 'texture-atlas-zoom';
diff --git a/demo/index.css b/demo/index.css
index 747854a8..48a7a555 100644
--- a/demo/index.css
+++ b/demo/index.css
@@ -14,8 +14,7 @@ body {
display: flex;
align-items: center;
justify-content: space-between;
- padding: 0 10px;
- border-bottom: 1px solid #0005;
+ padding: 0 15px;
}
.banner-title {
color: #5DA5D5;
@@ -50,6 +49,11 @@ body {
p {
font-size: 0.9em;
font-style: italic
+
+}
+dl:first-child,
+p:first-child {
+ margin-top: 0;
}
#option-container {
@@ -94,12 +98,15 @@ div:first-of-type.grid {
#sidebar {
position: fixed;
top: 24px;
- right: 0;
+ right: 15px; /* Room for scrollbar */
width: 400px;
+ max-width: calc(100vw - 30px); /* Don't exceed screen width minus scrollbar */
height: 500px;
- background: #fff;
- border: 1px solid #ccc;
- box-shadow: 0 2px 10px rgba(0,0,0,0.2);
+ background: #161716;
+ color: #fff;
+ border: 1px solid #333;
+ border-top: none;
+ box-shadow: 0 2px 10px rgba(0,0,0,0.4);
z-index: 1000;
overflow: auto;
flex: none;
@@ -155,7 +162,6 @@ div:first-of-type.grid {
.tabContent {
display: none;
padding: 6px 12px;
- border: 1px solid #ccc;
border-top: none;
}