Fabio/webssh2
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update resize logic

Browse source 
fixes #43
tested with IE11,Edge,Chrome 64,Firefox 58,Safari 11,Opera 46
This commit is contained in:
billchurch 2018-02-09 22:21:53 -05:00
parent d456a180d9
commit d3bf809f75
4 changed files with 37 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
public/webssh2.bundle.js
View file

@ -131,12 +131,10 @@ term.open(terminalContainer)
term.focus() term.focus()
term.fit() term.fit()
document.body.onresize = function () { window.addEventListener('resize', resizeScreen, false)
function resizeScreen () {
term.fit() 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) { if (document.location.pathname) {

33
public/webssh2.css
View file

@ -131,7 +131,6 @@ body {
height: 100%; height: 100%;
margin: 0; margin: 0;
} }
#header { #header {
color: rgb(240, 240, 240); color: rgb(240, 240, 240);
background-color: rgb(0, 128, 0); background-color: rgb(0, 128, 0);
@ -143,40 +142,38 @@ body {
flex: 0 1 auto; flex: 0 1 auto;
z-index: 99; z-index: 99;
} }
.box { .box {
display: flex; display: block;
flex-flow: column;
height: 100%; height: 100%;
} }
#terminal-container { #terminal-container {
flex: 1 1 auto; display: block;
width: 100%; width: 100%;
margin: 0 auto; margin: 0 auto;
padding: 2px; padding: 2px;
height: calc(100% - 19px);
} }
#terminal-container .terminal { #terminal-container .terminal {
background-color: #000000; background-color: #000000;
color: #fafafa; color: #fafafa;
padding: 2px; padding: 2px;
height: calc(100% - 19px);
} }
#terminal-container .terminal:focus .terminal-cursor { #terminal-container .terminal:focus .terminal-cursor {
background-color: #fafafa; background-color: #fafafa;
} }
#bottomdiv { #bottomdiv {
position: fixed;
left: 0;
bottom: 0;
width: 100%; width: 100%;
background-color: rgb(50, 50, 50); background-color: rgb(50, 50, 50);
border-color: white; border-color: white;
border-style: solid none none none; border-style: solid none none none;
border-width: 1px; border-width: 1px;
z-index: 99; z-index: 99;
flex: 0 1 30px; height: 19px;
} }
#footer { #footer {
display: inline-block; display: inline-block;
color: rgb(240, 240, 240); color: rgb(240, 240, 240);
@ -188,7 +185,6 @@ body {
border-width: 1px; border-width: 1px;
text-align: left; text-align: left;
} }
#status { #status {
display: inline-block; display: inline-block;
color: rgb(240, 240, 240); color: rgb(240, 240, 240);
@ -201,7 +197,6 @@ body {
text-align: left; text-align: left;
z-index: 100; z-index: 100;
} }
#menu { #menu {
display: inline-block; display: inline-block;
font-size: 16px; font-size: 16px;
@ -209,16 +204,13 @@ body {
padding-left: 10px; padding-left: 10px;
z-index: 100; z-index: 100;
} }
#menu:hover .dropup-content { #menu:hover .dropup-content {
display: block; display: block;
} }
.dropup { .dropup {
position: relative; position: relative;
display: inline-block; display: inline-block;
} }
.dropup-content { .dropup-content {
display: none; display: none;
position: absolute; position: absolute;
@ -228,24 +220,21 @@ body {
bottom: 18px; bottom: 18px;
z-index: 101; z-index: 101;
} }
.dropup-content a { .dropup-content a {
color: #777; color: #777;
padding: 12px 16px; padding: 12px 16px;
text-decoration: none; text-decoration: none;
display: block; display: block;
} }
.dropup-content a:hover {
.dropup-content a:hover {background-color: #ccc} background-color: #ccc
}
.dropup:hover .dropup-content { .dropup:hover .dropup-content {
display: block; display: block;
} }
.dropup:click .dropup-content { .dropup:click .dropup-content {
display: block; display: block;
} }
.dropup:hover .dropbtn { .dropup:hover .dropbtn {
background-color: #3e8e41; background-color: #3e8e41;
} }

33
src/css/style.css
View file

@ -7,7 +7,6 @@ body {
height: 100%; height: 100%;
margin: 0; margin: 0;
} }
#header { #header {
color: rgb(240, 240, 240); color: rgb(240, 240, 240);
background-color: rgb(0, 128, 0); background-color: rgb(0, 128, 0);
@ -19,40 +18,38 @@ body {
flex: 0 1 auto; flex: 0 1 auto;
z-index: 99; z-index: 99;
} }
.box { .box {
display: flex; display: block;
flex-flow: column;
height: 100%; height: 100%;
} }
#terminal-container { #terminal-container {
flex: 1 1 auto; display: block;
width: 100%; width: 100%;
margin: 0 auto; margin: 0 auto;
padding: 2px; padding: 2px;
height: calc(100% - 19px);
} }
#terminal-container .terminal { #terminal-container .terminal {
background-color: #000000; background-color: #000000;
color: #fafafa; color: #fafafa;
padding: 2px; padding: 2px;
height: calc(100% - 19px);
} }
#terminal-container .terminal:focus .terminal-cursor { #terminal-container .terminal:focus .terminal-cursor {
background-color: #fafafa; background-color: #fafafa;
} }
#bottomdiv { #bottomdiv {
position: fixed;
left: 0;
bottom: 0;
width: 100%; width: 100%;
background-color: rgb(50, 50, 50); background-color: rgb(50, 50, 50);
border-color: white; border-color: white;
border-style: solid none none none; border-style: solid none none none;
border-width: 1px; border-width: 1px;
z-index: 99; z-index: 99;
flex: 0 1 30px; height: 19px;
} }
#footer { #footer {
display: inline-block; display: inline-block;
color: rgb(240, 240, 240); color: rgb(240, 240, 240);
@ -64,7 +61,6 @@ body {
border-width: 1px; border-width: 1px;
text-align: left; text-align: left;
} }
#status { #status {
display: inline-block; display: inline-block;
color: rgb(240, 240, 240); color: rgb(240, 240, 240);
@ -77,7 +73,6 @@ body {
text-align: left; text-align: left;
z-index: 100; z-index: 100;
} }
#menu { #menu {
display: inline-block; display: inline-block;
font-size: 16px; font-size: 16px;
@ -85,16 +80,13 @@ body {
padding-left: 10px; padding-left: 10px;
z-index: 100; z-index: 100;
} }
#menu:hover .dropup-content { #menu:hover .dropup-content {
display: block; display: block;
} }
.dropup { .dropup {
position: relative; position: relative;
display: inline-block; display: inline-block;
} }
.dropup-content { .dropup-content {
display: none; display: none;
position: absolute; position: absolute;
@ -104,24 +96,21 @@ body {
bottom: 18px; bottom: 18px;
z-index: 101; z-index: 101;
} }
.dropup-content a { .dropup-content a {
color: #777; color: #777;
padding: 12px 16px; padding: 12px 16px;
text-decoration: none; text-decoration: none;
display: block; display: block;
} }
.dropup-content a:hover {
.dropup-content a:hover {background-color: #ccc} background-color: #ccc
}
.dropup:hover .dropup-content { .dropup:hover .dropup-content {
display: block; display: block;
} }
.dropup:click .dropup-content { .dropup:click .dropup-content {
display: block; display: block;
} }
.dropup:hover .dropbtn { .dropup:hover .dropbtn {
background-color: #3e8e41; background-color: #3e8e41;
} }

7
src/js/index.js
View file

@ -43,11 +43,10 @@ term.open(terminalContainer)
term.focus() term.focus()
term.fit() term.fit()
document.body.onresize = function () { window.addEventListener('resize', resizeScreen, false)
function resizeScreen () {
term.fit() 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 })
} }