blek
/
resume.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

dynamically resize terminal

This commit is contained in:
b1ek 2023-03-23 10:24:43 +10:00
parent bbc7c4bc32
commit 00cb9e13b5
Signed by: blek
GPG Key ID: 14546221E3595D0C
1 changed files with 24 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/Console.js
View File

@ -6,6 +6,17 @@ export class Console extends React.Component {
constructor(props) {
super(props);
this.terminal = React.createRef(null);
this.terminal_el = document.getElementById('resume_js_app');
const t_width = this.terminal_el.clientWidth - 60;
const t_height = this.terminal_el.clientHeight - 60;
this.state = {
term_box: {
width: Math.floor(t_width / 9),
height: Math.floor(t_height / 18)
}
};
}
render() {
@ -18,8 +29,8 @@ export class Console extends React.Component {
brightGreen: '#15a179'
},
convertEol: true,
rows: 30,
cols: 200
rows: this.state.term_box.height,
cols: this.state.term_box.width
}}
/>
</div>;
@ -32,6 +43,16 @@ export class Console extends React.Component {
/** @type { Terminal } */
const terminal = term_ref.terminal;
terminal.focus();
window.onresize = (ev) => {
const t_width = this.terminal_el.clientWidth;
const t_height = this.terminal_el.clientHeight;
this.setState({
term_box: {
width: Math.floor(t_width / 27),
height: Math.floor(t_height / 6.7)
}
})
};
}
}