Avoid mobile Safari zoom on input focus

openshift · Nov 12, 2015 · 32314fc · 32314fc
1 parent 8352f0b
commit 32314fc
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 2 deletions.
diff --git a/assets/app/styles/_core.less b/assets/app/styles/_core.less
@@ -11,6 +11,18 @@ html, body {
   display: none !important;
 }
 
+// Prevent zooming when focusing input fields in mobile Safari. Try to only
+// target mobile devices to avoid larger-than-wanted fonts elsewhere.
+@media only screen and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 0) {
+  input[type="text"],
+  input[type="number"],
+  input[type="search"],
+  input[type="url"],
+  textarea {
+    font-size: 16px;
+  }
+}
+
 .console-os {
   background-color: @body-bg;
   height: ~"calc(100% - 121px)"; // removes scrollbar on pages with less than full viewport content

diff --git a/assets/app/views/create/fromimage.html b/assets/app/views/create/fromimage.html
@@ -18,7 +18,7 @@
                 <div class="clearfix visible-xs-block"></div>
                 <form class="" ng-show="imageStream" novalidate name="form">
                   <div style="margin-bottom: 15px;">
-                    <div class="form-group form-group-lg">
+                    <div class="form-group">
                      <label for="appname" class="required">Name</label>
                      <!--
                        Only validate the name pattern and minlength if the field has both been changed and blurred.  This

diff --git a/pkg/assets/bindata.go b/pkg/assets/bindata.go
@@ -8019,7 +8019,7 @@ var _scriptsTemplatesJs = []byte(`angular.module('openshiftConsoleTemplates', []
     "<div class=\"clearfix visible-xs-block\"></div>\n" +
     "<form class=\"\" ng-show=\"imageStream\" novalidate name=\"form\">\n" +
     "<div style=\"margin-bottom: 15px\">\n" +
-    "<div class=\"form-group form-group-lg\">\n" +
+    "<div class=\"form-group\">\n" +
     "<label for=\"appname\" class=\"required\">Name</label>\n" +
     "\n" +
     "<div ng-class=\"{'has-error': (form.appname.$error.required && form.appname.$dirty) || (form.appname.$invalid && shouldValidateName) || nameTaken}\">\n" +
@@ -69613,6 +69613,7 @@ to{transform:rotate(359deg)}}
 .hide-ng-leave .ng-leave,.hide-ng-leave.ng-leave{display:none}
 body,html{height:100%}
 .ng-cloak,.x-ng-cloak,[data-ng-cloak],[ng-cloak],[ng\:cloak],[x-ng-cloak]{display:none!important}
+@media only screen and (max-device-width:736px) and (-webkit-min-device-pixel-ratio:0){input[type=number],input[type=search],input[type=text],input[type=url],textarea{font-size:16px}}
 .console-os{background-color:#f6f6f6;height:calc(100% - 121px)}
 .console-os #content-wrap,.console-os #content-wrap .content{height:100%}
 .console-os .container-main{background-color:#f6f6f6;padding-bottom:80px;-webkit-flex:1;-moz-flex:1;-ms-flex:1;flex:1}