From 01c1c477c38113450a5118033bf6049d67885cb8 Mon Sep 17 00:00:00 2001 From: Daniel Imms <2193314+Tyriar@users.noreply.github.com> Date: Sat, 27 Dec 2025 08:57:26 -0800 Subject: [PATCH] Demo: Improve style, remove headers from windows --- .../components/window/addonImageWindow.ts | 26 +++++-------------- .../components/window/addonSearchWindow.ts | 4 --- .../components/window/addonSerializeWindow.ts | 4 --- demo/client/components/window/addonsWindow.ts | 5 ---- demo/client/components/window/gpuWindow.ts | 4 --- .../client/components/window/optionsWindow.ts | 4 --- demo/client/components/window/styleWindow.ts | 4 --- demo/client/components/window/testWindow.ts | 4 --- demo/client/components/window/vtWindow.ts | 4 --- demo/client/components/window/webglWindow.ts | 4 --- demo/index.css | 20 +++++++++----- 11 files changed, 19 insertions(+), 64 deletions(-) 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; }