From: stephen@cubedesigners.com <stephen@cubedesigners.com@f5622870-0f3c-0410-866d-9cb505b7a8ef>
Date: Mon, 1 Aug 2016 16:23:07 +0000 (+0000)
Subject: Reduce margin on quote form popup for small screens. Also stop Safari from changing... 
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=54bc27f71d159970e96b4bf59ff42c1a8e6b458e;p=fluidbook-v3.git

Reduce margin on quote form popup for small screens. Also stop Safari from changing page zoom level when focusing / tapping on input fields. Fix #583 @2
---

diff --git a/framework/application/controllers/AjaxpopupController.php b/framework/application/controllers/AjaxpopupController.php
index a7c183e..d466d6a 100644
--- a/framework/application/controllers/AjaxpopupController.php
+++ b/framework/application/controllers/AjaxpopupController.php
@@ -5,6 +5,7 @@ class AjaxpopupController extends CubeIT_Controller_AjaxpopupController {
     public function quoteForm() {
         $this->setPopupMaxWidth('1440');
         $this->setPopupPadding('20');
+        $this->setVerticalMargin('20');
         return $this->view->quoteForm('requestQuotePopup'); // Different ID for popup form so it doesn't conflict with contact page form
     }
 
diff --git a/less/005-fancyselect.less b/less/005-fancyselect.less
index ba2cd2e..6ac0ea0 100644
--- a/less/005-fancyselect.less
+++ b/less/005-fancyselect.less
@@ -32,6 +32,15 @@ div.fancy-select {
     z-index: 2;
     transition: all 140ms ease-out;
 
+    // Since iOS zooms whole page for inputs that are using a smaller font size, we need to set
+    // the font size to 16px to avoid this. This changes the size of the inputs so the below rule
+    // is needed to make sure the FancySelect matches the height.
+    .ios & {
+      @media @m768 {
+        font-size: 16px; // iOS will zoom whole page if font size is smaller than 16px
+      }
+    }
+
     &.selected {
       color: #000;
     }
diff --git a/less/315-quote.less b/less/315-quote.less
index abe6f7c..7d41a41 100644
--- a/less/315-quote.less
+++ b/less/315-quote.less
@@ -85,6 +85,12 @@
 		font-family: @body-font;
 		color: @color-text;
 
+        .ios & {
+          @media @m768 {
+            font-size: 16px; // iOS will zoom whole page if font size is smaller than 16px
+          }
+        }
+
 		&:focus {
 			box-shadow: inset 0 -4px 0 #c2c4c7;
 		}