diff --git a/res/app/components/stf/screen/screen-directive.js b/res/app/components/stf/screen/screen-directive.js index d4dcaa6e..ca06b582 100644 --- a/res/app/components/stf/screen/screen-directive.js +++ b/res/app/components/stf/screen/screen-directive.js @@ -227,16 +227,16 @@ module.exports = function DeviceScreenDirective($document, ScalingService, // changes from 180 to 270 (it will do a reverse rotation). switch (screen.rotation) { case 0: - canvas.style[cssTransform] = 'translate(-50%, -50%) rotate(0deg)' + canvas.style[cssTransform] = 'rotate(0deg)' break case 90: - canvas.style[cssTransform] = 'translate(-50%, -50%) rotate(-90deg)' + canvas.style[cssTransform] = 'rotate(-90deg)' break case 180: - canvas.style[cssTransform] = 'translate(-50%, -50%) rotate(-180deg)' + canvas.style[cssTransform] = 'rotate(-180deg)' break case 270: - canvas.style[cssTransform] = 'translate(-50%, -50%) rotate(90deg)' + canvas.style[cssTransform] = 'rotate(90deg)' break } } diff --git a/res/app/components/stf/screen/screen.jade b/res/app/components/stf/screen/screen.jade index dceb2586..2eeaf381 100644 --- a/res/app/components/stf/screen/screen.jade +++ b/res/app/components/stf/screen/screen.jade @@ -1,4 +1,5 @@ -canvas(ng-show='device') +div.screen-center + canvas(ng-show='device') div(ng-if='displayError').screen-error .screen-error-message nothing-to-show(message='{{"No device screen"|translate}}', icon='fa-eye-slash', ng-show='true') diff --git a/res/app/control-panes/device-control/device-control.css b/res/app/control-panes/device-control/device-control.css index b045ecb7..d3e7c290 100644 --- a/res/app/control-panes/device-control/device-control.css +++ b/res/app/control-panes/device-control/device-control.css @@ -27,21 +27,29 @@ device-screen { user-select: none; } -device-screen .screen-touch { - width: 100%; - height: 100%; +device-screen .screen-center { + position: absolute; + top: -100%; + right: -100%; + bottom: -100%; + left: -100%; + pointer-events: none; } device-screen canvas { position: absolute; - top: 50%; - left: 50%; + top: 0; + right: 0; + bottom: 0; + left: 0; + margin: auto; + pointer-events: none; /* MUST HAVE or touch coordinates will be off */ transition: width 100ms linear, -webkit-transform 250ms ease-in-out; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: rotate(0deg); - transform: translate(-50%, -50%) rotate(0deg); + transform: rotate(0deg); } device-screen .finger {