diff --git a/web/static/css/guac-main.css b/web/static/css/guac-main.css index 4b7a016ce11..5896e3c4d32 100644 --- a/web/static/css/guac-main.css +++ b/web/static/css/guac-main.css @@ -1,12 +1,25 @@ +html, body { + margin: 0; + padding: 0; + height: 100%; + overflow: hidden; +} + +.guaconsole { + display: flex; + flex-direction: column; + height: 100vh; +} + #container { position: relative; - width: 100%; - height: 20em; + flex: 1; + overflow: hidden; } #terminal { height: 100%; - width: 100% + width: 100%; } .dialog, diff --git a/web/static/js/guac-main.js b/web/static/js/guac-main.js index 7a7319c3a5c..b4e2d27ea51 100644 --- a/web/static/js/guac-main.js +++ b/web/static/js/guac-main.js @@ -27,6 +27,37 @@ function GuacMe(element, guest_ip, vncport, session_id, recording_name) { /* Show the terminal. */ $('#terminal').append(terminal_element); + /* Scale display to fit the browser window. */ + var scaleDisplay = function() { + var display = terminal_client.getDisplay(); + var displayWidth = display.getWidth(); + var displayHeight = display.getHeight(); + if (!displayWidth || !displayHeight) return; + + var container = document.getElementById('container'); + var containerWidth = container.offsetWidth; + var containerHeight = container.offsetHeight; + if (!containerWidth || !containerHeight) return; + + var scale = Math.min( + containerWidth / displayWidth, + containerHeight / displayHeight + ); + display.scale(scale); + }; + + /* Re-scale when the display size changes (initial connect). */ + terminal_client.getDisplay().onresize = function() { + scaleDisplay(); + }; + + /* Re-scale on browser window resize (debounced). */ + var resizeTimeout; + window.addEventListener('resize', function() { + clearTimeout(resizeTimeout); + resizeTimeout = setTimeout(scaleDisplay, 100); + }); + /* Disconnect on tab close. */ window.onunload = function() { terminal_client.disconnect(); @@ -38,7 +69,7 @@ function GuacMe(element, guest_ip, vncport, session_id, recording_name) { mouse.onmousedown = mouse.onmouseup = mouse.onmousemove = function(mouseState) { - terminal_client.sendMouseState(mouseState); + terminal_client.sendMouseState(mouseState, true); }; /* Keyboard handling. */