starred/stf-DeviceFarmer
1
0
Fork 0
mirror of https://github.com/DeviceFarmer/stf.git synced 2026-04-18 08:03:30 +02:00
Code Issues Packages Projects Releases Wiki Activity

The screen should now stretch to fill all the available area while maintaining aspect ratio. Includes a terrifying hack for the 270deg rotation.

Browse Source
This commit is contained in:
Simo Kinnunen
2015-04-22 19:31:19 +09:00
parent 0839602943
commit 685882d19f
3 changed files with 125 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
res/app/control-panes/device-control/device-control.css
View File

@@ -18,6 +18,7 @@ device-screen {
display: block;
overflow: hidden;
/*cursor: pointer;*/
text-align: center; /* needed for centering after rotating to 270 */
-webkit-touch-callout: none;
-webkit-user-select: none;
@@ -27,17 +28,20 @@ device-screen {
user-select: none;
}
device-screen .screen-center {
device-screen .positioner {
position: absolute;
top: -100%;
right: -100%;
bottom: -100%;
left: -100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
pointer-events: none;
}
device-screen canvas {
device-screen canvas.screen {
position: absolute;
width: 100%;
height: auto;
top: 0;
right: 0;
bottom: 0;
@@ -52,6 +56,81 @@ device-screen canvas {
transform: rotate(0deg);
}
device-screen .positioner .hacky-stretcher {
outline: 1px solid red;
height: 100%;
width: auto;
margin: 0;
padding: 0;
pointer-events: none;
}
/* screen is in default rotation or upside down, possibly with empty space on left/right */
device-screen/*.portrait*/ .positioner {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
device-screen/*.portrait*/ canvas.screen {
width: auto;
height: 100%;
}
/* screen is in default rotation or upside down, possibly with empty space on top/bottom */
device-screen/*.portrait*/.letterboxed .positioner {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
device-screen/*.portrait*/.letterboxed canvas.screen {
width: 100%;
height: auto;
}
/* screen is rotated sideways, possibly with empty space on left/right */
device-screen.rotated .positioner {
position: relative;
display: inline-block;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
}
device-screen.rotated canvas.screen {
width: 100%;
height: auto;
}
/* screen is rotated sideways, possibly with empty space on top/bottom */
device-screen.rotated.letterboxed .positioner {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 100%;
padding-top: 100%;
height: 0;
}
device-screen.rotated.letterboxed canvas.screen {
height: 100%;
width: auto;
}
device-screen .finger {
position: absolute;
border-radius: 50%;