From 54bc27f71d159970e96b4bf59ff42c1a8e6b458e Mon Sep 17 00:00:00 2001 From: "stephen@cubedesigners.com" Date: Mon, 1 Aug 2016 16:23:07 +0000 Subject: [PATCH] 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 --- .../application/controllers/AjaxpopupController.php | 1 + less/005-fancyselect.less | 9 +++++++++ less/315-quote.less | 6 ++++++ 3 files changed, 16 insertions(+) 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; } -- 2.39.5