Make control bar handle easier to hit on mobile

diff --git a/app/styles/base.css b/app/styles/base.css
index ec682c4664ddd8cb49f1971eb35b79a684c3f2be..78f97dff9247bd9f6b5c5ff921b925d5fb1b59c3 100644 (file)
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -22,6 +22,10 @@ html {
   height:100%;
 }
 
+.noVNC_only_touch.noVNC_hidden {
+  display: none;
+}
+
 /* ----------------------------------------
  * Input Elements
  * ----------------------------------------
@@ -202,6 +206,16 @@ input[type=button]:active, select:active {
 :root:not(.noVNC_connected) #noVNC_control_bar_handle {
   display: none;
 }
+#noVNC_control_bar_handle div {
+  position: absolute;
+  right: -35px;
+  top: 0;
+  width: 50px;
+  height: 50px;
+}
+:root:not(.noVNC_touch) #noVNC_control_bar_handle div {
+  display: none;
+}
 
 #noVNC_control_bar .noVNC_scroll {
   max-height: 100vh; /* Chrome is buggy with 100% */

diff --git a/vnc.html b/vnc.html
index 29d82521b5c706d1644ea2aa86d0efc9d7207056..5019bfd9c7ada7b9449baf503b903bfef8b6f3b3 100644 (file)
--- a/vnc.html
+++ b/vnc.html
@@ -53,7 +53,7 @@
     <div id="noVNC_control_bar_anchor" class="noVNC_vcenter">
 
         <div id="noVNC_control_bar">
-            <div id="noVNC_control_bar_handle" title="Hide/Show the control bar"></div>
+            <div id="noVNC_control_bar_handle" title="Hide/Show the control bar"><div></div></div>
 
             <div class="noVNC_scroll">