Wrap screen viewer.

immense · Apr 4, 2020 · 9aebf90 · 9aebf90
1 parent d5450f0
commit 9aebf90
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git a/Server/Pages/RemoteControl.cshtml b/Server/Pages/RemoteControl.cshtml
@@ -12,7 +12,7 @@
 <html>
 <head>
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=0.9" />
+    <meta name="viewport" content="width=device-width, initial-scale=0.9, user-scalable=no" />
     <link rel="icon" href="~/favicon.ico" />
     <title>Remotely Remote Control</title>
     <meta name="apple-mobile-web-app-capable" content="yes" />
@@ -172,7 +172,7 @@
     </div>
 
 
-    <div class="center-aligned">
+    <div id="screenViewerWrapper" class="center-aligned">
         <canvas id="screenViewer" hidden="hidden"></canvas>
         <input id="fileTransferInput" hidden="hidden" type="file" />
         <textarea id="touchKeyboardTextArea" value=" #"> #</textarea>

diff --git a/Server/wwwroot/css/remote-control.css b/Server/wwwroot/css/remote-control.css
@@ -110,12 +110,22 @@ button {
     }
 
 
+#screenViewerWrapper {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    overflow: auto;
+    -ms-touch-action: pan-x pan-y;
+    touch-action: pan-x pan-y;
+}
 #screenViewer {
     max-width: 99vw;
     max-height: 99vh;
     z-index: 1;
-    -ms-touch-action: none;
-    touch-action: none;
+    -ms-touch-action: pan-x pan-y;
+    touch-action: pan-x pan-y;
 }
 
 #connectBox {
@@ -253,6 +263,8 @@ footer {
 
 #touchKeyboardTextArea {
     position: fixed;
+    left: 50%;
+    transform: translateX(-50%);
     top: -100%;
 }