xobs/farpatch-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

css: fix window alignment

Browse Source 
Signed-off-by: Sean Cross <sean@xobs.io>
This commit is contained in:
Sean Cross 2023-12-02 08:51:07 +08:00
parent 32c1b7d54b
commit 31f0dff822
3 changed files with 15 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/interface/uart.ts
View File

@ -12,6 +12,7 @@ export class UartWidget implements FarpatchWidget {
initialized: boolean = false; initialized: boolean = false;
constructor() { constructor() {
this.view = document.createElement("div"); this.view = document.createElement("div");
this.view.classList.add("terminal");
this.terminal = new Terminal({ theme: { background: "#000000" } }); this.terminal = new Terminal({ theme: { background: "#000000" } });
this.fitAddon = new FitAddon(); this.fitAddon = new FitAddon();
this.serializeAddon = new SerializeAddon(); this.serializeAddon = new SerializeAddon();
@ -23,9 +24,11 @@ export class UartWidget implements FarpatchWidget {
onFocus(element: HTMLElement): void { onFocus(element: HTMLElement): void {
console.log("Displaying UART Widget"); console.log("Displaying UART Widget");
if (!this.initialized) { 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"); console.log("Initializing xterm.js");
var terminalContainer = document.createElement("div"); // var terminalContainer = document.createElement("div");
this.view.appendChild(terminalContainer); // this.view.appendChild(terminalContainer);
this.terminal.loadAddon(this.fitAddon); this.terminal.loadAddon(this.fitAddon);
this.terminal.loadAddon(this.serializeAddon); this.terminal.loadAddon(this.serializeAddon);
this.terminal.onKey((e) => { this.terminal.onKey((e) => {
@ -35,16 +38,15 @@ export class UartWidget implements FarpatchWidget {
this.terminal.write('\n'); this.terminal.write('\n');
} }
}); });
this.terminal.open(terminalContainer); this.terminal.open(this.view);
this.terminal.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa'); this.terminal.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa\r\n');
this.initialized = true; this.initialized = true;
} }
element.appendChild(this.view); element.appendChild(this.view);
this.resizeFunction();
window.addEventListener('resize', this.resizeFunction); window.addEventListener('resize', this.resizeFunction);
window.setTimeout(() => { window.setTimeout(() => {
this.terminal.focus(); this.terminal.focus();
this.resizeFunction();
}, 10); }, 10);
} }
onBlur(element: HTMLElement): void { onBlur(element: HTMLElement): void {

1
static/css/desktop.css
View File

@ -19,6 +19,7 @@ main {
.main-content { .main-content {
display: none; display: none;
height: 100vh;
} }
.main-content-active { .main-content-active {

8
static/css/mobile.css
View File

@ -7,6 +7,10 @@
padding: 0; padding: 0;
} }
.main-content {
height: calc(100vh - 5rem);
}
.main-sidebar-rail { .main-sidebar-rail {
margin-left: 0; margin-left: 0;
} }
@ -18,12 +22,12 @@
height: 5rem; height: 5rem;
align-items: flex-start; align-items: flex-start;
padding-top: 0.4rem; padding-top: 0.4rem;
transition: none; transition: none;
} }
.sidenav-rail { .sidenav-rail {
width: 100vw; width: 100vw;
transition: none; transition: none;
} }
.sidenav-nav { .sidenav-nav {