Added responsive form search on mobile and desktop.

src/assets/js/js.js

@@ -55,7 +55,10 @@ jQuery(document).ready(function( $ ) {
     $('.showInput').on('click', function(){
         $('.tainacan-form-search').removeClass('d-none');
         $('.tainacan-form-search').addClass('d-flex');
-        $(this).addClass('d-none');
+        if($(window).width() > 768){
+            $(this).addClass('d-none');
+        }
+        $(this).attr('type', 'submit');
         $('.tainacan-form-search').animate({opacity: '1'}, "slow");
         /* if($.trim($('.tainacan-input-search').val()).length){
             $('#btn-reset').removeClass('d-none');
@@ -66,6 +69,7 @@ jQuery(document).ready(function( $ ) {
     $('.tainacan-input-search').on('blur', function(){
         $('.tainacan-form-search').animate({opacity: '0'}, "slow", function(){
             $('.showInput').removeClass('d-none');
+            $('.showInput').removeAttr('type');
         });
     });
 
@@ -78,7 +82,3 @@ jQuery(document).ready(function( $ ) {
     observer.observe(document.getElementById('items-list-area'), config);
 
 });
-
-function showInput(){
-    this.removeClass = 'd-none';
-}

src/assets/scss/style.scss

@@ -111,7 +111,24 @@ form{
     &.tainacan-form-search{
         flex-flow: nowrap;
         opacity: 0;
+        @media only screen and (max-width: 576px) {
+            position: absolute;
+            top: 46px;
+            right: 86px;
+            z-index: 2;
+        }
+        @media only screen and (min-width: 600px) and (max-width: 768px) {
+            position: absolute;
+            top: 46px;
+            right: 120px;
+            z-index: 2;
+        }
         .tainacan-input-search{
+            transition: width .4s cubic-bezier(0.000, 0.795, 0.000, 1.000);
+            @media only screen and (max-width: 768px) {
+                width: 250px;
+                height: 27px;
+            }
             border-color: #cbcbcb !important;
             &:focus{
                 box-shadow: none;

src/functions.php

@@ -169,9 +169,9 @@ function tainacan_get_logo() {
 
 function tainacan_get_form_search(){
     if(wp_is_mobile()){
-        $input = 'border-0';
+        $input = 'border-0 rounded-0';
-        $reset = 'border-0';
+        $reset = 'border-0 rounded-0';
-        $submit = 'border-0';
+        $submit = 'border-0 rounded-0';
     }else{
         $input = 'border-right-0 rounded-0';
         $reset = 'border-left-0 border-right-0 rounded-0';
@@ -189,8 +189,8 @@ function tainacan_get_form_search(){
                     $form .= '<button type="reset" class="btn border bg-white tainacan-button-search '.$reset.'"><i class="mdi mdi-close"></i></button>';
                 $form .= '</div>';
             }
-            $form .= '<div id="btn-submit" class="mr-1">';
+            $form .= '<div id="btn-submit" class="mr-1 d-none d-lg-block">';
-                $form .= '<button id="btn-submit-search" class="btn text-heavy-metal bg-white pl-0 pr-1 tainacan-button-search py-0 '.$submit.'"><i class="mdi mdi-magnify"></i></button>';
+                $form .= '<button type="submit" id="btn-submit-search" class="btn text-heavy-metal bg-white pl-0 pr-1 tainacan-button-search py-0 '.$submit.'"><i class="mdi mdi-magnify"></i></button>';
             $form .= '</div>';
         $form .= '</div>';
     $form .= '</form>';

src/header.php

@@ -18,8 +18,7 @@
             <?php echo tainacan_get_logo(); ?>
             <div class="btn-group ml-auto"> 
                 <?php 
-                    if(!wp_is_mobile())
+                    echo tainacan_get_form_search();
-                        echo tainacan_get_form_search();
                 ?>
                 <button class="btn btn-link text-heavy-metal px-1 showInput"><i class="mdi mdi-magnify"></i></button>
                 <button type="button" class="btn btn-link text-heavy-metal dropdown-toggle dropdown-toggle-split px-1 d-flex align-items-center" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

src/template-parts/bannerHeader.php

@@ -1,6 +1,6 @@
 <?php 
-    if(wp_is_mobile())
+    /* if(wp_is_mobile())
-        echo tainacan_get_form_search();
+        echo tainacan_get_form_search(); */
 ?>
 
 <div <?php if ( get_header_image() ) : ?>class="page-header header-filter clear-filter page-height" style="background-image: url('<?php header_image(); ?>')"<?php else: ?>class="page-header header-filter clear-filter" style="background-image: url('<?php echo get_template_directory_uri() ?>/assets/images/capa.png')"<?php endif; ?>>