Updated search box top position.

Office-of-Digital-Services · Jun 12, 2019 · 34364e7 · 34364e7
1 parent eb43f71
commit 34364e7
Show file tree

Hide file tree

Showing 8 changed files with 158 additions and 109 deletions.
diff --git a/css/cagov.core.css b/css/cagov.core.css
@@ -1,5 +1,5 @@
 /**
- * CA State Template v5.5 -  @version v5.5.4 -  5/31/2019 
+ * CA State Template v5.5 -  @version v5.5.4 -  6/12/2019 
   STYLES COMPILED FROM SOURCE (SCSS) DO NOT MODIFY */
 /* -----------------------------------------
    BOOTSTRAP v4.3.1 - /source/scss/bootstrap/ 
@@ -11719,7 +11719,6 @@ code {
   padding: 0 10px;
   -webkit-transition: border 0.4s;
   transition: border 0.4s;
-  outline: none;
 }
 
 .search-container .submit-container, .featured-search.active .submit-container {
@@ -11926,7 +11925,6 @@ code {
     padding: 0 4px;
     -webkit-transition: border 0.4s;
     transition: border 0.4s;
-    outline: none;
   }
 }
 
@@ -12241,7 +12239,6 @@ GOOGLE CUSTOM SEARCH CUSTOMIZATION OVERRIDES
   border-radius: 0;
   border: 3px solid transparent;
   transition: border 0.4s;
-  outline: none;
   font-size: 1.1rem;
   height: 55px !important;
   padding: 14px !important;
@@ -17808,7 +17805,7 @@ input[type="checkbox"]:focus + div, input[type="radio"]:focus + div {
 }
 
 input[type="checkbox"]:focus + .btn, input[type="radio"]:focus + .btn {
-  outline: 1px dotted #000;
+  outline: solid 2px #2ea3f2;
 }
 
 .custom-radio .custom-control-input:checked ~ .custom-control-label::before {
@@ -17828,6 +17825,11 @@ input[type="checkbox"]:focus + .btn, input[type="radio"]:focus + .btn {
   color: #32852E;
 }
 
+/* Accessibilty focus */
+input:focus, textarea:focus, button:focus, select:focus {
+  outline: solid 2px #2ea3f2;
+}
+
 /* -----------------------------------------
    PUBLICATIONS /source/scss/cagov/publications.scss
 ----------------------------------------- */

diff --git a/css/cagov.core.min.css b/css/cagov.core.min.css
diff --git a/js/cagov.core.js b/js/cagov.core.js
@@ -1,5 +1,5 @@
 /**
- * CA State Template v5.5 -  @version v5.5.4 -  6/6/2019 
+ * CA State Template v5.5 -  @version v5.5.4 -  6/12/2019 
   STYLES COMPILED FROM SOURCE (source/js) DO NOT MODIFY */
 /*! modernizr (Custom Build) | MIT *
  * https://modernizr.com/download/?-flexbox-setclasses !*/
@@ -16604,6 +16604,13 @@ $(document).ready(function () {
     var searchInput = $("#head-search #Search .search-textfield");
     var searchSubmit = $("#head-search #Search .gsc-search-button");
     var searchReset = $("#head-search #Search .gsc-clear-button");
+    var featuredsearch = $("#head-search").hasClass("featured-search");
+    var searchactive = $("#head-search").hasClass("active");
+    var $globalHeader = $('.global-header');
+    var searchbox = $(".search-container:not(.featured-search)");
+    var headerHeight = $globalHeader.innerHeight();
+    var utility = 34;
+    var searchtop = headerHeight - utility;
 
     var $body = $("body");
     var $specialIcon =
@@ -16638,29 +16645,41 @@ $(document).ready(function () {
     // so instead we are binding to what I'm assuming will aslways be the search
     $('.top-level-nav .nav-item .ca-gov-icon-search, #nav-item-search').parents('.nav-item').on('click', function (e) {
         $searchText.trigger("focus").trigger('focus');
-        // // already opened search, nothing else needs to be done
-        // if ($searchContainer.hasClass('active')) {
-        //     return;
-        // }
-
+
+        // mobile
         if (mobileView() && !$('.search-container').hasClass('active')) {
             $('html, body').animate({
                 scrollTop: $("#head-search").offset().top
             }, 500);
         }
-        $('.search-container').toggleClass('active');
 
+        if (!featuredsearch) {
+            $('.search-container:not(.featured-search)').toggleClass('active');
+        }
+
+        var featuredsearch = $("#head-search").hasClass("featured-search");
+        var searchactive = $("#head-search").hasClass("active");
         // hide Search form if it's not active
-        if ($('.search-container').hasClass('active')) {
+        if (searchactive) {
             searchInput.removeAttr('tabindex');
             searchSubmit.removeAttr('tabindex');
             searchReset.removeAttr('tabindex');
-        } else {
+
+        }
+        else {
             searchInput.attr('tabindex', "-1");
             searchSubmit.attr('tabindex', "-1");
             searchReset.attr('tabindex', "-1");
         }
 
+       if (featuredsearch) {
+            searchInput.removeAttr('tabindex');
+            searchSubmit.removeAttr('tabindex');
+          searchReset.removeAttr('tabindex');
+        }
+
+        if (mobileView() && featuredsearch) { $('.search-container').toggleClass('active');}
+
         // let the user know the input box is where they should search
         $("#head-search").addClass('play-animation').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
             $(this).removeClass('play-animation');
@@ -16679,17 +16698,17 @@ $(document).ready(function () {
     // Helpers
     function addSearchResults() {
         $body.addClass("active-search");
-        $searchContainer.addClass('active');
-        $resultsContainer.addClass('visible');
+        //$searchContainer.addClass('active');
+        //$resultsContainer.addClass('visible');
         // close the the menu when we are search
-        $('#navigation').addClass('mobile-closed');
+        //$('#navigation').addClass('mobile-closed');
         // hide the ask group as well
-        $('.ask-group').addClass('fade-out');
+       // $('.ask-group').addClass('fade-out');
 
         // fire a scroll event to help update headers if need be
-        $(window).scroll();
+       // $(window).scroll();
 
-        $.event.trigger('cagov.searchresults.show');
+       // $.event.trigger('cagov.searchresults.show');
     }
 
     function removeSearchResults() {
@@ -16698,14 +16717,20 @@ $(document).ready(function () {
         $searchContainer.removeClass('active');
         $resultsContainer.removeClass('visible');
         $('.ask-group').removeClass('fade-out');
+
+        if (!featuredsearch) {
         searchInput.attr('tabindex', "-1");
         searchSubmit.attr('tabindex', "-1");
         searchReset.attr('tabindex', "-1");
-
+        }
         // fire a scroll event to help update headers if need be
         $(window).scroll();
 
         $.event.trigger('cagov.searchresults.hide');
+
+        if (mobileView()) {
+            $('html, body').animate({ scrollTop: 0 }, "slow");
+        }
     }
 
     // Mobile Search toggle
@@ -16718,6 +16743,8 @@ $(document).ready(function () {
         }
     });
 
+
+
     // Make Search form tabable if it's featured
     if ($('#head-search').hasClass('featured-search')) {
         searchInput.removeAttr('tabindex');
@@ -16729,8 +16756,35 @@ $(document).ready(function () {
         searchReset.attr('tabindex', "-1");
     }
 
+    //  search box top position
+    if (!mobileView()) {
+        searchbox.css({
+            'top': Math.max(searchtop, 87)
+        });
+    } 
+
+
+
+
+
+
+});
+
+//  search box top position if browser window is resized
+$(window).on('resize', function () {
+    var $globalHeader = $('.global-header');
+    var searchbox = $(".search-container:not(.featured-search)");
+    var headerHeight = $globalHeader.innerHeight();
+    var utility = 34;
+    var searchtop = headerHeight - utility;
+    if (!mobileView()) {
+        searchbox.css({
+            'top': Math.max(searchtop, 87)
+        });
+    }
 });
 
+
 function mobileView() {
     return $('.global-header .mobile-controls').css('display') !== "none"; // mobile view uses arrow to show subnav instead of first touch
 }

diff --git a/js/cagov.core.min.js b/js/cagov.core.min.js
diff --git a/js/search.js b/js/search.js
@@ -22,66 +22,3 @@ _gaq.push(['b._trackPageview']);
     var s = document.getElementsByTagName('script')[0];
     s.parentNode.insertBefore(ga, s);
 })();
-
-// Google Custom Search 
-
-(function () {
-
-    window.__gcse = {
-        callback: myCallback
-    };
-
-    function myCallback() {
-        var $searchContainer = $("#head-search");
-        var $searchText = $searchContainer.find(".gsc-input");
-        var $resultsContainer = $('.search-results-container');
-        var $body = $("body");
-
-        $searchText.on("click", function () {
-            addSearchResults();
-            $searchContainer.addClass("search-freeze-width");
-        });
-
-        $searchText.on("blur", function () {
-            $searchContainer.removeClass("search-freeze-width");
-
-        });
-
-        // Close search when close icon is clicked
-        $('div.gsc-clear-button').on('click', function () { removeSearchResults(); });
-
-        //	$('.gsc-search-button').innerHTML
-
-
-        // Helpers
-        function addSearchResults() {
-            $body.addClass("active-search");
-            $searchContainer.addClass('active');
-            $resultsContainer.addClass('visible');
-            // close the the menu when we are search
-            $('#navigation').addClass('mobile-closed');
-            // fire a scroll event to help update headers if need be
-            $(window).on('scroll');
-
-            $.event.trigger('cagov.searchresults.show');
-        }
-
-        function removeSearchResults() {
-            $body.removeClass("active-search");
-            $searchContainer.removeClass('active');
-            $resultsContainer.removeClass('visible');
-            searchInput.attr('tabindex', "-1");
-            searchSubmit.attr('tabindex', "-1");
-            searchReset.attr('tabindex', "-1");
-
-
-            // fire a scroll event to help update headers if need be
-            $(window).on('scroll');
-
-            $.event.trigger('cagov.searchresults.hide');
-        }
-
-    }
-
-
-})();