mobile Search improvement

Author: hugosolar

frontend-build/scss/modules.scss

@@ -423,4 +423,38 @@ table.ccgn-profile {
             font-weight: bold;
         }
     }
+}
+.search-mobile-container {
+    position: fixed;
+    width: 100%;
+    top: -3rem;
+    padding: 2rem 1rem 1rem 1rem;
+    background-color: $primary-color;
+    transition: all .5s ease-in-out;
+    opacity: 0;
+    .search-form {
+        position: relative;
+        margin-top: .5rem;
+        .search-field {
+            height: 3rem;
+            padding: .5rem;
+            background-color: $white;
+            border: 0;
+            border-bottom: 1px solid $black;
+            box-shadow: none;
+            @include placeholder {
+                color: $dark-gray;
+            }
+        }
+        .fa-search {
+            position: absolute;
+            right: .5rem;
+            top: .5rem;
+            font-size: 1.5rem;
+        }
+    }
+    &.open {
+        top: 3.5rem;
+        opacity: 1;
+    }
 }

themes/cc-commoners/assets/css/style.css

@@ -4513,6 +4513,45 @@ table.ccgn-profile {
     font-size: 1.1rem;
     font-weight: bold; }
 
+.search-mobile-container {
+  position: fixed;
+  width: 100%;
+  top: -3rem;
+  padding: 2rem 1rem 1rem 1rem;
+  background-color: #efbe01;
+  -webkit-transition: all .5s ease-in-out;
+  transition: all .5s ease-in-out;
+  opacity: 0; }
+  .search-mobile-container .search-form {
+    position: relative;
+    margin-top: .5rem; }
+    .search-mobile-container .search-form .search-field {
+      height: 3rem;
+      padding: .5rem;
+      background-color: #fefefe;
+      border: 0;
+      border-bottom: 1px solid #0a0a0a;
+      -webkit-box-shadow: none;
+              box-shadow: none; }
+      .search-mobile-container .search-form .search-field.placeholder {
+        color: #8a8a8a; }
+      .search-mobile-container .search-form .search-field:-moz-placeholder {
+        color: #8a8a8a; }
+      .search-mobile-container .search-form .search-field::-moz-placeholder {
+        color: #8a8a8a; }
+      .search-mobile-container .search-form .search-field:-ms-input-placeholder {
+        color: #8a8a8a; }
+      .search-mobile-container .search-form .search-field::-webkit-input-placeholder {
+        color: #8a8a8a; }
+    .search-mobile-container .search-form .fa-search {
+      position: absolute;
+      right: .5rem;
+      top: .5rem;
+      font-size: 1.5rem; }
+  .search-mobile-container.open {
+    top: 3.5rem;
+    opacity: 1; }
+
 @media screen and (max-width: 39.99875em) {
   .home .page-body {
     padding-top: 2.9rem; }

themes/cc-commoners/assets/js/cc-commoners.js

@@ -179,9 +179,19 @@ jQuery(document).ready(function($){
         $('.menu-mobile-container').toggleClass('hide');
         return false;
     });
+    $('.open-mobile-search').on('click', function(e){
+        e.preventDefault();
+        $('.search-mobile-container').toggleClass('open');
+        return false;
+    })
     $('.menu-mobile-container').find('.close').on('click', function (e) {
         e.preventDefault();
         $(this).parent().addClass('hide');
         return false;
     });
+    $('.search-mobile-container').find('.close').on('click', function (e) {
+        e.preventDefault();
+        $('.search-mobile-container').removeClass('open');
+        return false;
+    });
 });

themes/cc-commoners/header.php

@@ -68,6 +68,14 @@
             ?>
         </nav>
     </div>
+    <div class="search-mobile-container">
+        <a class="close" href="#">
+            <button class="close-button search" aria-label="Close alert" type="button" data-close>
+                <span aria-hidden="true">&times;</span>
+            </button>
+        </a>
+        <?php get_search_form(); ?>
+    </div>
     <header class="site-header hide-for-small-only" >
         <div class="grid-container">
             <div class="grid-x grid-padding-x align-center">