diff --git a/src/interface/uart.ts b/src/interface/uart.ts index 6583d33..0299652 100644 --- a/src/interface/uart.ts +++ b/src/interface/uart.ts @@ -12,6 +12,7 @@ export class UartWidget implements FarpatchWidget { initialized: boolean = false; constructor() { this.view = document.createElement("div"); + this.view.classList.add("terminal"); this.terminal = new Terminal({ theme: { background: "#000000" } }); this.fitAddon = new FitAddon(); this.serializeAddon = new SerializeAddon(); @@ -23,9 +24,11 @@ export class UartWidget implements FarpatchWidget { onFocus(element: HTMLElement): void { console.log("Displaying UART Widget"); if (!this.initialized) { + // Ensure the parent frame doesn't get any scrollbars, since we're taking up the whole view + element.style.overflow = "hidden"; console.log("Initializing xterm.js"); - var terminalContainer = document.createElement("div"); - this.view.appendChild(terminalContainer); + // var terminalContainer = document.createElement("div"); + // this.view.appendChild(terminalContainer); this.terminal.loadAddon(this.fitAddon); this.terminal.loadAddon(this.serializeAddon); this.terminal.onKey((e) => { @@ -35,16 +38,15 @@ export class UartWidget implements FarpatchWidget { this.terminal.write('\n'); } }); - this.terminal.open(terminalContainer); - this.terminal.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa'); + this.terminal.open(this.view); + this.terminal.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa\r\n'); this.initialized = true; } element.appendChild(this.view); - this.resizeFunction(); window.addEventListener('resize', this.resizeFunction); window.setTimeout(() => { - this.terminal.focus(); + this.resizeFunction(); }, 10); } onBlur(element: HTMLElement): void { diff --git a/static/css/desktop.css b/static/css/desktop.css index db46cdf..4772307 100644 --- a/static/css/desktop.css +++ b/static/css/desktop.css @@ -19,6 +19,7 @@ main { .main-content { display: none; + height: 100vh; } .main-content-active { diff --git a/static/css/mobile.css b/static/css/mobile.css index 0fa4e71..24f8c52 100644 --- a/static/css/mobile.css +++ b/static/css/mobile.css @@ -7,6 +7,10 @@ padding: 0; } + .main-content { + height: calc(100vh - 5rem); + } + .main-sidebar-rail { margin-left: 0; } @@ -18,12 +22,12 @@ height: 5rem; align-items: flex-start; padding-top: 0.4rem; - transition: none; + transition: none; } .sidenav-rail { width: 100vw; - transition: none; + transition: none; } .sidenav-nav {