From d3bf809f754647059ae319cfd6ef9a2ca1b15371 Mon Sep 17 00:00:00 2001 From: billchurch Date: Fri, 9 Feb 2018 22:21:53 -0500 Subject: [PATCH] update resize logic fixes #43 tested with IE11,Edge,Chrome 64,Firefox 58,Safari 11,Opera 46 --- public/webssh2.bundle.js | 8 +++----- public/webssh2.css | 41 +++++++++++++++------------------------- src/css/style.css | 41 +++++++++++++++------------------------- src/js/index.js | 9 ++++----- 4 files changed, 37 insertions(+), 62 deletions(-) diff --git a/public/webssh2.bundle.js b/public/webssh2.bundle.js index d7e7feb..caa5a3c 100644 --- a/public/webssh2.bundle.js +++ b/public/webssh2.bundle.js @@ -131,12 +131,10 @@ term.open(terminalContainer) term.focus() term.fit() -document.body.onresize = function () { +window.addEventListener('resize', resizeScreen, false) + +function resizeScreen () { term.fit() - term.resize(term.cols, term.rows) - console.log('document resize...') - console.log('geometry cols: ' + term.cols + ' rows: ' + term.rows) - socket.emit('resize', {cols: term.cols, rows: term.rows}) } if (document.location.pathname) { diff --git a/public/webssh2.css b/public/webssh2.css index 6702550..328a7a1 100644 --- a/public/webssh2.css +++ b/public/webssh2.css @@ -131,7 +131,6 @@ body { height: 100%; margin: 0; } - #header { color: rgb(240, 240, 240); background-color: rgb(0, 128, 0); @@ -143,40 +142,38 @@ body { flex: 0 1 auto; z-index: 99; } - .box { - display: flex; - flex-flow: column; - height: 100%; + display: block; + height: 100%; } - #terminal-container { - flex: 1 1 auto; + display: block; width: 100%; margin: 0 auto; padding: 2px; + height: calc(100% - 19px); } - #terminal-container .terminal { background-color: #000000; color: #fafafa; padding: 2px; + height: calc(100% - 19px); } - #terminal-container .terminal:focus .terminal-cursor { background-color: #fafafa; } - #bottomdiv { + position: fixed; + left: 0; + bottom: 0; width: 100%; background-color: rgb(50, 50, 50); border-color: white; border-style: solid none none none; border-width: 1px; z-index: 99; - flex: 0 1 30px; + height: 19px; } - #footer { display: inline-block; color: rgb(240, 240, 240); @@ -188,7 +185,6 @@ body { border-width: 1px; text-align: left; } - #status { display: inline-block; color: rgb(240, 240, 240); @@ -201,51 +197,44 @@ body { text-align: left; z-index: 100; } - #menu { display: inline-block; - font-size:16px; + font-size: 16px; color: rgb(255, 255, 255); padding-left: 10px; z-index: 100; } - #menu:hover .dropup-content { display: block; } - .dropup { position: relative; display: inline-block; } - .dropup-content { display: none; position: absolute; background-color: #f1f1f1; - font-size:16px; + font-size: 16px; min-width: 160px; - bottom:18px; + bottom: 18px; z-index: 101; } - .dropup-content a { color: #777; padding: 12px 16px; text-decoration: none; display: block; } - -.dropup-content a:hover {background-color: #ccc} - +.dropup-content a:hover { + background-color: #ccc +} .dropup:hover .dropup-content { display: block; } - .dropup:click .dropup-content { display: block; } - .dropup:hover .dropbtn { background-color: #3e8e41; } diff --git a/src/css/style.css b/src/css/style.css index c7513ea..b94bcb6 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -7,7 +7,6 @@ body { height: 100%; margin: 0; } - #header { color: rgb(240, 240, 240); background-color: rgb(0, 128, 0); @@ -19,40 +18,38 @@ body { flex: 0 1 auto; z-index: 99; } - .box { - display: flex; - flex-flow: column; - height: 100%; + display: block; + height: 100%; } - #terminal-container { - flex: 1 1 auto; + display: block; width: 100%; margin: 0 auto; padding: 2px; + height: calc(100% - 19px); } - #terminal-container .terminal { background-color: #000000; color: #fafafa; padding: 2px; + height: calc(100% - 19px); } - #terminal-container .terminal:focus .terminal-cursor { background-color: #fafafa; } - #bottomdiv { + position: fixed; + left: 0; + bottom: 0; width: 100%; background-color: rgb(50, 50, 50); border-color: white; border-style: solid none none none; border-width: 1px; z-index: 99; - flex: 0 1 30px; + height: 19px; } - #footer { display: inline-block; color: rgb(240, 240, 240); @@ -64,7 +61,6 @@ body { border-width: 1px; text-align: left; } - #status { display: inline-block; color: rgb(240, 240, 240); @@ -77,51 +73,44 @@ body { text-align: left; z-index: 100; } - #menu { display: inline-block; - font-size:16px; + font-size: 16px; color: rgb(255, 255, 255); padding-left: 10px; z-index: 100; } - #menu:hover .dropup-content { display: block; } - .dropup { position: relative; display: inline-block; } - .dropup-content { display: none; position: absolute; background-color: #f1f1f1; - font-size:16px; + font-size: 16px; min-width: 160px; - bottom:18px; + bottom: 18px; z-index: 101; } - .dropup-content a { color: #777; padding: 12px 16px; text-decoration: none; display: block; } - -.dropup-content a:hover {background-color: #ccc} - +.dropup-content a:hover { + background-color: #ccc +} .dropup:hover .dropup-content { display: block; } - .dropup:click .dropup-content { display: block; } - .dropup:hover .dropbtn { background-color: #3e8e41; } diff --git a/src/js/index.js b/src/js/index.js index 1fc555d..2cb6b0b 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -43,12 +43,11 @@ term.open(terminalContainer) term.focus() term.fit() -document.body.onresize = function () { +window.addEventListener('resize', resizeScreen, false) + +function resizeScreen () { term.fit() - term.resize(term.cols, term.rows) - console.log('document resize...') - console.log('geometry cols: ' + term.cols + ' rows: ' + term.rows) - socket.emit('resize', {cols: term.cols, rows: term.rows}) + socket.emit('resize', {cols: term.cols, rows: term.rows }) } if (document.location.pathname) {