From 09fba92ac732dcb992096dee5cb5f3723ab72f0f Mon Sep 17 00:00:00 2001 From: "stephen@cubedesigners.com" Date: Tue, 19 Jul 2016 12:07:15 +0000 Subject: [PATCH] Done #554 @2.5 --- .../controllers/AjaxController.php | 2 +- js/315-quote.js | 17 +++++++++-- less/001-variables.less | 1 + less/005-fancyselect.less | 30 ++++++++----------- less/104-nav.less | 2 +- less/315-quote.less | 2 +- 6 files changed, 31 insertions(+), 23 deletions(-) diff --git a/framework/application/controllers/AjaxController.php b/framework/application/controllers/AjaxController.php index c82be1f..a834f5a 100644 --- a/framework/application/controllers/AjaxController.php +++ b/framework/application/controllers/AjaxController.php @@ -25,7 +25,7 @@ class AjaxController extends CubeIT_Controller_AjaxController { $this->_datas->addReplace('#'. $formID, '
' . $okmessage . '
'); } else { $this->_datas->refreshForm($form); // Respond with validation errors - $this->_datas->addAction('eval', 'displayErrors()'); + $this->_datas->addAction('eval', "displayErrors('$formID')"); } } diff --git a/js/315-quote.js b/js/315-quote.js index 58d9597..db33dab 100644 --- a/js/315-quote.js +++ b/js/315-quote.js @@ -1,16 +1,24 @@ registerLoader(load_quoteform, true); function load_quoteform() { - $('#requestQuote select').fancySelect(); + + initFancySelect(); + + $(window).on('cubeitopenpopup', function() { + initFancySelect(); + }); } +function initFancySelect() { + $('#requestQuote select, #requestQuotePopup select').fancySelect(); +} -function displayErrors() { +function displayErrors(formID) { var errors = []; // Collect errors from the form - $('.errormessage').each(function () { + $('#' + formID + ' .errormessage').each(function () { errors.push($(this).text()); $('.validation-messages').html(errors.join('
')).fadeIn(500, function() { @@ -19,4 +27,7 @@ function displayErrors() { }, 3000); }); }); + + // Re-initialise the fancySelect + initFancySelect(); } \ No newline at end of file diff --git a/less/001-variables.less b/less/001-variables.less index f442cca..d94d54c 100644 --- a/less/001-variables.less +++ b/less/001-variables.less @@ -19,6 +19,7 @@ @color-header-grey: #2a3743; @color-light-grey: #f3f3f3; @color-error: #c91818; +@color-submenu-hover: #e86f68; //-- Content and breakpoints @mobile-breakpoint: 1024px; diff --git a/less/005-fancyselect.less b/less/005-fancyselect.less index 5dd410d..ba2cd2e 100644 --- a/less/005-fancyselect.less +++ b/less/005-fancyselect.less @@ -2,7 +2,6 @@ div.fancy-select { position: relative; - font-weight: 300; font-size: inherit; &.disabled { @@ -14,13 +13,13 @@ div.fancy-select { } select:focus + div.trigger.open { - box-shadow: none; + box-shadow: inset 0 -4px 0 #c2c4c7; } div.trigger { box-sizing: content-box; // To match other input elements cursor: pointer; - padding: 0 2.2em 0 0.4em; + padding: 0 3.4em 0 1em; line-height: 3.4; min-height: 3.4em; white-space: nowrap; @@ -29,12 +28,12 @@ div.fancy-select { position: relative; background: #fff; border: 1px solid #000; - color: #aaa; // Placeholder text + color: #000; // Placeholder text z-index: 2; transition: all 140ms ease-out; &.selected { - color: #323232; + color: #000; } // Arrow @@ -65,7 +64,7 @@ div.fancy-select { list-style: none; margin: 0; position: absolute; - top: 105%; + top: 100%; left: 0; visibility: hidden; opacity: 0; @@ -74,7 +73,7 @@ div.fancy-select { max-height: 12.8em; width: 100%; overflow: auto; - background: #f8f8f8; + background: #fff; //border-top: 1px solid #7DD8D2; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); transition: all 150ms ease-out; @@ -83,7 +82,7 @@ div.fancy-select { z-index: 10; visibility: visible; opacity: 1; - max-height: 12.8em; // Each item is 80% of 2em high. We want to show 8 so: 8*2*0.8 = 12.8 + max-height: 12em; // Each item is 3em high. We want to show 4 so: 4*3 = 12 /* have to use a non-visibility transition to prevent this iOS issue (bug?): */ /*http://stackoverflow.com/questions/10736478/css-animation-visibility-visible-works-on-chrome-and-safari-but-not-on-ios*/ @@ -92,7 +91,7 @@ div.fancy-select { &.overflowing { top: auto; - bottom: 110%; + bottom: 105%; &.open { //transition: opacity, max-height 300ms ease-out; @@ -100,10 +99,9 @@ div.fancy-select { } li { - font-size: 80%; - line-height: 2; - padding: 0 12px; - color: #323232; + line-height: 3; + padding: 0 1em; + color: @color-text; cursor: pointer; white-space: nowrap; text-overflow: ellipsis; @@ -111,13 +109,11 @@ div.fancy-select { //transition: all 100ms ease-out; &.selected { - background: rgba(200,200,200,0.3); - color: #000; + color: @color-submenu-hover; } &.hover { - background: #ddd; - color: #000; + color: @color-submenu-hover; } } } diff --git a/less/104-nav.less b/less/104-nav.less index f6f02fe..ddaed5f 100644 --- a/less/104-nav.less +++ b/less/104-nav.less @@ -120,7 +120,7 @@ nav#menu { &.active a, a:hover { border-bottom-color: transparent; - color: #e86f68; + color: @color-submenu-hover; } } } diff --git a/less/315-quote.less b/less/315-quote.less index e42444b..45aaa42 100644 --- a/less/315-quote.less +++ b/less/315-quote.less @@ -160,7 +160,7 @@ } .error { - input[type="text"], input[type="email"], select { + input[type="text"], input[type="email"], select, .trigger { border-color: @color-text; box-shadow: inset 0 -4px 0 @color-error; } -- 2.39.5