First attempt at a responsive design, XTerm needs to coercion to behave

This commit is contained in:
Alessandro Pignotti 2024-10-18 09:18:48 +02:00
parent 88bea224d7
commit 4fc2577819
2 changed files with 21 additions and 3 deletions

View file

@ -18,6 +18,7 @@
var term = null;
var cx = null;
var fitAddon = null;
var cxReadFunc = null;
var processCount = 0;
var curVT = 0;
@ -128,13 +129,22 @@
clearInterval(activityEventsInterval);
activityEventsInterval = setInterval(cleanupEvents, 2000);
}
function computeXTermFontSize()
{
return parseInt(getComputedStyle(document.body).fontSize);
}
function handleResize()
{
term.options.fontSize = computeXTermFontSize();
fitAddon.fit();
}
async function initTerminal()
{
const { Terminal } = await import('@xterm/xterm');
const { FitAddon } = await import('@xterm/addon-fit');
const { WebLinksAddon } = await import('@xterm/addon-web-links');
term = new Terminal({cursorBlink:true, convertEol:true, fontFamily:"monospace", fontWeight: 400, fontWeightBold: 700});
var fitAddon = new FitAddon();
term = new Terminal({cursorBlink:true, convertEol:true, fontFamily:"monospace", fontWeight: 400, fontWeightBold: 700, fontSize: computeXTermFontSize()});
fitAddon = new FitAddon();
term.loadAddon(fitAddon);
var linkAddon = new WebLinksAddon();
term.loadAddon(linkAddon);
@ -142,7 +152,7 @@
term.open(consoleDiv);
term.scrollToTop();
fitAddon.fit();
window.addEventListener("resize", function(ev){ fitAddon.fit(); });
window.addEventListener("resize", handleResize);
term.focus();
term.onData(readData);
// Avoid undesired default DnD handling

View file

@ -16,3 +16,11 @@ html
{
height: 100%;
}
@media (width <= 850px)
{
html
{
font-size: calc(100vw / 55);
}
}